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

方法一
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: ""},
           {iAutoID: "17373", Address: "白马大道以东、建业路以北", AuctionDate: "0000-00-00", Area: ""},
            {iAutoID: "17271", Address: "黄陂区横店街川龙大道以东、横中路以北", AuctionDate: "0000-00-00", Area: "黄陂"},
            {iAutoID: "20577", Address: "南通市海门四甲镇东渐大道北侧、军工路南侧", AuctionDate: "0000-00-00", Area: ""},
            {iAutoID: "18929", Address: "奥诺斯特以东、黄河路以南", AuctionDate: "2018-09-21", Area: ""}]
               let data = this.formatJson(filterVal, list); //数据格式化
               var index1 = '资源列表';//导出时文件名
               exportJsonToExcel(tHeader, data, index1); //导出文件
              })
            },
            // 数据格式化
            formatJson(filterVal, jsonData){
                return jsonData.map(v => filterVal.map(j => v[j]))
            },

四、添加按钮导出调用export2Excel方法

导出数据

方法二
将table标签，包括tr、td等对json数据进行拼接，将table输出到表格上实现，这种方法的弊端在于输出的是伪excel，虽说生成xls为后缀的文件，但文件形式上还是html，代码如下

方法三
通过将json遍历进行字符串拼接，将字符串输出到csv文件，代码如下