使用vue实现导出Excel功能【纯前端】

使用vue实现导出Excel功能【纯前端】

项目场景:

最近接手一个项目,其中一个需求是将查询出来table中的数据导出为excel文件,并下载到本地。
问题来了,这种东西,不是应该后端去实现更好一些吗?如果放在前端做,要拿到全部数据,然后把这些数据进行解析,再进行一系列的骚操作转化成Excel文件,假如数据量少还好,万一数据量庞大,给我整个几万条,那浏览器岂不是卡死??(当然这只是我这枚小菜鸟的个人见解,如果有路过的大神有好的建议或者经验,还请赐教一下~~)

----------------------------------------------------废话分割线 -------------------------------------------------------------
言归正传,当我查了一些资料的时候,发现实现起来其实还是挺简单的,老规矩,不废话了,直接上代码!

解决方案:

1、装包:npm install xlsx file-saver --save
2、引入:import XLSX from ‘xlsx’

3、template中写一个button,doExport为点击事件,触发导出功能

<el-button
	type="primary"
	size="small"
	:loading="exportLoading"
	icon="el-icon-document"
	@click="doExport"
>导出Excel</el-button>

界面样式如下:

4、methods代码如下:

	doExport() {
	  // 开始生成文件时,添加一个loading让它一直转,待生成excel完毕之后再关掉
      this.exportLoading = true
      // 关键函数
      function exportToExcel(fileName, tableData) {
        const worksheet = XLSX.utils.json_to_sheet(tableData)
        const workbook = { Sheets: { data: worksheet }, SheetNames: ['data'] }
        const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
        const data = new Blob([excelBuffer], { type: 'application/octet-stream' })
        FileSaver.saveAs(data, `${fileName}.xlsx`)
      }
      // fileName 为生成的 Excel 文件名称,为避免重复,这里使用时间戳作为前缀
      const fileName = moment().format('YYYY-MM-DD hh:mm:ss') + ' xxx信息数据'
	  // perPageSize 为请求数据的数量,由于需求方想要全部的数据,而前端又要分页,所以只能把这个参数设置成很大喽,如果出问题我也没办法~
      const params = {
        page: this.currentPage - 1,
        size: 100000,
        queryCondition: {
          area: this.searchForm.area,
          deviceType: this.searchForm.deviceType,
          hospitalName: this.searchForm.deviceCustomer,
          erpMaterialDescription: this.searchForm.erpMaterialDescription,
          deviceSerialNumber: this.searchForm.deviceSerialNumber,
          materialNumber: this.searchForm.materialNumber,
          workOrderCreatedTimeStart: this.searchForm.workOrderCreatedTime,
          workOrderCreatedTimeEnd: this.searchForm.workOrderCreatedTime,
          workOrderClosedTimeStart: this.searchForm.workOrderClosedTime,
          workOrderClosedTimeEnd: this.searchForm.workOrderClosedTime,
          workOrderNumber: this.searchForm.workOrderNumber,
          engineerName: this.searchForm.engineerName,
          warrantyStatus: this.searchForm.warrantyStatus,
          materialReplaceTimesLow: this.searchForm.materialReplaceTimesLow,
          materialReplaceTimesHigh: this.searchForm.materialReplaceTimesHigh
        }
      }
      console.log(params)
      const self = this
      ibMaterialApi.getIBMaterialTableData(params).then(res => {
        if (res.code === 200) {
          // 解析excel文件
          const excelData = []
          for (let i = 0; i < res.data.length; i++) {
            const excelObj = {}
            excelObj.序列号 = (i + 1).toString()
            excelObj.创建时间 = res.data[i].createTime === '0' ? '暂无数据' : res.data[i].createTime
            excelObj.物料号 = res.data[i].materialNumber
            excelObj.物料描述 = res.data[i].erpMaterialDescription
            excelObj.客户名称 = res.data[i].hospitalName
            excelObj.省份 = res.data[i].area
            excelObj.机型 = res.data[i].deviceType
            excelObj.整机序列号 = res.data[i].deviceSerialNumber
            excelObj.故障时间 = res.data[i].equipmentDowntime
            excelObj.故障描述 = res.data[i].diagnose
            excelObj.解决方案 = res.data[i].suggestionSolution ? res.data[i].suggestionSolution : '暂无数据'
            excelObj.旧件序列号 = res.data[i].oldSerialNumber ? res.data[i].oldSerialNumber : 'N.A'
            excelObj.保修状态 = res.data[i].warrantyStatus
            excelObj.工单号 = res.data[i].caseId
            excelData.push(excelObj)
          }
          console.log(excelData)
          exportToExcel(fileName, excelData)
          self.exportLoading = false
        } else {
          self.exportLoading = false
        }
      }).catch(() => {
        self.exportLoading = false
      })
	}

导出文件时,loading样式如下:

文件下载成功!

ok!至此就结束了,代码非常简单,亲测可用,cv即可~~
如果大家有什么更好的意见,欢迎批评指正!

转载请说明出处内容投诉
CSS教程_站长资源网 » 使用vue实现导出Excel功能【纯前端】

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买