前端导出表格

最新推荐文章于 2024-01-06 11:30:16 发布

跳跳的小古风

最新推荐文章于 2024-01-06 11:30:16 发布

阅读量119

点赞数

本文链接：https://blog.csdn.net/weixin_43787651/article/details/118357879

版权

这里写自定义目录标题

1.安装 file-saver 和 xlsx
yarn add xlsx file-saver -S

2.引入
import FileSaver from “file-saver”;
import XLSX from “xlsx”;

3.为表格绑定一个id


<el-table
      id="table"
      :data="tableData"
      style="width: 100%">
      <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>

按钮绑定事件

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


            },