Vue 中后台系统导出表格

307 阅读1分钟

第一步:跟上篇文章一样操作 先找到目标所在地方

Snipaste_2022-04-07_21-23-44.png

点击导出Excel 会出现下图

Snipaste_2022-04-07_21-24-45.png

第二步:就是找源码了, 先根据路径在源码中找到相对应的文件

Snipaste_2022-04-07_21-27-19.png

文件中的代码如下 把它复制到你的文件中 Snipaste_2022-04-07_21-17-49.png 在文件中发现有导入的包 然后根据路径提示找到它 图中红色箭头指的就是导入的包 找到的包如下

Snipaste_2022-04-07_21-17-55.png

把这个包放到src里面就行 然后需要下个包 下载方式为 npm i file-saver 或 yarn add file-saver

第三步 :修改代码 修改后的代码 如下

 handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(async(excel) => {
        // 设置表头
        const res = await getEmployeeList({ page: 1, size: this.total })
        /* list 导出的数据列表 */
        const list = res.data.rows
        // eslint-disable-next-line no-unused-vars
        const data = this.formatJson(list)
        const tHeader = this.header
        excel.export_json_to_excel({
          header: tHeader,
          data: data,
          filename: 'vue', // 设置文件名可以随意设置
          autoWidth: true
          // bookType: "txt", //设置文件格式
        })
        // this.downloadLoading = false
      })
    },
    formatJson(list) {
      const map = {
        id: '编号',
        password: '密码',
        mobile: '手机号',
        username: '姓名',
        timeOfEntry: '入职日期',
        formOfEmployment: '聘用形式',
        correctionTime: '转正日期',
        workNumber: '工号',
        departmentName: '部门',
        staffPhoto: '头像地址'
      }
      // 目的:将以为list数组转换成二维数组
      return list.map((item) => {
      /* 4-定义一个收集数据的对象 */
        var obj = {}
        /* 4-定义一个收集数据的对象 */
        var enKey = Object.keys(map)
        /* 3-获取每一个英文键所对应的值 */
        enKey.forEach((key) => {
        /* 5-获取中文键,并定义对象中属性 */
          var zhKey = map[key]//编号
          obj[zhKey] = item[key]// {编号:值}==>{编号:65c2,密码:1111112233}
        })
        /* 6-获取所有obj中的值 */
        var valueArr = Object.values(obj) // ["2018-11-02","管理员","9002"]
        // ["2018-11-02","管理员","9002"]
        this.header = Object.keys(obj)
        return valueArr
      })
    }

第四步 导出之后的代码样板为

Snipaste_2022-04-07_21-40-06.png