Home >Web Front-end >JS Tutorial >How to export Excel instance sharing in angularjs

How to export Excel instance sharing in angularjs

小云云Original: 2018-03-16 16:22:372556browse

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;
        }
    };
}]);

data:application/vnd.ms-excel

Compatible with old versions, the exported xls is 2003.

If changed to:

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

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);
};

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>

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;
}

Add a call button in the html

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

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript code to hide elements one by oneNext article：JavaScript code to hide elements one by one

See more

How to export Excel instance sharing in angularjs

Related articles