前端页面单独导出表格里面的数据，格式为xlsx

• 第一步： 安装 file-saver 和 xlsx

代码语言：javascript复制

  cnpm i file-saver xlsx -s

• 第二步： 在要用的组件用中引入

代码语言：javascript复制

    import FileSaver from 'file-saver'
    import XLSX from 'xlsx'

代码语言：javascript复制

// 为表格绑定一个id， 特别注意
<el-table
      id="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>

• 第三步：书写方法

代码语言：javascript复制

        getcsv() {
                let wb = XLSX.utils.table_to_book(document.querySelector('#table'));
                /* #table 就是表格的id */
                let 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


            },
//  为按钮绑定这个事件就可以了

file xlsx

0 人点赞