Vue通过Blob对象实现导出Excel功能示例代码

Vue通过Blob对象实现导出Excel功能示例代码

在前端开发中常常需要将数据导出为Excel表格，那么在Vue中如何通过Blob对象实现导出Excel功能呢？本文将提供一份完整的攻略供大家参考。

步骤一：安装依赖

我们需要安装两个依赖，分别是xlsx和file-saver，前者用于生成Excel文件，后者用于保存Excel文件。我们可以使用npm来进行安装：

npm install xlsx file-saver --save

步骤二：引入依赖并导出Excel

我们需要在组件中引入这两个依赖：

import XLSX from 'xlsx'
import FileSaver from 'file-saver'

接着，我们可以定义一个方法来导出Excel文件，示例代码如下：

exportExcel() {
  // 首先，我们需要准备我们的数据
  const data = [
    [1, 'John Doe', '[e-mail]'],
    [2, 'Jane Doe', '[e-mail]']
  ]

  // 创建一个Workbook对象
  const workbook = XLSX.utils.book_new()

  // 添加一个Worksheet
  const worksheet = XLSX.utils.aoa_to_sheet(data)
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')

  // 生成Excel文件
  const wbout = XLSX.write(workbook, { type: 'array', bookType: 'xlsx' })
  const blob = new Blob([wbout], { type: 'application/octet-stream' })

  // 保存文件
  FileSaver.saveAs(blob, 'example.xlsx')
}

上述代码中，我们首先准备了我们的数据，再创建一个Workbook对象，之后添加一个Worksheet，把数据写入Worksheet中，最后生成Excel文件并保存。在保存文件时，我们使用了Blob对象，将生成的Excel数据转换成二进制流，并指定了文件的Content-Type为application/octet-stream，以便浏览器将其当作文件下载。最后，我们使用FileSaver库中的saveAs方法将Blob对象保存为一个文件，其中第一个参数为Blob对象，第二个参数为要保存的文件名。

示例一：导出表格数据

这是一个让用户自行输入数据并导出的示例：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>编号</th>
          <th>姓名</th>
          <th>邮箱</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in dataList" :key="index">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.email }}</td>
        </tr>
      </tbody>
    </table>

    <div>
      <label>ID：</label>
      <input v-model="id" type="text"><br>
      <label>姓名：</label>
      <input v-model="name" type="text"><br>
      <label>邮箱：</label>
      <input v-model="email" type="text"><br>
      <button @click="addData">添加数据</button>
      <button @click="exportExcel">导出Excel</button>
    </div>
  </div>
</template>

<script>
import XLSX from 'xlsx'
import FileSaver from 'file-saver'

export default {
  data() {
    return {
      dataList: [],
      id: '',
      name: '',
      email: ''
    }
  },

  methods: {
    addData() {
      const data = {
        id: this.id,
        name: this.name,
        email: this.email
      }
      this.dataList.push(data)
      this.clearForm()
    },

    clearForm() {
      this.id = ''
      this.name = ''
      this.email = ''
    },

    exportExcel() {
      const data = [['编号', '姓名', '邮箱']]
      this.dataList.forEach(item => data.push([item.id, item.name, item.email]))

      const workbook = XLSX.utils.book_new()
      const worksheet = XLSX.utils.aoa_to_sheet(data)
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')

      const wbout = XLSX.write(workbook, { type: 'array', bookType: 'xlsx' })
      const blob = new Blob([wbout], { type: 'application/octet-stream' })

      FileSaver.saveAs(blob, 'example.xlsx')
    }
  }
}
</script>

该示例中，我们首先定义了一个表格，用于展示数据。在下方，我们通过文本框和按钮，允许用户自行输入数据。其中的addData方法用于添加数据，clearForm方法用于清空表单。最后，我们定义了一个导出Excel的方法，与前面介绍的方法类似，不同之处在于这里我们需要动态生成数据。

示例二：从后端获取数据并导出

在实际开发中，我们常常需要从后端获取数据并将其导出为Excel文件。这里提供一个从后端获取数据并导出的示例：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>编号</th>
          <th>姓名</th>
          <th>邮箱</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in dataList" :key="index">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.email }}</td>
        </tr>
      </tbody>
    </table>

    <button @click="exportExcel">导出Excel</button>
  </div>
</template>

<script>
import XLSX from 'xlsx'
import FileSaver from 'file-saver'

export default {
  data() {
    return { dataList: [] }
  },

  created() {
    // 获取数据
    this.getData()
  },

  methods: {
    getData() {
      axios.get('/api/data').then(res => {
        this.dataList = res.data
      }).catch(err => {
        console.error(err)
      })
    },

    exportExcel() {
      axios.get('/api/excel', { responseType: 'arraybuffer' }).then(res => {
        const data = new Uint8Array(res.data)
        const workbook = XLSX.read(data, { type: 'array' })
        const worksheet = workbook.Sheets[workbook.SheetNames[0]]
        const json = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
        const headers = json[0]
        const rows = []
        json.slice(1).forEach(row => {
          const rowData = []
          headers.forEach(header => rowData.push(row[header]))
          rows.push(rowData)
        })

        const worksheet2 = XLSX.utils.aoa_to_sheet([headers, ...rows])
        const workbook2 = XLSX.utils.book_new()
        XLSX.utils.book_append_sheet(workbook2, worksheet2, 'Sheet1')

        const wbout = XLSX.write(workbook2, { type: 'array', bookType: 'xlsx' })
        const blob = new Blob([wbout], { type: 'application/octet-stream' })

        FileSaver.saveAs(blob, 'example.xlsx')
      }).catch(err => {
        console.error(err)
      })
    }
  }
}
</script>

该示例中，我们首先在组件的created生命周期钩子中调用getData方法，从后端获取数据并展示到表格中。在点击导出按钮时，我们通过axios库向后端发送请求来获取Excel文件的数据。因为后端返回的是二进制流，所以我们需要将responseType设置为arraybuffer，接着，我们将得到的二进制数据转换为Uint8Array类型，并传递给XLSX.read方法来解析Excel文件。解析完成后，我们将数据转换为二维数组，并将其写入到一个新的Workbook对象中，最后生成Excel文件并保存。