JS實現下載xlsx格式檔案--js-xlsx
阿新 • • 發佈：2019-02-14
之前寫過關於JS上傳xlsx檔案，這回是關於下載的。用的技術還是js-xlsx，blob。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="downloadExl(jsono)">匯出</button>
<!--
以下a標籤不需要內容
-->
<a href="" download="這裡是下載的檔名.xlsx" id="hf"></a>
<script type="text/javascript" src="js/jszip.js"></script>
<script type="text/javascript" src="js/xlsx.js"></script>
<script>
var jsono = [{ //測試資料
"保質期臨期預警(天)": "保質期臨期預警(天)",
"商品標題": "商品標題",
"建議零售價": "建議零售價",
"高(cm)": "高(cm)",
"商品描述": "商品描述",
"保質期禁售(天)": "保質期禁售(天)",
"商品名稱": "商品名稱",
"商品簡介": "商品簡介",
"寬(cm)": "寬(cm)",
"阿達": "阿達",
"貨號": "貨號",
"商品條碼": "商品條碼",
"商品品牌": "商品品牌",
"淨容積(cm^3)": "淨容積(cm^3)",
"是否保質期管理": "是否保質期管理",
"是否串號管理": "是否串號管理",
"商品顏色": "商品顏色",
"尺碼": "尺碼",
"是否批次管理": "是否批次管理",
"商品編號": "商品編號",
"商品簡稱": "商品簡稱",
"毛重(g)": "毛重(g)",
"長(cm)": "長(cm)",
"英文名稱": "英文名稱",
"淨重(g)": "淨重(g)",
"商品分類": "商品分類",
"這裡超過了": "這裡超過了",
"保質期(天)": "保質期(天)"
}, {
"保質期臨期預警(天)": "adventLifecycle",
"商品標題": "title",
"建議零售價": "defaultPrice",
"高(cm)": "height",
"商品描述": "Description",
"保質期禁售(天)": "lockupLifecycle",
"商品名稱": "skuName",
"商品簡介": "brief",
"寬(cm)": "width",
"阿達": "asdz",
"貨號": "goodsNo",
"商品條碼": "skuNo",
"商品品牌": "brand",
"淨容積(cm^3)": "netVolume",
"是否保質期管理": "isShelfLifeMgmt",
"是否串號管理": "isSNMgmt",
"商品顏色": "color",
"尺碼": "size",
"是否批次管理": "isBatchMgmt",
"商品編號": "skuCode",
"商品簡稱": "shortName",
"毛重(g)": "grossWeight",
"長(cm)": "length",
"英文名稱": "englishName",
"淨重(g)": "netWeight",
"商品分類": "categoryId",
"這裡超過了": 1111.0,
"保質期(天)": "expDate"
}];
function downloadExl(json, type) {
var tmpDown; //匯出的二進位制物件
var keyMap = []; //獲取鍵
for(k in json[0]) {
keyMap.push(k);
}
var tmpdata = []; //用來儲存轉換好的json
json.map((v, i) => keyMap.map((k, j) => Object.assign({}, { //運用ES6內容
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
});
// json.map(function(v, i) { //運用ES5內容
// return keyMap.map(function(k, j) {
// return Object.assign({}, {
// v: v[k],
// position: (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)
// });
// });
// }).reduce(function(prev, next) {
// return prev.concat(next);
// }).forEach(function(v, i) {
// tmpdata[v.position] = {
// v: v.v
// }
// });
var outputPos = Object.keys(tmpdata); //設定區域,比如表格從A1到D10
var tmpWB = {
SheetNames: ['mySheet'], //儲存的表標題
Sheets: {
'mySheet': Object.assign({},
tmpdata, //內容
{
'!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] //設定填充區域
})
}
};
tmpDown = new Blob([s2ab(XLSX.write(tmpWB, {
bookType: (type == undefined ? 'xlsx' : type),
bookSST: false,
type: 'binary'
} //這裡的資料是用來定義匯出的格式型別
))], {
type: ""
}); //建立二進位制物件寫入轉換好的位元組流
var href = URL.createObjectURL(tmpDown); //建立物件超連結
document.getElementById("hf").href = href; //繫結a標籤
document.getElementById("hf").click(); //模擬點選實現下載
setTimeout(function() { //延時釋放
URL.revokeObjectURL(tmpDown); //用URL.revokeObjectURL()來釋放這個object URL
}, 100);
}
function s2ab(s) { //字串轉字元流
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;
}
// 將指定的自然數轉換為26進製表示。對映關係：[0-25] -> [A-Z]。
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
}
</script>
</body>
</html>