首頁 > web前端 > js教程 > angularjs如何匯出Excel實例分享

angularjs如何匯出Excel實例分享

小云云
發布: 2018-03-16 16:22:37
原創
2535 人瀏覽過

本文主要跟大家分享angularjs如何匯出Excel實例,希望能幫助大家。

angularjs 1.x導出Excel方法,常用的有2種

1. 直接匯出table為xls

service中加入

homeServiceMoudule.factory('Excel',['$window', '$sce','ConfigService', '$localStorage',function($window, $sce, ConfigService,$localStorage){
    var uri='data:application/vnd.ms-excel;base64,';
    var template=&#39;<html xmlns:o="urn:schemas-microsoft-com:office:office" 
    xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head>
    <!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
    <x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/>
    </x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook>
    </xml><![endif]--></head><body><table>{table}</table></body></html>&#39;;
    var base64=function(s){return window.btoa(window.unescape(encodeURIComponent(s)));};
    var format=function(s,c){return s.replace(/{(\w+)}/g,function(m,p){return c[p];});};
    return {
        tableToExcel:function(tableId,worksheetName){
            var table=window.$(tableId),
                ctx={worksheet:worksheetName,table:table.html()},
                href=uri+base64(format(template,ctx));
            return href;
        }
    };
}]);
登入後複製
data:application/vnd.ms-excel
登入後複製

相容於舊版,導出的為2003的xls。

如果改成:

data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
登入後複製

匯出為2007的xlsx.

在controller中引入'Excel'

##然後寫呼叫

$scope.exportToExcel=function(tableId){

      var exportHref=Excel.tableToExcel(tableId,  &#39;worksheetName&#39;);
          $timeout(function(){location.href=exportHref;},500);
};
登入後複製

html加入匯出按鈕


<button class="btn btn-link" style="float:right" ng-click="exportToExcel(&#39;#tableExcel&#39;)">
		    <span class="glyphicon glyphicon-share">导出Excel</span> 
		</button>
登入後複製

#記得把要匯出的table標籤加上id="tableExcel"


##注意:

1.匯出檔名隨機,匯出數字格式需要注意,可能被excel日期化,

2.在chrome瀏覽器中,我遇到了資料行數的bug,1600行沒問題,多了就匯出出錯,頁面會跳到空白頁,在Firefox正常。

2. 直接匯出資料

需要引進2個工具:

angularjs如何匯出Excel實例分享在頁面中引入xlsx.core.min.js 和alasql.js

用例:直接把資料匯出的2007的xslx


controller中編寫邏輯呼叫

//导出为excel
$scope.exportToExcel=function( ){ // ex: &#39;#my-table&#39;
	var excelArrs = getExcelData();
	 alasql.promise(&#39;SELECT * INTO XLSX("fileName&#39; + &#39;.xlsx",{headers:true}) FROM ?&#39;,[excelArrs])
		.then(function (data) {
		  if(data == 1){
			$timeout(function(){
			  console.log(&#39;数据导出成功!&#39;);
			})
		  }
		});
};

//组装ecxel数据
function getExcelData() {
	var var arr =[];
	var columns = 30;
	angular.forEach(dateList, function(data, index, datas) {
		var newObj = {
			column1:data.column1,
			column2:data.column2
		};
		var column = 0;
		if(data.hasOwnProperty(&#39;minList&#39;)) {
			var minList = data.minList; 
			if(minList != null && minList.length > 0){
				angular.forEach(minList, function(dataM, indexM, datasM) {
					if(dataM){
						if(dataM.value){
							column++;
							newObj["value"+indexM] = dataM.value;
							if(dataM.predict)
								newObj["date"+indexM] = dataM.date;
						}
					}
				});
			}
		}
		for(;column < columns ; column++){
			newObj["value"+column] = 	"";
			newObj["date"+column] = "";
		}
		arr.push(newObj);
	});
	return arr;
}
登入後複製

html中加入呼叫按鈕

<button class="btn btn-link"  ng-click="exportToExcel()">
			    <span class="glyphicon glyphicon-share">导出Excel</span> 
			</button>
登入後複製

注意

1. 匯出資料數組的第一個元素的屬性決定檔頭,如果第一個只有2個屬性,後面的陣列元素就算有再多的屬性值也不會被導出。所有需要把第一個元素寫滿屬性。

2. 可命名匯出檔名,但不能命名表名。

相關推薦:

五種JS匯出Excel的方法

#php匯出Excel裡HTML內容檔案類別方法

php使用原生的方法匯出excel實例分享

#

以上是angularjs如何匯出Excel實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板