Vue3中导出表格数据到xlsx，并使用浏览器的默认下载位置保存

---

1.安装xlsx库

首先，确保你已经安装了 xlsx 库。你可以通过 npm 安装它：

npm install xlsx
或者
yarn add xlsx

2.在模板中添加一个按钮或链接来触发导出到 Excel 的功能：

代码如下（示例）：

<button @click="exportToExcel">导出到 Excel</button>

3.添加一个方法来处理导出到 Excel 的逻辑

//引入包
import XLSX from 'xlsx';
const exporttoExcel = async () => {
  const table = document.getElementById('table-v2'); // 替换为你的表格 ID
    const workbook = XLSX.utils.table_to_book(table, { sheet: "Sheet1" });
    const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
    saveAsExcelFile(excelBuffer, 'your-file-name.xlsx');
}

 const saveAsExcelFile = async(buffer: ArrayBuffer, fileName: string) => {
    const data = new Blob([buffer], { type: 'application/octet-stream' });
    const url = URL.createObjectURL(data);
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', fileName);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
 }

在这个示例中，exportToExcel 方法首先使用 XLSX.utils.table_to_book 将表格转换为 Excel 工作簿。然后，它使用 XLSX.write 将工作簿写入缓冲区。最后，它调用 saveAsExcelFile 方法来创建一个下载链接，并模拟点击该链接，从而触发浏览器的下载功能。

请注意，你需要将 ‘your-table-id’ 替换为你的表格的 ID，将 ‘your-file-name.xlsx’ 替换为你想要的文件名。此外，这个示例假设你的表格有一个 ID，你可以通过这个 ID 来获取表格元素。如果你的表格没有 ID，你需要使用其他方法来获取它，比如通过类名或标签名。

4.拓展

使用上述代码控制台出现该错误：

SyntaxError: The requested module '/node_modules/.vite/deps/xlsx.js?v=01d23f73' does not provide an export named 'default'

原因分析：
引入的库没有使用export default来导出,而是直接使用export导出一些属性和方法，自然无法使用【import XLSX from 'xxx’】 而只能通过【import {} from 'xxx’】
解决方法：
把引入方法改为import * as XLSX from 'xlsx'，控制台不再出错。