2021-9-13 前端達人
-
npm install file-saver
-
npm install xlsx
-
// vue中導出excel表格模板
-
import FileSaver from 'file-saver'
-
import XLSX from 'xlsx'
-
-
Vue.prototype.$FileSaver = FileSaver; //設置全局
-
Vue.prototype.$XLSX = XLSX; //設置全局
-
<template>
-
<div class="daochu">
-
<el-button @click="o" type="success" round>導出</el-button>
-
<el-table
-
id="ou"
-
:data="tableData"
-
style="width: 100%"
-
:default-sort="{ prop: 'date', order: 'descending' }"
-
>
-
<el-table-column prop="date" label="日期" sortable width="180">
-
</el-table-column>
-
<el-table-column prop="name" label="姓名" sortable width="180">
-
</el-table-column>
-
<el-table-column prop="address" label="地址" :formatter="formatter">
-
</el-table-column>
-
</el-table>
-
-
</div>
-
</template>
-
<script>
-
export default {
-
data() {
-
return {
-
tableData: [
-
{
-
date: "2016-05-02",
-
name: "王小虎",
-
address: "上海市普陀區金沙江路 1518 弄",
-
},
-
{
-
date: "2016-05-04",
-
name: "王小虎",
-
address: "上海市普陀區金沙江路 1517 弄",
-
}
-
],
-
};
-
},
-
methods:{
-
o() {
-
let tables = document.getElementById("ou");
-
let table_book = this.$XLSX.utils.table_to_book(tables);
-
var table_write = this.$XLSX.write(table_book, {
-
bookType: "xlsx",
-
bookSST: true,
-
type: "array",
-
});
-
try {
-
this.$FileSaver.saveAs(
-
new Blob([table_write], { type: "application/octet-stream" }),
-
"sheetjs.xlsx"
-
);
-
} catch (e) {
-
if (typeof console !== "undefined") console.log(e, table_write);
-
}
-
return table_write;
-
},
-
}
-
}
-
</script>
可以看到已經導出
實際工作中導出按鈕單獨抽離出去做到可以復用才是比較合理的
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
轉自：csdn
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn