How to export Excel instance sharing in angularjs-JS Tutorial-php.cn

How to export Excel instance sharing in angularjs

小云云

Release： 2018-03-16 16:22:37

Original

2555 people have browsed it

This article mainly shares with you how to export Excel instances in angularjs. I hope it can help you.

angularjs 1.x export Excel method, there are 2 commonly used methods

1. Directly export table to xls

add
to service

homeServiceMoudule.factory(&#39;Excel&#39;,[&#39;$window&#39;, &#39;$sce&#39;,&#39;ConfigService&#39;, &#39;$localStorage&#39;,function($window, $sce, ConfigService,$localStorage){
    var uri=&#39;data:application/vnd.ms-excel;base64,&#39;;
    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;
        }
    };
}]);

Copy after login

data:application/vnd.ms-excel

Copy after login

Compatible with old versions, the exported xls is 2003.

If changed to:

data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

Copy after login

Export to xlsx of 2007.

Introduce 'Excel' in the controller

Then write the call

$scope.exportToExcel=function(tableId){

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

Copy after login

htmlAdd export button

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

Copy after login

Remember to add the id="tableExcel" to the table tag to be exported

Note:

1. The name of the exported file is random. You need to pay attention to the format of the exported number. It may be dated by Excel.

2. In the Chrome browser, I encountered a bug with the number of data rows. 1,600 rows is no problem. If there are more, There is an error in exporting, and the page will jump to a blank page, which is normal in Firefox.

2. Directly export data

You need to introduce 2 tools:

How to export Excel instance sharing in angularjs

Introduce xlsx.core.min.js and alasql.js

Use case: Directly export data to the 2007 xslx

Write logical calls in the 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;
}

Copy after login

Add a call button in the html

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

Copy after login

Note

1. The attributes of the first element of the exported data array determine the file header. If the first one only has 2 attributes, the subsequent array elements will not have more attribute values. will be exported. All attributes need to be filled with the first element.

2. The export file name can be named, but the table name cannot be named.

Related recommendations:

Five JS methods to export Excel

php methods to export HTML content files in Excel

php uses the native method to export excel instance sharing

The above is the detailed content of How to export Excel instance sharing in angularjs. For more information, please follow other related articles on the PHP Chinese website!