[转]记录原生table转excel表格并导出功能_前端知识库
不需要引进其他前端插件,还可以保留原有样式,简单表导出非常合适.
实测有效,只是貌似只能使用xls后缀名,而且打开时office会有警告,原理可以看后面的其他参考文章,应当是利用url,所以大小可能有2M的限制,所以不适合导出大文件.
原文地址:记录原生table转excel表格并导出功能_前端知识库
最近学到了一个原生table转excel表格并导出功能,实际的代码很少。还是我发沸点,有人用gpt给我的答案,哈哈哈哈哈非常感谢。
// html部分
<table
border="1"
cellpadding='0'
cellspacing='0'
id="myTable"
>
<tr>
<th>上级对口机构</th>
<th>市安全生产委员会</th>
<td>111</td>
<th>市突发事件应急委员会</th>
<td>222</td>
</tr>
</table>
// js部分
function exportToExcel () {
const table = document.getElementById('myTable'); // 原生table的id名
const html = table.outerHTML;
const blob = new Blob([html], { type: 'application/vnd.ms-excel' });
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'excel.xls'; // excel表格名称
a.click();
window.URL.revokeObjectURL(url);
}
还可以导出单多选,使用特殊符号就行 , 注意如果实际html结构不满足要求,可以写一个满足业务需求的独立隐藏html。(我用的v-show="false"写一个结构并导出)
其他参考文章:
javascript - 【HTML5版】导出Table数据并保存为Excel - Meathill Zhai - SegmentFault 思否
javascript - How can I export tables to Excel from a webpage - Stack Overflow
js实现table导出Excel,保留table样式 - 黑黑哈哈 - 博客园