vue項目 element-ui table表格下載

<!--按裝依賴-->
npm install --save xlsx file-saver
<!--html-->

<div id="exportTab">

　　<el-table :data="tableData" 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>

<button @click="exportExcel">下載</button>

</div>
<!--引入依賴-->

import FileSaver from 'file-saver'

import XLSX from 'xlsx'
<!--js-->
1、data數據

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 弄',

　　},

],

}

},
2、methods函數

methods: {

　　exportExcel() {

　　　　var xlsxParam = { raw: true } // 導出的內容只做解析，不進行格式轉換

　　　　var wb = XLSX.utils.table_to_book(

　　　　　　document.querySelector('#exportTab'),

　　　　　　xlsxParam

　　　　)

　　　　var wbout = XLSX.write(wb, {

　　　　　　bookType: 'xlsx',

　　　　　　bookSST: true,

　　　　　　type: 'array',

　　　　})

　　　　try {

　　　　　　FileSaver.saveAs(

　　　　　　　　new Blob([wbout], { type: 'application/octet-stream' }),

　　　　　　　　'審核情況表.xlsx'

　　　　　　)

　　　　} catch (e) {

　　　　if (typeof console !== 'undefined') {

　　　　　　console.log(e, wbout)

　　　　}

}

return wbout

},

},
注： 本效果只能到處當前頁面展示的數據