[转]记录原生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样式 - 黑黑哈哈 - 博客园