vue+element 表格导出为Excel文件

雨点打透心脏的1/2处 2023-10-09 11:59 60阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70][]

### **安装这三个依赖** ###

npm install xlsx file-saver -S

npm install script-loader -S -D

### 组件代码 ###

<template>
        <div>
           <el-button type="primary" @click="exportExcel">导出文件</el-button>
    
           <el-table
          :data="tableData"
          style="width: 100%"
          id='out-table'
          >
          <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>
        </div>
    </template>
    
    
    <script>
    //引入安装的依赖
    import FileSaver from 'file-saver'
    import XLSX from 'xlsx'
    export default {
      name: 'demo5',
       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 弄'
              }]
            }
          },
      methods:{
          // XLSX.uitls.table_to_book( 放入的是table 的DOM 节点 ) ，sheetjs.xlsx 即为导出表格的名字，可修改！
          exportExcel () {
             var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
             var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
             try {
                 FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
             } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
             return wbout
         },
      }
    }
    </script>
    
    <style scoped>
    .el-table{
        margin-top:30px;
    }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190925152334976.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ==,size_16,color_FFFFFF,t_70