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

DF转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文档是依托微软的Office开发组件去生成的。

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

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

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

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

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

看着非常有戏。

代码简单：

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

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

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

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

转换结果测评：

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

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

产品价格

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

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

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

该方法尝试失败。

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

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

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

只需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 标记

  var header = "<html xmlns:o='urn:schemas-microsoft-com:office:office' "+
            "xmlns:w='urn:schemas-microsoft-com:office:word' "+
            "xmlns='http://www.w3.org/TR/REC-html40'>"
                  let reg=/<html>/;
                
                  console.log(reg.test(htmlcode));
                 var test= htmlcode.replace(reg,header);
                 var sourceHTML='data:application/vnd.ms-word;charset=utf-8,'+encodeURIComponent(test);

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

转换结果测评：

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

4.总结

两种转化结果总结如下：

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

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。微信公众号：“葡萄城社区”。

Wiki百科：PDF介绍
Wiki 百科：Word介绍
pdf.js analog for Word Documents
纯前端报表控件 ActiveReportsJS

述

.NET的SelectPdf Html到Pdf转换器-社区版是.NET的SelectPdf库中提供的功能强大的html到pdf转换器的免费版本。
转换器提供了许多强大的选项（将任何网页转换为pdf，将任何html字符串转换为pdf，html5 / css3 / javascript支持，页眉和页脚支持等），唯一的限制是它最多可以生成pdf文档。5页长。
.NET的免费HTML至Pdf转换器–社区版功能：最多生成5页pdf文档，将任何网页转换为pdf，将任何原始html字符串转换为pdf，设置pdf页面设置（页面大小，页面方向，页面边距），在转换过程中调整内容大小以适合pdf页面，设置pdf文档属性，设置pdf查看器首选项，设置pdf安全性（密码，权限），设置转换延迟和网页导航超时，自定义页眉和页脚，在页眉中支持html和页脚，自动和手动分页符，在每个页面上重复html表头，支持@media类型屏幕和打印，支持内部和外部链接，基于html元素自动生成书签，支持HTTP标头，支持HTTP cookie，支持需要身份验证的网页，支持代理服务器，启用/禁用javascript，修改颜色空间，多线程支持，HTML5 / CSS3支持，Web字体支持等等。

代码实现

1、nuget 引用

Install-Package Select.HtmlToPdf

2、方法

using SelectPdf;using System.Collections.Specialized;using System.IO;using System.Web;
namespace BQoolCommon.Helpers.File{ public class WebToPdf { public WebToPdf() { //SelectPdf.GlobalProperties.LicenseKey = "your-license-key"; }
 /// <summary> /// 將 Html 轉成 PDF，並儲存成檔案 /// </summary> /// <param name="html">html</param> /// <param name="fileName">絕對路徑</param> public void SaveToFileByHtml(string html, string fileName) { var doc = SetPdfDocument(html); doc.Save(fileName); }
 /// <summary> /// 傳入 Url 轉成 PDF，並儲存成檔案 /// </summary> /// <param name="url">url</param> /// <param name="fileName">絕對路徑</param> /// <param name="httpCookies">Cookies</param> public void SaveToFileByUrl(string url, string fileName, NameValueCollection httpCookies) { var doc = SetPdfDocument(url, httpCookies); doc.Save(fileName); }
 /// <summary> /// 將 Html 轉成 PDF，並輸出成 byte[] 格式 /// </summary> /// <param name="html">html</param> /// <returns></returns> public byte[] GetFileByteByHtml(string html) { var doc = SetPdfDocument(html); return doc.Save(); }
 /// <summary> /// 傳入 Url 轉成 PDF，並輸出成 byte[] 格式 /// </summary> /// <param name="url">url</param> /// <param name="httpCookies">Cookies</param> /// <returns></returns> public byte[] GetFileByteByUrl(string url, NameValueCollection httpCookies) { var doc = SetPdfDocument(url, httpCookies); return doc.Save(); }
 /// <summary> /// 將 Html 轉成 PDF，並輸出成 Stream 格式 /// </summary> /// <param name="html">html</param> /// <returns></returns> public Stream GetFileStreamByHtml(string html) { var doc = SetPdfDocument(html); var pdfStream = new MemoryStream();
 doc.Save(pdfStream); pdfStream.Position = 0;
 return pdfStream; }
 /// <summary> /// 傳入 Url 轉成 PDF，並輸出成 Stream 格式 /// </summary> /// <param name="html">html</param> /// <returns></returns> public Stream GetFileStreamByUrl(string url, NameValueCollection httpCookies) { var doc = SetPdfDocument(url, httpCookies); var pdfStream = new MemoryStream();
 doc.Save(pdfStream); pdfStream.Position = 0;
 return pdfStream; }
 private PdfDocument SetPdfDocument(string html) { var converter = new HtmlToPdf();
 converter.Options.WebPageWidth = 1200; html = HttpUtility.HtmlDecode(html);
 return converter.ConvertHtmlString(html); }
 private PdfDocument SetPdfDocument(string url, NameValueCollection httpCookies) { var converter = new HtmlToPdf(); converter.Options.WebPageWidth = 1200;
 if (httpCookies !=  && httpCookies.Count != 0) { converter.Options.HttpCookies.Add(httpCookies); }
 return converter.ConvertUrl(url); }
 }}

3、调用

/// <summary> /// 下载pdf /// </summary> public void Downpdf(string data) { var stream = new BQoolCommon.Helpers.File.WebToPdf().GetFileStreamByHtml(Gethtml(data)); Response.Clear(); //二进制流数据（如常见的文件下载） Response.ContentType = "application/octet-stream"; //通知浏览器下载文件而不是打开 Response.AddHeader("Content-Disposition", "attachment; filename=" + HttpUtility.UrlEncode("Profit and Loss Statement.pdf", System.Text.Encoding.UTF8)); var bytes = StreamToBytes(stream); Response.BinaryWrite(bytes); Response.Flush(); stream.Close(); stream.Dispose();
 Response.End(); }

那么如何获取指定页面的html 呢传入对应的model 获得指定动态的html

private string Gethtml(string data) { string str = "";
 str = this.ControllerContext.RenderViewToString("ProfitDetails", data);
 return str; }

using BQoolCommon.Helpers.Format;using Newtonsoft.Json;using OrdersManager.Models.ViewModel.Report;using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Web;using System.Web.Mvc;
namespace OrdersManager.Web.Infrastructure{ public static class HelperExtensions { public static string RenderViewToString(this ControllerContext context, string viewName, string data) { if (string.IsOrEmpty(viewName)) viewName = context.RouteData.GetRequiredString("action");
 context.Controller.ViewData.Model = JsonConvert.DeserializeObject<ProfitDetailsmodel>(StringTools.Base64Decode(StringTools.Base64Decode(data)));
 using (var sw = new StringWriter()) { ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(context, viewName); var viewContext = new ViewContext(context, viewResult.View, context.Controller.ViewData, context.Controller.TempData, sw); try { viewResult.View.Render(viewContext, sw); } catch (Exception ex) { throw; }
 return sw.GetStringBuilder().ToString(); } } }}

参考文档

https://www.nuget.org/packages/Select.HtmlToPdf/

一篇文章我们介绍了一个html/xml解析器——htmlparser，这篇文章我们介绍另外一个解析模块htmlparser2，后者是对前者的重构，同时对前者的API做了部分兼容。

用法简介

安装

const { Parser } = require('htmlparser2');
const parser = new Parser(handler, options);
parser.parseComplete('html/xml内容');

写法

const { Parser } = require('htmlparser2');
const parser = new Parser(handler, options);
parser.parseComplete('html/xml内容');

htmlparser2提供了一个解析器——Parser，初始化它至少需要一个handler，options是可选的。

handler是一个对象，在这个对象上可以设置很多的钩子函数，Parser解析时会在每个阶段运行对应的钩子函数。

以下是可以设置的所有的钩子函数，

onopentag(<str> name, <obj> attributes)

onopentagname(<str> name)

onattribute(<str> name, <str> value)

ontext(<str> text)

onclosetag(<str> name)

onprocessinginstruction(<str> name, <str> data)

oncomment(<str> data)

oncommentend()

oncdatastart()

oncdataend()

onerror(<err> error)

onreset()

onend()

htmlparser模块是通过正则表达式来解析html内容的，而htmlparser2则不同，它会按顺序读取html的每个字符，并且推测后面字符是标签名、属性还是其他的类型，所以htmlparser2在解析完每一个标签后都会运行相应的钩子函数。

先来看一下例子，

图1

图1中设置了所有的钩子函数以便来说明每个钩子函数的作用，运行一下，

图2

对照图1和图2就能看出来每个钩子函数的运行时机，这其中有以下几个钩子函数需要注意一下。

oncdatastart和oncdataend会在解析<![CDATA[文本]]>标签时触发，但是触发的前提是选项设置了recognizeCDATA=true或者xmlMode=true；
onprocessinginstruction会在解析<!xxyy>或者<?xxyy>这样的标签时触发，xx和yy中间可以有分隔符（斜杠或者空格），分隔符前面的字符串就是钩子函数中的name的值；
运行parseComplete方法会执行reset钩子函数，如果仅仅执行parser的write或者end方法并不会执行reset方法。

除了自定义handler以外，htmlparser2还提供了几个handler，比如DomHandler，用法如下：

图3

运行一下，我们看看结果，

图4

如果4所示，DomHandler处理的结果是以数组的形式输出的，在每个单元数据中还可以拿到上一个、下一个以及父节点的数据。

htmlparser2还可以通过操作流Stream解析内容，写法如下：

图5

总结

这篇文章和上一篇是姊妹篇，都是介绍解析html/xml内容的模块，通过对比，我们发现htmlparser2模块功能更强大一些，也更灵活一些，同时也兼容htmlparser模块的一些接口。虽然两者功能类似，但是这给了我们更多的选择性。

喜欢我的文章就关注我吧，有问题可以发表评论，我们一起学习，共同成长！

在线咨询

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

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

DF转WORD为什么是历史难题

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

转换结果测评：

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

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

转换结果测评：

4.总结

述

代码实现

参考文档

用法简介

总结

您的项目需求