json格式數據轉Excel導出的兩種方法
第一種table格式數據直接轉Excel:
但是用這種方式會出現一種問題,就是當你的table有分頁的情況下,只能抓取當前分頁的數據。
拿到表格的id就可以抓取表格的數據,導出到excel,這種方式簡單粗暴,引入這兩個插件即可。
第一種方法問題奧特曼變身:將json數據轉為table數據再進行Excel導出,
使用起來也比較簡單,拿到數據直接往里面塞就是了,最后調用方法。這樣的話最終所有數據都出來了。
function JSONToExcelConvertor(JSONData, FileName, ShowLabel) {
var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
var excel = '<table>';
//設置表頭
var row = "<tr>";
for (var i = 0, l = ShowLabel.length; i < l; i++) {
row += "<td>" + ShowLabel[i].value + '</td>';
}
//換行
excel += row + "</tr>";
//設置數據
for (var i = 0; i < arrData.length; i++) {
var row = "<tr>";
for(var j=0;j<arrData[i].length;j++){
var value = arrData[i][j].value === "." ? "" : arrData[i][j].value;
row += '<td>' + value + '</td>';
}
excel += row + "</tr>";
}
excel += "</table>";
var excelFile = "<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'>";
excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';
excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel';
excelFile += '; charset=UTF-8">';
excelFile += "<head>";
excelFile += "<!--[if gte mso 9]>";
excelFile += "<xml>";
excelFile += "<x:ExcelWorkbook>";
excelFile += "<x:ExcelWorksheets>";
excelFile += "<x:ExcelWorksheet>";
excelFile += "<x:Name>";
excelFile += "{worksheet}";
excelFile += "</x:Name>";
excelFile += "<x:WorksheetOptions>";
excelFile += "<x:DisplayGridlines/>";
excelFile += "</x:WorksheetOptions>";
excelFile += "</x:ExcelWorksheet>";
excelFile += "</x:ExcelWorksheets>";
excelFile += "</x:ExcelWorkbook>";
excelFile += "</xml>";
excelFile += "<![endif]-->";
excelFile += "</head>";
excelFile += "<body>";
excelFile += excel;
excelFile += "</body>";
excelFile += "</html>";
var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile);
var link = document.createElement("a");
link.href = uri;
link.style = "visibility:hidden";
link.download = FileName + ".xls";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
var JSON_DATA = {
"title":[
{"value":"司機", "type":"ROW_HEADER_HEADER", "datatype":"string"},
{"value":"日期", "type":"ROW_HEADER_HEADER", "datatype":"string"},
{"value":"物流單數量", "type":"ROW_HEADER_HEADER", "datatype":"string"},
{"value":"退貨單數量", "type":"ROW_HEADER_HEADER", "datatype":"string"},
{"value":"發貨總件數", "type":"ROW_HEADER_HEADER", "datatype":"string"},
{"value":"退貨總件數", "type":"ROW_HEADER_HEADER", "datatype":"string"},
{"value":"拒收總件數", "type":"ROW_HEADER_HEADER", "datatype":"string"},
{"value":"取消發貨總件數", "type":"ROW_HEADER_HEADER", "datatype":"string"},
{"value":"物流費總金額 ", "type":"ROW_HEADER_HEADER", "datatype":"string"},
{"value":"代收手續費總金額", "type":"ROW_HEADER_HEADER", "datatype":"string"},
{"value":"代收貨款總金額", "type":"ROW_HEADER_HEADER", "datatype":"string"}
],
"data":[
]
};
第二種方法使用插件直接對json數據進行轉換 插件 JsonExportExcel.min.js
1.引入js (dist目錄下JsonExportExcel.min.js)
<script src="https://cuikangjie.github.io/JsonExportExcel/dist/JsonExportExcel.min.js"></script>
npm install -save js-export-excel const ExportJsonExcel = require('js-export-excel')
2.js代碼
1 var option={}; 2 3 option.fileName = 'excel' 4 option.datas=[ 5 { 6 //第一個sheet 7 sheetData:[{one:'一行一列',two:'一行二列'},{one:'二行一列',two:'二行二列'}], 8 sheetName:'sheet', 9 sheetFilter:['two','one'], 10 sheetHeader:['第一列','第二列'] 11 }, 12 { 13 //第二個sheet 14 sheetData:[{one:'一行一列',two:'一行二列'},{one:'二行一列',two:'二行二列'}] 15 } 16 ]; 17 var toExcel=new ExportJsonExcel(option); 18 toExcel.saveExcel();
option
datas 數據
/*多個sheet*/ /*每個sheet為一個object */ [{ sheetData:[], // 數據 sheetName:'', // sheet名字 sheetFilter:[], //列過濾 sheetHeader:[] // 第一行 }]
fileName 下載文件名(默認:download)
sheet option
sheetName sheet名字(可有可無)(默認sheet1)
sheetHeader 標題(excel第一行數據)
sheetData 數據源(必須)
sheetFilter 列過濾(只有在data為object下起作用)(可有可無)