溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
公司一個新的需求導出Exce表格，研究了一下，最后終于實現，分享給大家。
1 使用FileSaver
第一次采用FileSaver.js 由于剛開始導致導出一片空白，還只能抓取網頁里面的表格地址：https://github.com/eligrey/FileSaver.js
HTML
<div id="exportable">
<table width="100%">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>dsds@163.com</td>
</tr>
</tbody>
</table>
</div>
js部分
var blob = new Blob([document.getElementById('exportable').innerHTML], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
});
saveAs(blob, "日記賬.xls");
};
2 使用 alasql
使用alasql的好處就是可以在數據層面去組織結構
官網地址:http://alasql.org/
js部分
\\ angular 需要導入xlsx.core.min.js alasql.min.js
\\ 文件結構
var arr = [
{
'收入':1,
'支出':2,
'結存':3
},
{
'收入':4,
'支出':5,
'結存':6
}
]
\\ 生成 excel 文件
alasql('SELECT * INTO XLSX("日記賬.xlsx",{headers:true}) FROM ?',[arr]);
我優化的版本
// 導出excel
$scope.exportToExcel=function(){
var data = angular.copy($scope.pageData.list)
var arr = [];
var type = null;
var amountIN = 0;
var amountOUT = 0;
angular.forEach(data,function (item) {
// 兌付情況
if(item.isHappened){
type = '未兌付'
}else{
type = '已兌付'
}
// 收入
if(item.itemModel=='INCOME'){
amountIN = item.amount
}
// 支出
if(item.itemModel=='OUTCOME'){
amountOUT = item.amount
}
arr.push({
'兌付情況':type,
'合同':item.keyId,
'收付日期':$filter('date')(item.updateTime,'yyyy-MM-dd'),
'科目':item.itemType.value,
'收入':$filter('number')(amountIN,2),
'支出':$filter('number')(amountOUT,2),
'結存':$filter('number')(item.balance,2)
})
})
if(arr.length < 1){
ToasterTool.error('暫無數據，導出失敗！');
}else{
// alasql('SELECT * INTO XLSX("日記賬.xlsx",{headers:true}) FROM ?',[arr]);
alasql.promise('SELECT * INTO XLSX("日記賬-'+ DateTool.format(new Date(),'yyyy-MM-dd HH:mm:ss') + "-"+ $scope.loginUser.userName +'.xlsx",{headers:true}) FROM ?',[arr])
.then(function (data) {
if(data == 1){
$timeout(function(){
ToasterTool.success('數據導出成功！')
})
}
})
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
