初探JavaScript PDF blob转换为Word docx方法

￡神魔★判官ぃ 2022-08-28 04:59 352阅读 0赞

# PDF转WORD为什么是历史难题 #

PDF 转Word 是一个非常非常普遍的需求，可谓人人忌危，为什么如此普遍的需求，却如此难行呢，还得看为什么会有这样的一个需求：

PDF文档遵循iOS32000的规范是由Adobe 公司推出的文档格式，之所以应用如此广泛，是因为PDF精确定位了每个字符的坐标、根据坐标绘制的各种形状，使用PDF格式传输和打印文档可以保证格式的一致性，然后很多PDF文件是可用于阅读，展示，打印，但编辑起来是非常困难，如格式调整，文字修改，样式调整等，那么就衍生了PDF 转Word这一历史性的需求，但因为两者之间采用的编码规范以及布局机制的完全不一致，导致转换起来会非常复杂，一般的工具不是格式错乱，就是内容错乱，很难达到客户的原生期望。

其难点在于建立从PDF基于元素位置的格式到Word基于内容的格式的映射。PDF文档实际并不存在段落、表格的概念，PDF转Word要做的就是将PDF文档中“横、竖线条围绕着文本”解析为Word的“表格”将“文本及下方的一条横线”解析为“文本下划线”等等。

两个工具两套规则，自古以来两个工具之间的兼容转换，除非是为一家所有，会有通用的标准和接口预留，达到很好的兼容性，但 Adobe和微软都是巨大的科技企业，且两款软件功能都是非常强大且覆盖面全，要做到完美的匹配所有规则更是非常苦难。

对于报表用户来说，很多用户会将报表理解为报告，报告自然会联想到Word，那么就很希望在页面中展示的内容能够成 Word 文件来进行存档，编辑等作用。

ActiveReportsJS 是前端的报表开发工具，不与后端关联，因此想要将展示的HTML 生成Word，研发团队经过一些调研发现整个过程会非常复杂非常困难，正如他们反馈：“不是一个sprint 能解决的问题”，就PDF.js背后都有强大的Mozilla支撑，更何况Word文档是依托微软的Offic开发组件去生成的。

但在实际接触客户的时候，许多用户都会来询问相关内容包括如何用报表设计类似审批表、人事履历表、检测报告等很常见的Word报告。用户对结果都比较满意，但唯一用户不满的是报表结果只能生成pdf。 **这是传统，这也是核心需求，也是痛点。**

本葡萄就有些很着急，于是不信这个邪，在前端工具如此丰富的情况下，竟没有一个这样可用的工具？

开始搜索，打开google，榨干全部脑汁的词汇量输入了我需要的关键词，搜索到了以下结果。

![198b304a813b2893da0e9d74fe41bae2.png][]

乍一看，第一条完全吻合，Node.js 虽说是服务端也不是不可以接受，只要有方案即可。

# 使用cloudmersive-convert-api-client 实现任意文件格式的转换 #

https://cloudmersive.medium.com/how-to-convert-pdf-to-word-docx-format-in-node-js-30291f7c446b

看着非常有戏

![609f3d343bfdcb9f3137e3149a168a21.png][]

代码简单：

![605399b92aaeaa65c173e6fcdbffdacd.png][]

但仔细看看代码， \*\*果然老天在为我们送东西的时候都在背后的标好了价格 ：

![99c5fc4895fc772b6e3caadb2a9ec757.png][]

心想如果可以，付费就付费吧， **毕竟我们也是做付费商业软件的专业er**，版权意识还是需要有的。

点击登录，用谷歌账号登陆成功后，即可在项目中引用cloudmersive-convert-api-client 安装包。

该JS 库提供了将近几十种的API及Class用于处理转换不同的格式文件：除了将PDF转Word外，还有其他发的文件格式转换，使用起来也是非常简单，

![786cd1937c1bff6d796a9aae85954c6c.png][]

## 转换结果测评： ##

可以识别本地的PDF 文件，转换结果：

1.  能够保证90%的格式和样式，达到要求
2.  图片可直接导入
3.  背景色无法保留
4.  表格无法直接导入为Word的表格，只能作为但文本
5.  页眉页脚信息无法直接导入为Word的页眉页脚，只作为文本
6.  部分内容丢失

![a0199fd53ac0d42615d5dbcdd6d8efa1.png][]

![f77d5aabbb677ccb94c2890a6db49870.png][]

![fb9c74a27e533d8d5af5dce849eae55e.png][]

*  产品价格

因为整个转换API 只是CloudMersive 的一个API功能，整个产品还附加其他的安全检验等功能，因此产品是按月及并发数收费的。大家可自行搜索了解，不过他们网站倒是提供好了几个文件转换的工具非常好用，无需登录直接获取转换结果

https://cloudmersive.com/tools

![7b68852e46800772ce47b92fddd8f083.png][]

# 尝试既然有PDF流直接暴力转换Word文档，可否？ #

通过搜索发现PDF对象流直接用JS 转换为Word 文件是非常困难的， 而且经过验证ARJS 导出PDF 文件可以用Word软件打开，那么突然想到是否可以找一个中间件，将PDF流直接转换为doc或docx格式，但搜索一番，尝试之后，只是在.pdf前面加了document.docx.pdf

该方法尝试失败。

![653ba65260bf8cde2f994cb3959ca677.png][]

跟技术大咖聊了之后， **才发现**pdf和word虽然本质都是二进制流，但内部的声明等都是各自文件特有的属性，因此不能直接转换，简而言之就是是什么文件流就只能保存什么文件流。且PDF和Word是两大技术公司背书，直接转换得用专业的工具，因此此路不通 。

# 曲线救Coder: HTML 转换PDF 大工将成？ #

于是乎，退而求其次，HTML是万能的，HTML 可以转万物，HTML 转PDF， HTML 转图片，HTML 转Excel等等等，那么 ActiveReportsJS 提供了可将报表导出为HTML 文件且格式完全一致，那么方法来了，我直接使用HTML 转 Word不是更方便些？Google搜索果然此类资料比PDF 转Word多了百倍，而且看代码也是操作非常简单：

https://jscodemine.grapecity.com/share/Itym7G5fAUSWY4ffuu2cJw/

只需3步骤：

1.将报表导出HTML

`var pageReport = new ARJS.PageReport(); pageReport.load('./BandedReport.rdlx-json') .then(function() { return pageReport.run() }) .then(function(pageDocument) { return HTMLExport.exportDocument(pageDocument) })`

2.加工HTML 代码增加office 标记

![6a987165b92db931b6ad62fa99270d2d.png][]

3.创建 a 标签，直接下载 doc格式

`var fileDownload = document.createElement("a"); document.body.appendChild(fileDownload); fileDownload.href = sourceHTML; fileDownload.download = 'document.doc'; fileDownload.click(); document.body.removeChild(fileDownload);`

看看结果：效果很Nice

![1e52b69dec7f3c6eaca44ab1351c28e4.png][]

## 转换结果测评： ##

1.  样式丢失，包括字体颜色，背景色，形状
2.  图像丢失
3.  表格可以直接导入为Word表格
4.  图标保留

![4bde675238aa5352b5ab77a23be43bfa.png][]

![18cd4388735d1c8d520b6c3d5fde8c60.png][]

# 4.总结 #

两种转化结果总结如下：

![0a3d3a0276a13e41f3d03cabad2b0092.png][]

通过一番尝试也算是有一个Workaround，考虑到报告类的报表一般以文本内容为主，样式也比较朴素，所以使用html到Word转换不失为一个快速简洁的方法，大部分需要保存为Word 还是为了进行二次编辑。本葡萄也在努力寻找HTML 转Word 样式保留的方法，有新的进展会给大家更新第二篇。

> 转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。

*  [Wiki百科：PDF介绍][Wiki_PDF]
 *  [Wiki 百科：Word介绍][Wiki _Word]
 *  [pdf.js analog for Word Documents][]
 *  [纯前端报表控件][Link 1]ActiveReportsJS

[198b304a813b2893da0e9d74fe41bae2.png]: /images/20220828/9d53713a56d04963bce460f7d63a2d61.png
[609f3d343bfdcb9f3137e3149a168a21.png]: /images/20220828/43c3a1a5573a490da340ae3bc5b9c050.png
[605399b92aaeaa65c173e6fcdbffdacd.png]: /images/20220828/fa392752f9894552af410860552fb9bf.png
[99c5fc4895fc772b6e3caadb2a9ec757.png]: /images/20220828/370992824e38459da14b09e1d32d9819.png
[786cd1937c1bff6d796a9aae85954c6c.png]: /images/20220828/ac69f0f25aee44b2a7c4f2edbd99f752.png
[a0199fd53ac0d42615d5dbcdd6d8efa1.png]: /images/20220828/3e5c76c473d9493198fbd65978e99997.png
[f77d5aabbb677ccb94c2890a6db49870.png]: /images/20220828/63c50ee3cac4424e950bfcd47bf37b8c.png
[fb9c74a27e533d8d5af5dce849eae55e.png]: /images/20220828/a11f32b14b7c4f18ad0a7f09da371fa0.png
[7b68852e46800772ce47b92fddd8f083.png]: /images/20220828/293beaa9989c4f30914e153348385cba.png
[653ba65260bf8cde2f994cb3959ca677.png]: /images/20220828/59b4fdb7c42a42a8a34055e7321aef85.png
[6a987165b92db931b6ad62fa99270d2d.png]: /images/20220828/e6bd57803df046a6afa4951e9c2fe37e.png
[1e52b69dec7f3c6eaca44ab1351c28e4.png]: /images/20220828/d7a9334eb0e840e7a4d968ac9dbe2535.png
[4bde675238aa5352b5ab77a23be43bfa.png]: /images/20220828/cbdc8844233444a7966caab382e4c3e4.png
[18cd4388735d1c8d520b6c3d5fde8c60.png]: /images/20220828/b81339e7a4a949fb84b5359d70f325ad.png
[0a3d3a0276a13e41f3d03cabad2b0092.png]: /images/20220828/27fbd64651e94c38981bbc0f77d83c79.png
[Wiki_PDF]: https://en.wikipedia.org/wiki/PDF
[Wiki _Word]: https://en.wikipedia.org/wiki/Microsoft_Word?wprov=srpw1_2
[pdf.js analog for Word Documents]: https://stackoverflow.com/questions/14144069/pdf-js-analog-for-word-documents
[Link 1]: https://www.grapecity.com.cn/developer/activereportsjs/scenarios/mobile