Vue+element 实现文件导出xlsx格式

傻瓜教程:

  第一步:安装两个依赖包

      npm install --save xlsx file-saver

  第二步:建立一个Vue文件,导入以下代码即可

 1 <template>
 2   <div>
 3       <el-table :data="tableData" style="width: 100%" id="aa">
 4       <el-table-column prop="date"  label="日期" width="180"> </el-table-column>
 5       <el-table-column prop="name" label="姓名" width="180"></el-table-column>
 6       <el-table-column prop="address" label="地址"></el-table-column>
 7     </el-table>
 8     <el-button @click="exportExcel">导出</el-button>
 9   </div>
10 </template>
11 
12 <script>
13   import FileSaver from 'file-saver'
14   import XLSX from 'xlsx'
15   export default {
16       data() {
17         return {
18           tableData: [{
19             date: '2016-05-02',
20             name: '王小虎',
21             address: '上海市普陀区金沙江路 1518 弄'
22           }, {
23             date: '2016-05-04',
24             name: '王小虎',
25             address: '上海市普陀区金沙江路 1517 弄'
26           }, {
27             date: '2016-05-01',
28             name: '王小虎',
29             address: '上海市普陀区金沙江路 1519 弄'
30           }, {
31             date: '2016-05-03',
32             name: '王小虎',
33             address: '上海市普陀区金沙江路 1516 弄'
34           }]
35         }
36       },
37         methods: {
38           exportExcel () {
39             alert("fdajsfguia")
40               /* generate workbook object from table */
41               var wb = XLSX.utils.table_to_book(document.querySelector('#aa'))
42               /* get binary string as output */
43               var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
44               try {
45                 FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'love you.xlsx')
46               } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
47               return wbout
48               }
49         }
50 }
51 </script>

第三步:更改自己的XLSX.uitls.table_to_book( 放入的是table 的DOM 节点 ) ,也就是在你的table标签处添加一个ID选择器love you.xlsx即为导出表格的名字,可修改!

第四步:如有不懂可以讨论:qq 1059332883

猜你喜欢

转载自www.cnblogs.com/baibin-520/p/10382585.html