Vue下载Excel文件流的实现

在Vue中，我们经常会遇到需要下载Excel文件的需求。虽然浏览器可以直接打开Excel文件，但是当数据较多时，直接在浏览器中打开Excel文件会导致页面的卡顿。为了更好地用户体验，我们可以通过点击按钮将Excel文件下载到本地。

本文将详细介绍如何在Vue中实现下载Excel文件流的功能，并且提供示例代码和运行结果。

1. 准备工作

在开始之前，需要确保你已经安装了Vue，并且有一定的Vue开发经验。

2. 安装依赖

为了实现下载Excel文件的功能，我们需要使用file-saver和xlsx两个库。file-saver库用于保存文件，xlsx库用于生成Excel文件。

npm install file-saver xlsx --save

3. 创建组件

首先，我们需要创建一个用于下载Excel文件的组件。在该组件中，我们将定义一个按钮，点击按钮时触发下载Excel文件的逻辑。

<template>
  <div>
    <button @click="downloadExcel">下载Excel文件</button>
  </div>
</template>

<script>
export default {
  methods: {
    downloadExcel() {
      // 下载Excel文件的逻辑
    },
  },
};
</script>

4. 实现下载Excel文件的逻辑

在downloadExcel方法中，我们将实现下载Excel文件的逻辑。具体步骤如下：

创建Excel文件对象。

const XLSX = require("xlsx");
const wb = XLSX.utils.book_new();

加载数据到Excel文件中。

// 假设data是要导出的数据，格式如下:
// [
//   { name: '张三', age: 20 },
//   { name: '李四', age: 25 },
//   { name: '王五', age: 30 }
// ]
const ws = XLSX.utils.json_to_sheet(data);
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

生成Excel文件的二进制数据。

const excelData = XLSX.write(wb, { bookType: "xlsx", type: "array" });

将二进制数据保存为Excel文件并下载。

const file = new Blob([excelData], { type: "application/octet-stream" });
saveAs(file, "data.xlsx");

至此，下载Excel文件的逻辑已经完成。完整的代码如下：

<template>
  <div>
    <button @click="downloadExcel">下载Excel文件</button>
  </div>
</template>

<script>
import { saveAs } from "file-saver";
const XLSX = require("xlsx");

export default {
  methods: {
    downloadExcel() {
      const data = [
        { name: "张三", age: 20 },
        { name: "李四", age: 25 },
        { name: "王五", age: 30 },
      ];

      const wb = XLSX.utils.book_new();
      const ws = XLSX.utils.json_to_sheet(data);
      XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

      const excelData = XLSX.write(wb, { bookType: "xlsx", type: "array" });
      const file = new Blob([excelData], { type: "application/octet-stream" });
      saveAs(file, "data.xlsx");
    },
  },
};
</script>