<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <button id="export">Export Sheet to XLSX</button> -->
<button onclick="downloadExl(jsono)">導出xlsx帶樣式</button>
<button id="export2">導出xlsx</button>
<!-- 使用js-xlsx將後端返回數據導出爲excel(.xlsx格式) -->
<!-- 引入的js只能和下面相連的結合使用 使用時請註釋掉138行以下-->
<script src="js/xlsx.core.min.js"></script>
<script>
document.getElementById("export2").onclick = function() {
// 導出多張表
// let data = { '基本信息': [{name: '李四', sex: 'nan', age: 12}], '成績': [{class: '計算機', teacher: 'Mrs wang', score: 90}] };
// let columnHeaders = { '基本信息': ['name', 'sex', 'age'], '成績': ['class', 'teacher', 'score']}
// outputXlsxFile(
// data,
// [{ wch: 50 }, { wch: 50 }, { wch: 10 }],
// "test-xlsx"
// );
// function outputXlsxFile(data, wscols, xlsxName) {
// let sheetNames = [];
// let sheetsList = {};
// const wb = XLSX.utils.book_new();
// console.log(wb)
// for (let key in data) {
// sheetNames.push(key);
// let columnHeader = columnHeaders[key] // 此處是每個sheet的表頭
// let temp = transferData(data[key], columnHeader);
// console.log(temp)
// sheetsList[key] = XLSX.utils.aoa_to_sheet(temp);
// sheetsList[key]["!cols"] = wscols;
// }
// console.log(sheetsList)
// wb["SheetNames"] = sheetNames;
// wb["Sheets"] = sheetsList;
// XLSX.writeFile(wb, xlsxName + ".xlsx");
// }
// function transferData(data, columnHeader) {
// let content = [];
// content.push(columnHeader);
// data.forEach((item, index) => {
// let arr = [];
// columnHeader.map(column =>{
// arr.push(item[column]);
// })
// content.push(arr);
// });
// return content;
// }
// // 導出一張表
var sheetN = '我是表名字，不是導出文件名'
var data = [{name: '後臺返回數據11', sex: 'women', age: 56},{name: '後臺返回數據2', sex: 'nan', age: 12}]
var columnHeaders = ['name', 'sex', 'age']
outputXlsxFile(
data, // 數據
[{ wch: 50 }, { wch: 50 }, { wch: 10 }], // 列寬
"test-xlsx" // 導出文件名
);
function outputXlsxFile(data, wscols, xlsxName) {
let sheetsList = {};
console.log(XLSX.utils)
const wb = XLSX.utils.book_new();
let temp = transferData(data, columnHeaders);
temp.unshift(['我是表格上面的標題啊標題,不是表頭不是表頭'])
console.log(temp)
sheetsList[sheetN] = XLSX.utils.aoa_to_sheet(temp);
console.log(XLSX.utils.aoa_to_sheet(temp))
sheetsList[sheetN]["!merges"] = [{ //合併第一行數據，也就是表頭[B1,C1,D1,E1]
s: {//s爲開始
c: 0,//開始列
r: 0//開始取值範圍
},
e: {//e結束
c: 4,//結束列
r: 0//結束範圍
}
}];
sheetsList[sheetN]["!cols"] = wscols;
sheetsList[sheetN]["!rows"] = [{ hpx: 50 }];
// console.log(sheetsList)
// 官網寫入樣式api，但是引入xlsx.core.min.js沒用
// sheetsList[sheetN]['A1'].s = { font: { sz: 14, bold: true, color: { rgb: "FFFFAA00" } }, fill: { bgColor: { indexed: 64 }, fgColor: { rgb: "FFFF00" } } }
wb["SheetNames"] = [sheetN];
wb["Sheets"] = sheetsList;
console.log(wb)
XLSX.writeFile(wb, xlsxName + ".xlsx",{defaultCellStyle: { font: {name: 'Arial', sz: '40'}}});
console.log(XLSX.utils)
function transferData(data, columnHeader) {
let content = [];
content.push(columnHeader);
data.forEach((item, index) => {
let arr = [];
columnHeader.map(column =>{
arr.push(item[column]);
})
content.push(arr);
});
return content;
}
}
}
</script>
<!-- 導出帶樣式 引入的js只能和下面相連的結合使用，註釋掉135行以上-->
<!-- <script src="js/xlsx.full.min.js"></script> -->
<script>
function saveAs(obj, fileName) {
var tmpa = document.createElement("a");
tmpa.download = fileName || "下載";
tmpa.href = URL.createObjectURL(obj);
tmpa.click();
setTimeout(function () {
URL.revokeObjectURL(obj);
}, 100);
}
var jsono = [{
"id": 1, "合併的列頭1": "數據11", "合併的列頭2": "數據12", "合併的列頭3": "數據13", "合併的列頭4": "數據14",
}, {
"id": 2, "合併的列頭1": "數據21", "合併的列頭2": "數據22", "合併的列頭3": "數據23", "合併的列頭4": "數據24",
}];
const wopts = { bookType: 'xlsx', bookSST: true, type: 'binary', cellStyles: true };
function downloadExl(json, type) {
var tmpdata = json[0];
json.unshift({});
var keyMap = []; //獲取keys
for (var k in tmpdata) {
keyMap.push(k);
json[0][k] = k;
}
var tmpdata = [];//用來保存轉換好的json
json.map((v, i) => keyMap.map((k, j) => Object.assign({}, {
v: v[k],
position: (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)
}))).reduce((prev, next) => prev.concat(next)).forEach((v, i) => tmpdata[v.position] = {
v: v.v
});
var outputPos = Object.keys(tmpdata); //設置區域,比如表格從A1到D10
console.log(tmpdata)
tmpdata["B1"].s = { font: { sz: 14, bold: true, color: { rgb: "FFFFAA00" } }, fill: { bgColor: { indexed: 64 }, fgColor: { rgb: "FFFF00" } } };//<====設置xlsx單元格樣式
tmpdata["!merges"] = [{
s: { c: 1, r: 0 },
e: { c: 4, r: 0 }
}];//<====合併單元格
var tmpWB = {
SheetNames: ['mySheet'], //保存的表標題
Sheets: {
'mySheet': Object.assign({},
tmpdata, //內容
{
'!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] //設置填充區域
})
}
};
console.log(XLSX.utils)
tmpDown = new Blob([s2ab(XLSX.write(tmpWB,
{ bookType: (type == undefined ? 'xlsx' : type), bookSST: false, type: 'binary' }//這裏的數據是用來定義導出的格式類型
))], {
type: ""
});
saveAs(tmpDown, "這裏是下載的文件名" + '.' + (wopts.bookType == "biff2" ? "xls" : wopts.bookType));
}
function getCharCol(n) {
let temCol = '',
s = '',
m = 0
while (n > 0) {
m = n % 26 + 1
s = String.fromCharCode(m + 64) + s
n = (n - m) / 26
}
return s
}
function s2ab(s) {
if (typeof ArrayBuffer !== 'undefined') {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
} else {
var buf = new Array(s.length);
for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
}
</script>
<!-- <script>
var ViewModel = function() {
/* use an array of arrays */
this.aoa = ko.observableArray([
[1,2],
[3,4]
]);
};
// var UserInfos = [
// { id: 1, name: "張三", age: "21", aclass: "1801" },
// { id: 2, name: "李四", age: "22", aclass: "1802" },
// { id: 3, name: "王五", age: "23", aclass: "1803" }
// ];
// var ViewModel = {};
// ViewModel = function ()
// {
// this.aoa = ko.observableArray(UserInfos);
// }
// ko.applyBindings(ViewModel);
var model = new ViewModel();
ko.applyBindings(model);
/* do an update to confirm KO was loaded properly */
// model.aoa([[1,2,3],[4,5,6]]);
// model.aoa.push([7,8,9]);
// model.aoa([[1,2,3],[4,5,6]]);
document.getElementById("export").onclick = function() {
var aoa = [
['姓名', '性別', '年齡', '註冊時間'],
['張三', null, null, new Date()],
['李四', '女', 22, new Date()]
];
var sheet = XLSX.utils.aoa_to_sheet(aoa);
console.log(sheet)
// openDownloadDialog(sheet2blob(sheet), '導出.xlsx');
/* get array of arrays */
var data = model.aoa();
/* convert to worksheet */
var ws = XLSX.utils.aoa_to_sheet(aoa);
/* build new workbook */
var wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
/* write file */
XLSX.writeFile(wb, "knockout.xlsx")
};
</script> -->
</body>
</html>
使用js-xlsx將後端返回數據導出爲excel(.xlsx格式)
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章