[Vue.js教學筆記]XLSX套入Webpack模組整合工具 @ Michael_Jheng的部落格

此篇將先使用Element UI設計出Table 表格,再使用xlax-npm此工具將表格已xlsx匯出,Element UI套用至Webpack模組整合工具可參考以下文章

以及官方網站

雖然Element UI已經更新到2.0.10版,但安裝與使用方式依舊沒有太大變化,反而新增許多好用的工具

按照[Vue.js教學筆記]好用的前端設定套件-Element UI此篇文章把Element UI套用完成後,至Element UI官方網站中的找尋組件->Table 表格此Element UI工具,如下所示,

此篇是選用Table 表格中的帶邊框表格來做示範,將範例程式複製到建立好的Webpack專案裡,如下所示,

export default {
data () {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區金沙江路 1516 弄'
}]
}
}
}

完成後執行"npm run dev",即可出現表單呈現結果,如下所示,

表單完成後就要來進行xlax-npm工具講解,首先要安裝xlax-npm與file-saver這兩個工具,安裝指令分別為

npm install xlsx --save

npm install file-saver --save

關於這兩個npm工具相關資訊可至下列網址前去了解

xlsx資料網站

file-saver資料網站

安裝完成後就將這兩工具import專案裡,如下所示,

import xlsx from 'xlsx'
import fileSaver from 'file-saver'

接下來要撰寫將表單已.xlsx匯出的程式,首先在表單增加id="tableId"

增加.xlsx匯出按鈕鍵,如下所示,

在<script></script>中增加methods,在methods裡增加.xlsx程式,如下所示,

全部完整程式,如下所示,

<template>
<section>
<el-table
id="tableId"
:data="tableData"
border
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
<el-button type="primary" @click="download()">Excel匯出</el-button>
</section>
</template>

let wopts = {
bookType: 'xlsx',
bookSST: false,
type: 'binary'
};

let wbout = xlsx.write(wb, wopts);

fileSaver.saveAs(new Blob([this.s2ab(wbout)], {
type: "application/octet-stream;charset=utf-8"
}), "test.xlsx");
},
s2ab(s) {
if (typeof ArrayBuffer !== 'undefind') {
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>