前端直接导出excel文件的两种方式
28人参与 • 2025-02-14 • Javascript
前言
开发中可能会有这样的需求，本地自己生成了一个表格，此时表格并没有上传到后台服务器上，所以无法通过接口进行下载，此时就需要前端自行处理了。
一、插件方式
1.插件安装
npm i xlsx npm i file-saver
2.引入
// index.vue文件 import filesaver from "file-saver" import xlsx from "xlsx"
3.导出
exportexcel() {
let et = xlsx.utils.table_to_book(
//获取table的dom
document.getelementbyid('table-contents')
);
let etout = xlsx.write(et, {
booktype: 'xlsx',
booksst: true,
type: 'array'
});
try {
filesaver.saveas(
new blob([etout], {
type: 'application/octet-stream'
}),
'xxx.xls'
);
} catch (e) {
//console.log(e, etout)
}
console.log(etout);
return etout;
}
二、本地直接导出
1.页面规则
- 页面必须要有table表格
<table border="1" cellspacing="0" id="table-parent" >
<thead>
<tr>
<th ></th>
</tr>
</thead>
<tbody>
<tr >
<td></td>
</tr>
</tbody>
</table>
2.在js中添加函数
var tabletoexcel = (function() {
var uri = 'data:application/vnd.ms-excel;base64,',
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><!--[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>{table}</table></body></html>',
base64 = function(s) {
return window.btoa(unescape(encodeuricomponent(s)))
},
format = function(s, c) {
return s.replace(/{(\w+)}/g, function(m, p) {
return c[p];
})
}
return function(table, name) {
if (!table.nodetype) table = document.getelementbyid(table);
var ctx = {
worksheet: name || 'worksheet',
table: table.innerhtml
};
window.location.href = uri + base64(format(template, ctx));
}
})();3.调用
tabletoexcel(document.getelementbyid("table-parent"), "导出表格");总结
到此这篇关于前端直接导出excel文件的两种方式的文章就介绍到这了,更多相关前端导出excel文件内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
赞 (0)
打赏
微信扫一扫
微信扫一扫
您想发表意见！！点此发布评论
发表评论