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('Excel',['$window', '$sce','ConfigService', '$localStorage',function($window, $sce, ConfigService,$localStorage){ var uri='data:application/vnd.ms-excel;base64,'; var template='<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>'; 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, 'worksheetName'); $timeout(function(){location.href=exportHref;},500); };
htmlAdd export button
<button class="btn btn-link" style="float:right" ng-click="exportToExcel('#tableExcel')"> <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:
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: '#my-table' var excelArrs = getExcelData(); alasql.promise('SELECT * INTO XLSX("fileName' + '.xlsx",{headers:true}) FROM ?',[excelArrs]) .then(function (data) { if(data == 1){ $timeout(function(){ console.log('数据导出成功!'); }) } }); }; //组装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('minList')) { 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!