首页 > 其他分享 >纯js 导出excel表格,xmlns 方式,导出格式只能是xls

纯js 导出excel表格,xmlns 方式,导出格式只能是xls

时间:2024-08-08 22:50:27浏览次数:14  
标签:xmlns const 表格 Excel excel HTML 导出

代码

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 的一些高级功能,比如公式、图表等。

标签:xmlns,const,表格,Excel,excel,HTML,导出
From: https://www.cnblogs.com/jocongmin/p/18349894

相关文章

  • 做报表用什么工具?不想再用Excel了!!!
    一、什么是中国式报表?不知道大家现在还是使用Excel来制作报表,然后跟领导汇报工作吗?虽然Excel功能很强大,但是用Excel做过中国式报表的小伙伴一定知道它的制作过程有多复杂。 中国式报表可以用一句话简单概括:格式复杂、信息量大、制作困难的一种报表。 中国式报表制作究竟有......
  • 【Python】excel常用函数操作Python实现,办公入门首选
    常见的Excel函数,在Python中的如何实现:VLOOKUP:可以使用merge或map函数来实现类似的功能。IF:可以使用numpy库的where函数来实现类似的功能。SUMIF:可以使用pandas的query函数来筛选数据,然后使用sum函数来计算总和。COUNTIF:类似于SUMIF,可以使用query函数来筛选数据,然......
  • [VBA]使用VBA在Excel中 操作 形状shape 对象
            excel已关闭地图插件,对于想做地图可视化的,用形状来操作是一种办法,就是要自行找到合适的地图形状,修改形状颜色等就可以用于可视化展示不同省市销量、人口等数据。引言在Excel中,通过VBA(VisualBasicforApplications)可以极大地增强数据可视化和报告自动化......
  • Java使用POI导入excel记录
    1.controller:@PostMapping("/import-excel")@TransactionalpublicAjaxResultimportExcel(@RequestPart(value="file")MultipartFilefile)throwsException{Stringresult=manufacturerService.importExcel(file);returnAjaxResult.......
  • MYSQL通过sql语句将select查询出来的数据导出到文件中
    脱离数据库管理工具,想直接将select出来的数据导出到一个文件中。使用sql语句:SELECTfild_nameFROMtable_nameINTOOUTFILE'配置文件夹路径/b.xlsx';说明:配置文件夹路径是mysql配置文件中的配置如果不能顺利使用,可能需要修改配置。一、MYSQL配置1.1......
  • excel总结遗留问题解决
    excel遗留问题解决powerquery这是powerbi中的一部分,excel2016以后集成了powerquery,用于做数据清洗。一般过程是数据导入powerquery,经过powerquery清洗,然后上载到excel的表,数据透视表等以共使用。插入之定义列,然后使用公式生成新的列数据?函数配合条件选择使用......
  • Exceljs 实现html table转Excel
    在Vue3项目中将包含图片的HTML表格转换为Excel文件,你可以使用exceljs库,并结合前端技术来处理图片和表格数据。下面是一个在Vue3项目中实现的示例:安装依赖首先,确保你已经安装了exceljs库。你可以通过npm安装它:npminstallexceljs示例代码以下示例展示了如何......
  • 记一次微信聊天记录导出工具的折腾
    目前的微信app(iOS端v8.0.46)聊天记录中,允许用户基于图片/视频进行筛选单个或者少量保存到本机没啥问题但是如果你量很大,不好意思,有批量操作功能,但是我不支持全选,因为我批量操作单次最多只支持9个文件就是玩儿!前提说明本文方法仅适用于iOS本次折腾实现的目......
  • 前端导入导出文件(前后端不分离)
      有时候在对硬件传送过来的数据进行处理后,需要将这些数据显示在折线图上,从而来观察这些数据是怎样变化的,这个好办,但有时候又要求需要将折线图上面显示的数据全部导出到一个文件中,并且有时候又要求在文件中改变数据后,再将文件中的数据重新导入到折线图中,哪有该如何写呢? ......
  • C#读取BIFF4格式的Excel文件
    使用NPOI读取这种格式的Excel文件时会报错:ThesupplieddataappearstobeinBIFF4format.HSSFonlysupportstheBIFF8format,tryOldExcelExtractor如果使用OldExcelExtractor类的话,只能提取成文本,无法结构化读取。 使用ExcelDataRead库https://github.com/ExcelDat......