HTML转成PDF的4个方法介绍-----

标签：维护   file   htm   好用   ali   rom   RoCE   set   array   

在本文中，我将展示如何使用Node.js、Puppeteer、headlessChrome和Docker从样式复杂的React页面生成PDF文档。

背景：

几个月前，一个客户要求我们开发一个功能，用户可以得到PDF格式的React页面内容。该页面基本上是患者病例的报告和数据可视化结果，其中包含许多SVG。另外还有一些特殊的请求来操纵布局，并对HTML元素进行一些重新排列。因此与原始的React页面相比，PDF中应该有不同的样式和额外的内容。

　　由于这个任务比用简单的CSS规则解决要复杂得多，所以我们先探讨了可能的实现方法。我们找到了3个主要解决方案。这篇博文将指导你了解它们的可能性并最终实施。

　　在客户端还是服务器端生成？

　　在客户端和服务器端都可以生成PDF文件。但是让后端处理它可能更有意义，因为你并不想耗尽用户浏览器可以提供的所有资源。

　　即便如此，我仍然会展示这两种方法的解决方案。

方案1：从DOM制作屏幕截图

　　乍一看，这个解决方案似乎是最简单的，事实证明的确是这样，但它有其自身的局限性。如果你没有特殊需求，例如在PDF中选择文本或对文本进行搜索，那么这就是一种简单易用的方法。

　　此方法简单明了：从页面创建屏幕截图，并把它放到PDF文件中。非常直截了当。我们可以使用两个包来实现：

　　Html2canvas，根据DOM生成截图

　　jsPdf，一个生成PDF的库

　　开始编码：

　　npminstallhtml2canvasjspdf

　　importhtml2canvasfrom‘html2canvas‘

　　importjsPdffrom‘jspdf‘

　　functionprintPDF(){

　　constdomElement=document.getElementById(‘your-id‘)

　　html2canvas(domElement,{onclone:(document)=>{

　　document.getElementById(‘print-button‘).style.visibility=‘hidden‘

　　}})

　　.then((canvas)=>{

　　constimg=canvas.toDataURL(‘image/png‘)

　　constpdf=newjsPdf()

　　pdf.addImage(imgData,‘JPEG‘,0,0,width,height)

　　pdf.save(‘your-filename.pdf‘)

　　})

　　就这样！

　　请注意html2canvas的onclone方法。当你在截图之前需要操纵DOM（例如隐藏打印按钮）时，它是非常方便的。我看到过很多使用这个包的项目。但不幸的是，这不是我们想要的，因为我们需要在后端完成对PDF的创建工作。

方案2：只使用PDF库

　　NPM上有几个库，如jsPDF（如上所述）或PDFKit。他们的问题是，如果我想使用这些库，我将不得不重新调整页面结构。这肯定会损害可维护性，因为我需要将所有后续更改应用到PDF模板和React页面中。

　　请看下面的代码。你需要亲自手动创建PDF文档。你需要遍历DOM并找出每个元素并将其转换为PDF格式，这是一项繁琐的工作。必须找到一个更简单的方法。

　　

　　doc=newPDFDocument

　　doc.pipefs.createWriteStream(‘output.pdf‘)

　　doc.font(‘fonts/PalatinoBold.ttf‘)

　　.fontSize(25)

　　.text(‘Sometextwithanembeddedfont!‘,100,100)

　　doc.image(‘path/to/image.png‘,{

　　fit:[250,300],

　　align:‘center‘,

　　valign:‘center‘

　　});

　　doc.addPage()

　　.fontSize(25)

　　.text(‘Hereissomevectorgraphics...‘,100,100)

　　doc.end()

　　这段代码段来自PDFKit文档。但是如果你的目标是直接生成一个PDF文件，而不是对一个已经存在的（并且不断变化的）HTML页面进行转换，它还是很有用的。

最终方案3：基于Node.js的Puppeteer和HeadlessChrome

　　什么是Puppeteer？其文档中写道：

　　Puppeteer是一个Node库，它提供了一个高级API来控制DevTools协议上的Chrome或Chromium。Puppeteer默认以headless模式运行Chrome或Chromium，但其也可以被配置为完整的（non-headless）模式运行。

　　它本质上是一个可以从Node.js运行的浏览器。如果你读过它的文档，其中首先提到的就是你可以用Puppeteer来生成页面的截图和PDF。优秀！这正是我们想要的。

　　先用npmiipuppeteer安装Puppeteer，并实现我们的功能。

　　constpuppeteer=require(‘puppeteer‘)

　　asyncfunctionprintPDF(){

　　constbrowser=awaitpuppeteer.launch({headless:true});

　　constpage=awaitbrowser.newPage();

　　awaitpage.goto(‘https://blog.risingstack.com‘,{waitUntil:‘networkidle0‘});

　　constpdf=awaitpage.pdf({format:‘A4‘});

　　awaitbrowser.close();

　　returnpdf

　　})

　　这是一个简单的功能，可导航到URL并生成站点的PDF文件。

　　首先，我们启动浏览器（仅在headless模式下支持PDF生成），然后打开新页面，设置视口，并导航到提供的URL。

　　设置waitUntil:‘networkidle0‘选项意味着当至少500毫秒没有网络连接时，Puppeteer会认为导航已完成。（可以从APIdocs获取更多信息。）

　　之后，我们将PDF保存为变量，关闭浏览器并返回PDF。

　　注意：page.pdf方法接收options对象，你可以使用‘path‘选项将文件保存到磁盘。如果未提供路径，则PDF将不会被保存到磁盘，而是会得到缓冲区。（稍后我将讨论如何处理它。）

　　如果需要先登录才能从受保护的页面生成PDF，首先你要导航到登录页面，检查表单元素的ID或名称，填写它们，然后提交表单：

　　awaitpage.type(‘#email‘,process.env.PDF_USER)

　　awaitpage.type(‘#password‘,process.env.PDF_PASSWORD)

　　awaitpage.click(‘#submit‘)

　　要始终将登录凭据保存在环境变量中，不要硬编码！

　　样式控制

　　Puppeteer也有这种样式操作的解决方案。你可以在生成PDF之前插入样式标记，Puppeteer将生成具有已修改样式的文件。

　　awaitpage.addStyleTag({content:‘.nav{display:none}.navbar{border:0px}#print-button{display:none}‘})

　　将文件发送到客户端并保存

　　好的，现在你已经在后端生成了一个PDF文件。接下来做什么？

　　如上所述，如果你不把文件保存到磁盘，将会得到一个缓冲区。你只需要把含有适当内容类型的缓冲区发送到前端即可。

　　printPDF.then(pdf=>{

　　res.set({‘Content-Type‘:‘application/pdf‘,‘Content-Length‘:pdf.length})

　　res.send(pdf)

　　现在，你只需在浏览器向服务器发送请求即可得到生成的PDF。

　　functiongetPDF(){

　　returnaxios.get(${API_URL}/your-pdf-endpoint,{

　　responseType:‘arraybuffer‘,

　　headers:{

　　‘Accept‘:‘application/pdf‘

　　}

　　})

　　一旦发送了请求，缓冲区的内容就应该开始下载了。最后一步是将缓冲区数据转换为PDF文件。

　　savePDF=()=>{

　　this.openModal(‘Loading…’)//openmodal

　　returngetPDF()//APIcall

　　.then((response)=>{

　　constblob=newBlob([response.data],{type:‘application/pdf‘})

　　constlink=document.createElement(‘a‘)

　　link.href=window.URL.createObjectURL(blob)

　　link.download=your-file-name.pdf

　　link.click()

　　this.closeModal()//closemodal

　　})

　　.catch(err=>/errorhandling/)

　　}

　　SaveasPDF

　　就这样！如果单击“保存”按钮，那么浏览器将会保存PDF。

　　在Docker中使用Puppeteer

　　我认为这是实施中最棘手的部分——所以让我帮你节省几个小时的百度时间。

　　官方文档指出“在Docker中使用headlessChrome并使其运行起来可能会非常棘手”。官方文档有疑难解答部分，你可以找到有关用Docker安装puppeteer的所有必要信息。

　　如果你在Alpine镜像上安装Puppeteer，请确保在看到页面的这一部分时再向下滚动一点。否则你可能会忽略一个事实：你无法运行最新的Puppeteer版本，并且你还需要用一个标记禁用shm：

　　constbrowser=awaitpuppeteer.launch({

　　headless:true,

　　args:[‘--disable-dev-shm-usage‘]

　　});

　　否则，Puppeteer子进程可能会在正常启动之前耗尽内存。

方案3+1：CSS打印规则

　　可能有人认为从开发人员的角度来看，简单地使用CSS打印规则很容易。没有NPM模块，只有纯CSS。但是在跨浏览器兼容性方面，它的表现如何呢？

　　在选择CSS打印规则时，你必须在每个浏览器中测试结果，以确保它提供的布局是相同的，并且它不是100％能做到这一点。

　　例如，在给定元素后面插入一个break-after并不是一个多么高深的技术，但是你可能会惊讶的发现要在Firefox中使用它需要使用变通方法。

　　除非你是一位经验丰富的CSS大师，在创建可打印页面方面有很多的经验，否则这可能会非常耗时。

　　如果你可以使打印样式表保持简单，打印规则是很好用的。

　　让我们来看一个例子吧。

　　@mediaprint{

　　.print-button{

　　display:none;

　　}

　　.contentp{

　　break-after:always;

　　}

　　}

　　上面的CSS隐藏了打印按钮，并在每个p之后插入一个分页符，其中包含content类。有一篇很棒的文章总结了你可以用打印规则做什么，以及它们有什么问题，包括浏览器兼容性。

　　考虑到所有因素，如果你想从不那么复杂的页面生成PDF，CSS打印规则非常有效。

总结

　　让我们快速回顾前面介绍的方案，以便从HTML页面生成PDF文件：

　　从DOM产生截图：当你需要从页面创建快照时（例如创建缩略图）可能很有用，但是当你需要处理大量数据时就会有些捉襟见肘。

　　只用PDF库：如果你打算从头开始以编程方式创建PDF文件，这是一个完美的解决方案。否则，你需要同时维护HTML和PDF模板，这绝对是一个禁忌。

　　Puppeteer：尽管在Docker上工作相对困难，但它为我们的实现提供了最好的结果，而且编写代码也是最简单的。

　　CSS打印规则：如果你的用户受过足够的教育，知道如何把页面内容打印到文件，并且你的页面相对简单，那么它可能是最轻松的解决方案。正如你在我们的案例中所看到的，事实并非如此。

HTML转成PDF的4个方法介绍-----

标签：维护   file   htm   好用   ali   rom   RoCE   set   array   

原文地址：https://www.cnblogs.com/cn-oldboy/p/14233292.html