問題描述
使用vue-element-admin開發過程中需要將el-table中的數據導出為excel
問題解決
- 安裝庫
npm i file-saver xlsx -S
- 引入庫
import FileSaver from 'file-saver'
// full import
import * as XLSX from 'xlsx';
// named imports
import { write, utils } from 'xlsx';
- vue文件
<el-button type="primary" @click="handleDownload('demo')">下載excel</el-button>
<el-table id="excel_table" :data="tableData">
<el-table-column label="序號" type="index"></el-table-column>
<el-table-column label="ID" prop="id"></el-table-column>
<el-table-column label="規則" prop="rule"></el-table-column>
<el-table-column label="類型" prop="type"></el-table-column>
<el-table-column label="狀態" prop="status"></el-table-column>
<el-table-column label="權重" prop="priority"></el-table-column>
<el-table-column label="描述" prop="description"></el-table-column>
</el-table>
- 導出方法
handleDownload(name) {
let table = document.getElementById("excel_table")
let et = utils.table_to_book(table)
let output = write(et, {
bookType: "xlsx",
bookSST: true,
type: "array"
})
try {
FileSaver.saveAs(new Blob([output], { type: "application/octet-stream" }), `${name}.xlsx`)
} catch (e) {}
return output
}