纯前端vue实现下载excel

要在前端 Vue 中实现下载 Excel，你可以使用第三方库如 `xlsx` 或者 `file-saver`。其中，`xlsx` 库用于生成 Excel 文件，而 `file-saver` 库则用于将生成的文件保存到本地。

以下是一个简单的示例：

1. 首先，安装库：

npm install xlsx file-saver --save

2. 在 Vue 组件中导入库：

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

3. 在组件中定义一个方法来生成并下载 Excel 文件：

methods: {
  downloadExcel() {
    //创建一个工作簿
    const wb = XLSX.utils.book_new();
    //创建一个工作表
    const ws = XLSX.utils.json_to_sheet([{ name: 'John', age: 28 },{ name: 'Jane', age: 32 }]);
    //将工作表添加到工作簿中
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
    //将工作簿转换成二进制数据流
    const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
    //将二进制数据流转换成Blob对象
    const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' });
    //使用file-saver库将文件保存到本地
    FileSaver.saveAs(blob, 'example.xlsx');
  }
}

4. 在模板中添加一个下载按钮，并绑定上述方法：

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

注意，上述代码中的 `s2ab` 是一个辅助函数，用于将字符串转换成二进制数组：

function s2ab(s) {
  const buf = new ArrayBuffer(s.length);
  const view = new Uint8Array(buf);
  for (let i = 0; i < s.length; i++) {
    view[i] = s.charCodeAt(i) & 0xFF;
  }
  return buf;
}

这样，当用户点击下载按钮时，就会生成并下载一个名为 `example.xlsx` 的 Excel 文件。