如何在项目中复用 “导出Excel”(备忘)

294 阅读1分钟

安装插件

npm i file-saver -D
npm i script-loader xlsx --save

复制该文件夹到新项目的src根目录下

image.png gitee.com/MeQgJ/human…

将以下代码放入需要的地方稍作修改即可

handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
        const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
        const list = this.list
        // 给data内容信息做格式优化
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          // header为导出表格的头部信息,data为内容信息
          header: tHeader,
          data,
          filename: this.filename,
          autoWidth: this.autoWidth,
          bookType: this.bookType
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
       // excel导出格式优化
      const map = {
        'id': '编号',
        'password': '密码',
        'mobile': '手机号',
        'username': '姓名',
        'timeOfEntry': '入职日期',
        'formOfEmployment': '聘用形式',
        'correctionTime': '转正日期',
        'workNumber': '工号',
        'departmentName': '部门',
        'staffPhoto': '头像地址'
      }
      let header = []
      let data = []
      const one = list[0]
      if (!one) return { header, data }
      header = Object.keys(one).map(key => {
        return map[key]
      })
      data = list.map(obj => {
        // 把obj转换为
        const key = obj['formOfEmployment']
        obj['formOfEmployment'] = hireTypeEmploy[key]
        return Object.values(obj)
      })
      return { header, data }
    }