이 기사는 주로 Anglejs에서 Excel 인스턴스를 내보내는 방법을 공유합니다.
angularjs 1.x Excel 내보내기 방법, 일반적으로 사용되는 2가지 방법이 있습니다.
1. 테이블을 xls로 직접 내보내기
이전 버전과 호환되도록 서비스에
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
로그인 후 복사
를 추가하고, 내보낸 xls 2003년이다.
다음으로 변경된 경우:
data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
로그인 후 복사
2007 xlsx로 내보내기.
컨트롤러에 'Excel' 도입
그런 다음 call
$scope.exportToExcel=function(tableId){
var exportHref=Excel.tableToExcel(tableId, 'worksheetName');
$timeout(function(){location.href=exportHref;},500);
};로그인 후 복사
html을 작성하여 내보내기 버튼을 추가하세요
<button class="btn btn-link" style="float:right" ng-click="exportToExcel('#tableExcel')">
<span class="glyphicon glyphicon-share">导出Excel</span>
</button>
로그인 후 복사
테이블 태그를 추가하는 것을 기억하세요 id="tableExcel"
참고:
1. 내보낸 파일 이름은 무작위이며, Chrome 브라우저에서 날짜가 표시될 수 있으므로 주의해야 합니다. , 데이터 행 수에 버그가 발생했습니다. 1600줄이면 문제가 없지만, 그 이상이면 내보내기가 실패하고 페이지가 빈 페이지로 이동하는 현상이 Firefox에서는 정상입니다.
2. 데이터 직접 내보내기
2가지 도구를 도입해야 합니다:
페이지에 xlsx.core.min.js 및 alasql.js를 도입하세요
사용 사례: 데이터를 직접 내보내려면 2007 xslx
컨트롤러에 논리 호출을 작성하세요
//导出为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;
}로그인 후 복사
html
<button class="btn btn-link" ng-click="exportToExcel()">
<span class="glyphicon glyphicon-share">导出Excel</span>
</button>
로그인 후 복사
Note
1에 호출 버튼을 추가하세요. 첫 번째 항목에 2개의 속성만 있는 경우 내보낸 데이터 배열의 첫 번째 요소 속성이 결정됩니다. , 후속 배열 요소는 속성 값이 아무리 많아도 내보내지지 않습니다. 모든 속성은 첫 번째 요소로 채워져야 합니다.
2. 내보내기 파일 이름은 지정할 수 있지만 테이블 이름은 지정할 수 없습니다.
관련 권장 사항:
Excel을 내보내는 다섯 가지 JS 방법
Excel에서 HTML 콘텐츠 파일을 내보내는 PHP 방법
php 기본 방법을 사용하여 Excel 인스턴스 공유 내보내기
위 내용은 Anglejs에서 Excel 인스턴스 공유를 내보내는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
