vue 封装导出Excel数据的公共函数的方法

下面是关于Vue封装导出Excel数据的公共函数的方法的完整攻略：

1. 添加文件依赖

首先，需要在项目中添加xlsx和file-saver两个文件依赖，这两个依赖可以通过npm安装：

npm install --save xlsx file-saver

然后，在Vue组件中调用需要导出Excel的数据的所在请求API，并将请求结果存储在某个变量中。例如：

//在某个Vue组件中
import axios from 'axios'

export default {
  data: {
    tableData: []
  },
  created() {
    this.getTableData()
  },
  methods: {
    async getTableData() {
      const res = await axios.get('/api/tableData')
      this.tableData = res.data
    }
  }
}

2. 创建Excel导出函数

接下来，需要创建一个公用的函数，用于生成Excel文件并导出数据。可以将函数定义在一个单独的Utils类中，或作为Vue组件的方法。函数的主要流程如下：

• 通过js-xlsx库的工具函数将数组对象（表格数据）转换成Workbook对象
• 将Workbook对象再通过file-saver库的工具函数下载到本地

示例代码：

// 方式1：Utils类方法
import XLSX from 'xlsx'
import { saveAs } from 'file-saver'

class Utils {
  static exportExcel(tableData, fileName = 'excel-data') {
    const worksheet = XLSX.utils.json_to_sheet(tableData)
    const workbook = XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
    const buffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
    const blob = new Blob([buffer], { type: 'application/octet-stream' })
    saveAs(blob, `${fileName}.xlsx`)
  }
}

// 方式2：Vue组件方法
export default {
  data: {
    tableData: []
  },
  methods: {
    exportExcel() {
      const worksheet = XLSX.utils.json_to_sheet(this.tableData)
      const workbook = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
      const buffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
      const blob = new Blob([buffer], { type: 'application/octet-stream' })
      saveAs(blob, "excel-data.xlsx")
    }
  }
}

3. 调用Excel导出函数

最后，在Vue组件中添加一个按钮或其他交互元素，当用户点击该元素时，调用Excel导出函数，将表格数据导出到Excel文件。

示例代码：

<!-- 在组件的template中 -->
<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="sex" label="性别"></el-table-column>
    </el-table>
    <el-button type="primary" @click="exportExcel">导出Excel</el-button>
  </div>
</template>

// 在组件的script中
import XLSX from 'xlsx'
import { saveAs } from 'file-saver'
import axios from 'axios'

export default {
  data: {
    tableData: []
  },
  created() {
    this.getTableData()
  },
  methods: {
    async getTableData() {
      const res = await axios.get('/api/tableData')
      this.tableData = res.data
    },
    exportExcel() {
      const worksheet = XLSX.utils.json_to_sheet(this.tableData)
      const workbook = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
      const buffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
      const blob = new Blob([buffer], { type: 'application/octet-stream' })
      saveAs(blob, "excel-data.xlsx")
    }
  }
}

以上就是Vue封装导出Excel数据的公共函数的方法的详细讲解，其中包含了两种方式的示例说明。