在vue项目中实现将数据导入Excel 三种方式(.xlsx , .csv)

最新推荐文章于 2024-07-02 00:00:00 发布

小鸟__老鹰

最新推荐文章于 2024-07-02 00:00:00 发布

阅读量2.2w

点赞数 8

本文链接：https://blog.csdn.net/weixin_44781409/article/details/89968900

版权

方法一
Vue 将页面中表格数据导出excel
一、需要安装三个依赖：

  npm install -S file-saver xlsx
  
  npm install -D script-loader

二、项目中新建一个文件夹：（vendor—名字任取）

里面放置两个文件Blob.js和 Export2Excel.js。
　　
链接：https://pan.baidu.com/s/1krRDSw6PHylWlg5yslwZGA 密码：qotw

下载后直接将文件夹放到src目录下即可。

三、在.vue文件中
　　在methods里写这两个方法：其中list是表格的内容

 // 导出表格
export2Excel() {
    require.ensure([], () => {
          let { exportJsonToExcel } = require('../../vendor/Export2Excel');
           // 表头
          let tHeader = ['序号', 'IMSI', 'MSISDN', '证件号码'];
          //表头对应字段名，要和下面数据key对应
          let filterVal = ['iAutoID', 'Address', 'AuctionDate', 'Area'];
          // 数据来源
          // let list = this.serachData;
          //模拟数据
           let list =  [
           {iAutoID: "4737", Address: "海门市海门镇南海路南、长江路东侧", AuctionDate: "0000-00-00", Area: ""},
           {iAutoID: "21337", Address: "上海市浦东新区东至:A13B-01地块,南至:A13B-01地块,西至:国展路,北至:A13B-01地块",Area: ""},