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

最新推荐文章于 2025-06-21 14:57:31 发布

小鸟__老鹰

最新推荐文章于 2025-06-21 14:57:31 发布

阅读量2.2w

点赞数 8

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44781409/article/details/89968900

本文介绍了在Vue项目中导出Excel的三种方法：使用依赖库实现表格数据导出，拼接HTML生成伪Excel，以及遍历JSON生成CSV文件。详细步骤包括安装依赖、引入自定义文件以及在Vue组件中调用导出方法。

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

方法一
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", A