【Vue项目实践】(vue3 + Element Plus)excel 导出
安装依赖
yarn add --save xlsx file-saver
1、添加导出按钮以及点击事件
<el-button type="primary" round @click="exportClick ">导出表格</el-button>
2、在table表格中添加id
<el-table :data="tableData" style="width: 100%" id="myTable">
3、写点击事件的方法函数
const exportClick = () => {
var wb = XLSX.utils.table_to_book(document.querySelector('#my-table'));//关联dom节点
/* get binary string as output */
var wbout = XLSX.write(wb, {
bookType: 'xlsx',
bookSST: true,
type: 'array'
})
try {
FileSaver.saveAs(new Blob([wbout], {
type: 'application/octet-stream'
}), '工资表.xlsx')//自定义文件名
} catch (e) {
if (typeof console !== 'undefined') console.log(e, wbout);
}
return wbout
};
作者:panie
出处:http://www.cnblogs.com/panie2015/
如果您希望与我交流互动,欢迎加我微信
本文内容为作者辛苦整理书写,欢迎转载,但请保留文章出处
分类:
vue
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?