joken-前端工程师

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: :: :: 管理 ::
  401 随笔 :: 39 文章 :: 8 评论 :: 20万 阅读

代码

onst worksheet = "Sheet1";
const tableHTML = "<tr><td>数据1</td><td>数据2</td></tr>";
const excelHTML = `
<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>${tableHTML}</table></body></html>`;

// 创建 Blob 并触发下载
const blob = new Blob([excelHTML], { type: "application/vnd.ms-excel" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "exported_table.xls";
a.click();
URL.revokeObjectURL(url);

解析这段代码

  • xmlns:o="urn:schemas-microsoft-com:office:office"xmlns:x="urn:schemas-microsoft-com:office:excel":这些命名空间用于确保 HTML 文件被解析为 Excel 文件时,能够识别并正确处理微软特定的 Office 和 Excel 扩展标记。
  • <!--[if gte mso 9]>...<![endif]-->:这是一个条件注释,仅在微软 Office 9 及以上版本的 Excel 中生效。这个部分确保 Excel 识别并处理嵌入的 XML 数据。
  • ${worksheet}${str}:这两个变量通常是由 JavaScript 动态生成的,worksheet 表示工作表的名称,str 表示表格的 HTML 内容。

基本流程

  1. 生成 HTML 表格:通过 JavaScript 动态生成包含你要导出的数据的 HTML 表格。
  2. 包装 HTML 内容:使用这个模板将生成的表格包装成完整的 Excel 文件格式。
  3. 下载 Excel 文件:通过浏览器 API(如 Blob 和 URL.createObjectURL)将生成的内容触发下载。

注意事项

  1. 格式限制:使用这种方式导出的 Excel 文件实际上是带有 .xls 扩展名的 HTML 文件,不是原生的 Excel 格式(.xlsx)。
  2. 浏览器兼容性:这种方法在现代浏览器中通常是可行的,但在某些情况下可能存在兼容性问题,特别是在移动端浏览器或者某些严格模式下。
  3. 功能限制:通过 HTML 导出的 Excel 可能不支持 Excel 的一些高级功能,比如公式、图表等。
posted on   joken1310  阅读(140)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
点击右上角即可分享
微信分享提示