Vue引用Excel导出数据

最新推荐文章于 2023-01-12 06:45:00 发布

原创最新推荐文章于 2023-01-12 06:45:00 发布 · 711 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #excel

框架技术专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何在Vue项目中利用xlsx插件实现数据导出为Excel的功能。首先需要安装依赖并导入到项目中，然后通过前端代码处理数据格式，并最终生成Excel文件供用户下载。

Vue引用Excel导出数据

Vue项目引入xlsx插件
在package.json导入依赖
“xlsx”: “^0.14.0”

在这里插入图片描述

运行npm install

接下来就是前端引用xlsx

  import XLSX from 'xlsx'
// 导出
      handleExport() {
        if (this.dataSource.length === 0) {
          this.$message.warning('没有数据可导出！')
        } else {
          this.$confirm('是否确认导出?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.exportDatas = []
            this.handleBuildExportData(this.dataSource)
            /* convert state to workbook */
            const ws = XLSX.utils.aoa_to_sheet(this.exportDatas)
            const wb = XLSX.utils.book_new()
            XLSX.utils.book_append_sheet(wb, ws, '标题')
            /* generate file and send to client */
            XLSX.writeFile(wb,   '文件名.xlsx')
          })
        }
      },
      // 处理table数据生成导出的数据
      handleBuildExportData(sourceData) {
        const headerCol = ['序号', '名称', '日期', '费用']
        this.exportDatas.push(headerCol)
        var totalAmount = 0
        for (let index = 0; index < sourceData.length; index++) {
          const dataCol = [
            index + 1,
            sourceData[index].orgName,
            sourceData[index].feeDt,
            sourceData[index].serAmount.toFixed(2)
          ]
          totalAmount = sourceData[index].totalAmount + totalAmount
          this.exportDatas.push(dataCol)
        }
        var temp = [
          '合计',
          '',
          '',
          totalAmount.toFixed(2)
        ]
        this.exportDatas.push(temp)
      }