-
Blob把html导出为excel文件
1、问题描述
今天碰到了一个需求，是要求把如下asp页面上显示的报表导出成为excel文件。
原本我是打算直接在asp页面输出成csv文件的。
但是这样子不行，因为报表里面有一对多的关系，一行对应多行这种，通过respose.write xxx输出成csv文件很难实现。
我大概试了一下，导出的csv文件非常乱，行与行之间，原来的一对多关系全没了。
2、产生原因
csv文件其实是用逗号分割每个元素的，因此如果用excel打开就会形成单元格表格这种的展示效果。但是因为我要导出的报表里面有一对多的关系，但csv无法去进行单元格合并操作。
3、解决方法
我问了同事，才知道可以通过使用Blob直接把html导出成为一个excel。
Blob - Web API 接口参考 | MDN (mozilla.org)
一个测试页面
testxlsx.asp
- <%
- Response.ContentType="application/vnd.ms-excel"
- Response.Charset="gb2312"
- Response.AddHeader "Content-Disposition","attachment;filename=test.xls"
- %>
class="table-data table-bordered table">
"2" nowrap="">PO "2" nowrap="">POPN "2" nowrap="">PN "2" nowrap="">品牌 "2" nowrap="">产品描述 "2" nowrap="">采购数量 "2" nowrap="">箱号 "3" nowrap="">入库 "3" nowrap="">出库 ......省略其余的html代码
完整的导出功能代码
- <button name="btnExport" id="btnExport" class="btn">导出Excelbutton>
PO POPN PN 品牌 产品描述 ......省略一些报表的html代码导出的excel里面的显示效果
如果blob导出的excel出现中文乱码如下：
在使用blob读取内容时，需要加上‘\ufeff’ ， 使文件以utf-8的编码模式， 同时解决中文乱码问题。
const blob = new Blob(["\ufeff",html], {type: 'text/plain'});4、总结
今天这个问题让我想起了我去年在上家公司写vue的时候，也是导出excel文件的问题。Vue中实现自定义excel下载_金斗潼关的博客-CSDN博客
当时的处理方法是通过在后端查出数据然后返回一个list到前端，由前端合成一个excel导出。不管是后端合成excel还是前端合成excel，相应的处理代码都比较长，比较复杂。今天接触了Blob这种操作文件对象的方式，感觉Blob简直就是文件导出的神器！你不用考虑怎么去合成一个excel，直接传给它html代码，它就能根据html的样式导出和html相同显示效果的文件。其实Blob就相当于你复制了网页上的东西，然后将其粘贴到excel中去。
不过到底用不用Blog还是用其他的文件处理工具包还是要根据具体场景，具体问题具体分析的！
关于Blob还有很多强大的功能，因为暂时没用到所以我就不深究了，总之把它当成一个工具吧，需要的时候再进一步学习。
Blob - Web API 接口参考 | MDN (mozilla.org) 这个是Blob文档，不过感觉写的有点简略了。
5、参考资料
【使用Blob导出json数据】_xuehao1997的博客-CSDN博客
.net使用Blob导出数据为Excel，纯前端操作_Boogaloo-Jer的博客-CSDN博客
Blob - Web API 接口参考 | MDN (mozilla.org)
为excel文档设置mime类型 | 码农家园 (codenong.com)
js blob导出文件 文件下载 中文乱码的问题_jsp blob 乱码_Xxxuaneer的博客-CSDN博客
- 相关阅读:
Prometheus系列第九篇一核心之micrometer架构
React自定义Hook之useRequest
Thymeleaf简要学习笔记（转自代码重工）
基于Dlib训练自已的人脸数据集提高人脸识别的准确率
解决使用数组产生的堆问题
JavaScript 防抖 (vue中写法总结)
【接口测试】JMeter调用JS文件实现RSA加密
HandlerMapping类是如何找到相应的controller呢？
物流批量查询：一键查询全部物流信息，高效管理快递
数据库——知识1
- 原文地址：https://blog.csdn.net/weixin_42032770/article/details/127655942
