前端下载Excel

在Vue中实现前端下载Excel，可以使用JavaScript库来处理Excel文件的生成和下载。一个常用的库是xlsx，它提供了创建和读取Excel文件的功能。

首先，需要安装xlsx库。可以使用npm或yarn来安装它：

npm install xlsx  
# 或者  
yarn add xlsx

接下来，可以在Vue组件中使用xlsx库来生成Excel文件并实现下载功能。以下是一个简单的示例：

<template>  
  <div>  
    <button @click="downloadExcel">下载Excel</button>  
  </div>  
</template>  
  
<script>  
import XLSX from 'xlsx';  
//import * as XLSX from 'xlsx';
  
export default {  
  methods: {  
    downloadExcel() {  
      // 创建数据  
      const data = [  
        { Name: 'John', Age: 25, Occupation: 'Engineer' },  
        { Name: 'Jane', Age: 30, Occupation: 'Doctor' },  
        { Name: 'Bob', Age: 35, Occupation: 'Teacher' }  
      ];  
  
      // 创建工作簿  
      const workbook = XLSX.utils.book_new();  
  
      // 创建工作表  
      const worksheet = XLSX.utils.json_to_sheet(data);  
  
      // 将工作表添加到工作簿  
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');  
  
      // 将工作簿保存为Blob对象  
      const blob = new Blob([XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });  
  
      // 创建下载链接并触发下载操作  
      const url = URL.createObjectURL(blob);  
      const link = document.createElement('a');  
      link.href = url;  
      link.download = 'data.xlsx'; // 设置下载文件的文件名  
      document.body.appendChild(link);  
      link.click(); // 触发下载操作  
      document.body.removeChild(link);  
    }  
  }  
};  
</script>

在上面的示例中，首先创建了一些数据，然后使用XLSX.utils.json_to_sheet将数据转换为工作表。接下来，将工作表添加到工作簿，并使用XLSX.write将工作簿保存为Blob对象。最后，创建一个下载链接并触发下载操作。可以根据需要修改数据和文件名来适应你的具体需求。

如果用到的地方多的话，建议封装成组件方便维护和调用。

XLSX.write 是 xisx 库中的一个函数，用于将工作簿内容以二进制形式写入到文件中。它的参数如下：

1.workbook：要写入的工作簿对象。
2.filename：要写入的文件名。
3.bookType：可选参数，指定文件的格式。可以是以下值之一：
•'xIsx"：默认值，写入 Excel 2007+格式的文件。
•'xIs'：写入Excel 97-2003 格式的文件。
4.type：可选参数，指定返回的数据类型。可以是以下值之一：
•'array'：返回一个数组。这是默认值。
•'base64'：返回一个Base64 编码的字符串。
•'binary'：返回一个二进制流。

book_opts：可选参数，用于配置工作簿的选项。例如，可以设置工作簿的名称、工作表的数量等。
sheet_opts：可选参数，用于配置工作表的选项。例如，可以设置工作表的名称、列宽等。
这些参数可以根据你的需求进行组合和调整，以适应不同的使用场景。

｛type： 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"｝是什么意思。

在JavaScript中，Blob 对象用于表示不可变的原始数据。它是一个通用的原始数据构造，可以包含文本、二进制数据等。
｛type： 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"｝是一个对象，其中 type 属性指定了该Blob对象的MIME类型。MIME类型是一种标准化的方式，用于指定媒体类型或文件格式。
在这个例子中，'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'是MIME类型，它表示该Blob
对象是一个Excel文件（具体来说是.xlsx 格式的文件，这是Excel 2007及以后版本使用的格式）。
当你创建一个指问这个Blob对象的链接并点击它时（例如，通过使用 URL.createObjectURL（blob）和link.click（）），浏览器会知道这是一个Excel文件，并按照该MIME类型来处理它，从而允许用户下载和打开这个Excel文件。

前端下载Excel