Vue3 导出excel

🙂博主：锅盖哒
🙂文章核心：导出excel

目录

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

在Vue组件中，你可以使用xlsx库来生成Excel文件并提供一个导出按钮供用户下载。

---

 

       在Vue 3中，你可以使用第三方库xlsx来生成并导出Excel文件。下面是一个简单的实现示例：

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

npm install xlsx --save

在Vue组件中，你可以使用xlsx库来生成Excel文件并提供一个导出按钮供用户下载。

<template><div><!-- 此处是你的页面内容 --><button @click="exportToExcel">导出Excel</button></div>
</template><script>
import XLSX from 'xlsx';export default {methods: {exportToExcel() {// 获取需要导出的数据，此处为示例数据const data = [['姓名', '年龄', '职业'],['John Doe', 30, 'Developer'],['Jane Smith', 25, 'Designer'],['Bob Johnson', 35, 'Manager'],];// 创建一个空的Workbook对象const wb = XLSX.utils.book_new();// 创建一个新的Worksheetconst ws = XLSX.utils.aoa_to_sheet(data);// 将Worksheet添加到Workbook中XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');// 生成Excel文件的Binary字符串const excelBinaryString = XLSX.write(wb, { type: 'binary' });// 将Binary字符串转换为Blob对象const blob = new Blob([s2ab(excelBinaryString)], { type: 'application/octet-stream' });// 导出Excel文件const fileName = 'example.xlsx';if (navigator.msSaveBlob) {// 兼容IE浏览器navigator.msSaveBlob(blob, fileName);} else {const link = document.createElement('a');link.href = URL.createObjectURL(blob);link.download = fileName;link.click();URL.revokeObjectURL(link.href);}},},
};// 将s字符串转换为Uint8Array
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;
}
</script>

       上述代码中，我们首先获取需要导出的数据，然后使用xlsx库来创建一个新的Excel Workbook，并在其中添加一个Worksheet，并将数据添加到该Worksheet中。最后，将Workbook导出为Binary字符串，然后将其转换为Blob对象，并提供一个下载链接供用户下载。

        请注意，以上示例是一个简单的Excel导出实现。在实际应用中，你可能需要更复杂的数据处理和更多的选项来配置导出的Excel文件。同时，要确保在使用XLSX.write导出Excel文件时，传递的type参数设置为'binary'，这样可以确保正确地生成Excel文件的Binary字符串。