关于 vue table 导出 excel 表格
大家好,今天给大家分享一下vue 中 导出 excal 表格的几种方法
方法一:
用插件,首先先安装依赖
npm install -S file-saver xlsx
npm install -D script-loader
然后在 src 目录下新建一个文件夹,引入以下两个文件
链接:https://pan.baidu.com/s/1TrXFnvK92miUI42z38Y9DQ
提取码:ff8g
之后再 main.js 中引入这两个文件(路径自行解决)
import Blob from './excel/Blob.js';
import Export2Excel from './excel/Export2Excel.js';
都配置好之后,我们在 methods 中 调用方法
<button @click="export2Excel()">导出报表</button>
export2Excel() {
require.ensure([], () => {
const { export_json_to_excel } = require('../../excal/Export2Excel'); //注意路径
const tHeader = ['姓名', '性别', '电话']; //设置表格标题
const filterVal = ['name', 'sex', 'phone'];//标题对应的属性
const list = this.tableData; //把data里的tableData存到list
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, '下载excel');
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}
原文链接:https://blog.csdn.net/xiaoshihoukediaole/article/details/81296327
方法二:
用原生js,不需插件,直接上代码
exportExcal() { //要导出的json数据 const jsonData = this.tableData; //列标题 我给合并标题合并单元格了 let str = '<tr><th>评估计划</th><th colspan="4">AAA(2019-01-01~2019-01-02)</th><th colspan="4">BBB(2019-03-01~2019-03-02)</th><th colspan="4">CC(2019-04-01~2019-04-02)</th></tr><tr><th>编号</th><th>日期</th><th>姓名</th><th>性别</th><th>年龄</th><th>职业</th><th>爱好</th><th>电话</th><th>邮箱</th><th>省份</th><th>市区</th><th>地址</th><th>邮编</th></tr>'; //循环遍历,每行加入tr标签,每个单元格加td标签 for (let i = 0; i < jsonData.length; i++) { str += '<tr>'; for (let item in jsonData[i]) { //增加\t为了不让表格显示科学计数法或者其他格式 str += `<td>${ jsonData[i][item] + '\t'}</td>`; } str += '</tr>'; } //Worksheet名 let worksheet = 'Sheet1' let uri = 'data:application/vnd.ms-excel;base64,'; //下载的表格模板数据 let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"> <head><meta charset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet> <x:Name>${worksheet}</x:Name> <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet> </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--> </head><body><table>${str}</table></body></html>`; //下载模板 window.location.href = uri + this.base64(template) }
上面链接,我忘记了,之前看的,如有侵犯,请联系。
上面两种方法都可以实现点击导出 excal 报表的问题,如果解决了你的困惑的话,就请点个关注吧~
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库