IE9版本Vue导出Excel文件的新思路

2023-12-13 05:25:22

用Vue.js在IE9中后台下载Excel文件的终极指南

在现代化的Web开发中，Vue.js作为前端开发框架备受推崇。然而，在支持旧版本浏览器时，如IE9，Vue.js可能会遇到一些障碍。其中一个常见的挑战是下载Excel文件。本文将深入探讨如何在IE9中实现Vue.js后台下载Excel文件，并提供详细的代码示例和步骤指南。

背景：IE9的限制

IE9作为最后一款支持JavaScript的Internet Explorer版本，在功能和兼容性方面与现代浏览器存在显著差异。这使得在IE9中使用Vue.js进行开发变得困难重重，特别是涉及到文件下载等功能。

解决方案：二进制流对象

为了解决这个问题，我们可以利用二进制流对象（Blob）来将Excel文件转换为二进制数据。通过生成一个URL并使用window.open()方法打开它，我们可以在IE9中实现后台下载。

代码示例

以下代码示例演示了如何在Vue.js组件中使用二进制流对象下载Excel文件：

import { ref } from 'vue'
import { Workbook, Worksheet } from 'exceljs'

export default {
  setup() {
    const downloadExcel = ref(null)

    const exportExcel = () => {
      const data = [
        ['姓名', '年龄', '性别'],
        ['张三', 20, '男'],
        ['李四', 25, '女'],
      ]

      const wb = new Workbook()
      const ws = wb.addWorksheet('Sheet1')
      ws.loadData(data)

      wb.xlsx.writeBuffer().then((buffer) => {
        const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
        const url = URL.createObjectURL(blob)
        downloadExcel.value = url
      })
    }

    return {
      downloadExcel,
      exportExcel,
    }
  },

  template: `
    <button @click="exportExcel">导出Excel</button>
    <a v-if="downloadExcel" :href="downloadExcel" download>下载Excel</a>
  `,
}