table导出成excel表格

最新推荐文章于 2023-04-27 15:04:13 发布

原创最新推荐文章于 2023-04-27 15:04:13 发布 · 428 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何将数据导出为Excel表格，包括需要安装的三个依赖，创建存放文件的vendor目录，以及处理点击事件来触发导出的函数。解决Webpack解析错误的方法也被提及。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

`table`导出成`excel`表格

1.需要安装三个依赖

npm install file-saver xlsx --save
npm install script-loader --dev

2.在项目的src目录下新建一个文件夹（vendor–名字任意取），在里面放置两个文件Blog.js和Export2Excel.js
下载导出这两个文件的链接
密码：f3ys
3.绑定点击的事件，写相应的函数@click=handleDownload

    handleDownload(){
    // 引入将table导出为excel表格的模板js
    import('@/vendor/Expor2Excel').then(excel => {
    // 表格的头部标题
    const tHeader = ['name','data','age'];
    // 想要导出excel表格对应数据的字段名
    const filterVal = ['name','data'];
    // 这个table的数据源
    const list = this.tableData;
    // table数据源过滤出要导出的excel数据
    cosnt data = this.formatJson(filterVal,list);
    // 将表格导出为excel的语法
    // params参数：tHeader:导出excel表格的头部信息、data:要导出成excel表格的数据、第三个参数为导出excel表格的名字
    excel.export_json_to_excel(tHeader,data,'导出excel文件的名字')
    })
    }
    // 过滤出要导出excel的数据
    formatJson(filterVal,jsonData){
    // v:为table数据中的每一行的数据对象，j:为要导出excel对应的每个字段名；在每一个对象里面，找出过滤的字段名相应的属性值，将其组成数组返回
        return jsonData.map(v => filterVal.map(j => v[j]))
    }
    **例如**：list=[{name:'xiaoming',data:2017.8.8,age:18},{name:'jom',data:2008.8.8,age:16}]
    filterVal=['name','age'];
    this.formatJson(filterVal,list);
    得到的结果为:[['xiaoming',18],[jom,16]]   // 将此结果导出到excel表格中

注意：如果webpack报解析错误：找不到Blog.js模块。解决方法如下：在build文件夹下找到webpack.base.conf.js中的resolve的alias加入'vendor':path.resolve(__dirname,'../src/vendor')