Vue3 导出excel

2023-09-24 25 0

fcd8bca838f641fdadae11a6bb57cfde.gif

🙂博主:锅盖哒
🙂文章核心:导出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字符串。

 

5ff2f92f237541b1a15b44152a39b5c0.gif

 

代码编程
赞赏

相关文章

零基础学习游戏建模多久能出师?3D建模师告诉你如何有效的学会建模
学3D建模一定要有美术功底?有则锦上添花,没有也不影响你学习
3D建模难学吗?零基础学6个月,能否找到工作?
3D建模入行难不难?零基础学习次世代,这6条建议能帮到你
游戏建模师薪资能给到多少?建模初学者如何快速入行,获取涨薪机会?
游戏建模行业门槛真有这么高?教你如何学习,找到合适自己的方式