vue项目中：PC端导出csv或excel数据表方法及其移动端导出表格方法

本文链接：https://blog.csdn.net/zhangkegu/article/details/104674943

需求是在前端导出人员明细表，后端只给提供json格式的数据，函数方法如下:

一：第一种方法：（不可移动端导出）

// 导出明细csv格式（纯前端导出）
    getExport() {
      // this.getDetailList();
      if (this.startTime && this.endTime) {
        exportAccessList({
          residenceId: this.residenceId,
          startTime: this.startTime,
          endTime: this.endTime
        })
          .then(res => {
            console.log(res.data, "请求json导出数据");
            let jsonData = res.data.map((val, index, arr) => {
              // 改造数据格式
              let json = {};
              json.index = index + 1;
              json.userName = val.userName; //姓名
              json.phone = val.phone; //联系方式
              json.doorNum = val.doorNum; //门牌号
              json.createTime = val.createTime; //时间
              json.idNumber = val.idNumber; //出入人身份证
              json.accessType = val.accessType; //出入方式
              json.carNum = val.carNum; //车牌号
              json.temperature = val.temperature; //体温
              json.reason = val.reason; //事由
              json.destination = val.destination; //目的地
              return json;
            });
            console.log(jsonData, "改造数据"); //列标题，逗号隔开，每一个逗号就是隔开一个单元格
            let str = `序号,出入人姓名,出入人联系方式,房屋门牌号,登记时间,出入人身份证号,出入方式,车牌号,体温,事由,目的地\n`;
            // 增加\t为了不让表格显示科学计数法或者其他格式
            for (let i = 0; i < jsonData.length; i++) {
              for (let item in jsonData[i]) {
                str += `${jsonData[i][item] + "\t"},`;
              }
              str += "\n";
            }
            //encodeURIComponent解决中文乱码
            let uri =
              "data:text/csv;charset=utf-8,\ufeff" + encodeURIComponent(str);
            //通过创建a标签实现
            let link = document.createElement("a");
            link.href = uri;
            //对下载的文件命名
            link.download = "进出明细表.csv";
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
          })
          .catch(error => {
            console.log(error);
          });
      } else {
        Toast("请选择查询时间");
      }
    }

二：第二种方法： (不可移动端导出）

此方法需要安装依赖包：

1.安装依赖

1 //npm 
2 npm install file-saver -S 
3 npm install xlsx -S
4 npm install -D script-loader

2.Blob.js和Export2Excel.js 在src目录下新建vendor文件夹，里面放入Blob.js和Export2Excel.js两个JS文件。目录大概是这样的：

3.在main.js中引入两个包

import Blob from './vendor/Blob'
import Export2Excel from './vendor/Export2Excel.js'

4.修改Export2Excel.js

主要把路径修改到你自己文件的位置

5.具体方法如下：

// 导出明细2
    getExport1() {
      if (this.startTime && this.endTime) {
        exportAccessList({
          residenceId: this.residenceId,
          startTime: this.startTime,
          endTime: this.endTime
        })
          .then(res => {
            console.log(res.data, "请求json导出数据");
            let jsonData = res.data.map((val, index, arr) => {
              // 改造数据格式
              let json = {};
              json.index = index + 1;
              json.userName = val.userName; //姓名
              json.phone = val.phone; //联系方式
              json.doorNum = val.doorNum; //门牌号
              json.createTime = val.createTime; //时间
              json.idNumber = val.idNumber; //出入人身份证
              json.accessType = val.accessType; //出入方式
              json.carNum = val.carNum; //车牌号
              json.temperature = val.temperature; //体温
              json.reason = val.reason; //事由
              json.destination = val.destination; //目的地
              return json;
            });
            console.log(jsonData, "改造数据"); //列标题，逗号隔开，每一个逗号就是隔开一个单元格

            require.ensure([], () => {
              const {
                export_json_to_excel
              } = require("../../excel/Export2Excel");
              const tHeader = [
                "序号",
                "出入人姓名",
                "出入人联系方式",
                "房屋门牌号",
                "登记时间",
                "出入人身份证号",
                "出入方式",
                "车牌号",
                "体温",
                "事由",
                "目的地"
              ];
              // 上面设置Excel的表格第一行的标题
              const filterVal = [
                "index",
                "userName",
                "phone",
                "doorNum",
                "createTime",
                "idNumber",
                "accessType",
                "carNum",
                "temperature",
                "reason",
                "destination"
              ];
              // 上面的index、nickName、name是tableData里对象的属性
              const data = this.formatJson(filterVal, jsonData);
     export_json_to_excel(tHeader, data, "出入人员明细表");
            });
          })
          .catch(error => {
            console.log(error);
          });
      } else {
        Toast("请选择查询时间");
      }
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },

三.可在移动端导出的方法：

这种方法是后端提供url导出地址，直接请求导出接口，得到导出随机码，然后拼接约定好的url，最后定向url导出下载就可以了。