HTML转成PDF的4个前端方法----但都被我拒绝了,我选择后端方法(这才是吊!)
在本文中,我将展示如何使用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/)
}
<buttononClick={this.savePDF}>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打印规则:如果你的用户受过足够的教育,知道如何把页面内容打印到文件,并且你的页面相对简单,那么它可能是最轻松的解决方案。正如你在我们的案例中所看到的,事实并非如此。
上面是前端大佬们喜欢用的工具,我后端看着那些node.js就烦。所以。我使用了另一种
linux使用wkhtmltopdf
具体的使用方法是:
http://www.saybyebad.com/article/47.html
以及:
https://segmentfault.com/a/1190000018765575?utm_source=sf-related
以及:centos安装wkhtmltopdf的方法
https://blog.csdn.net/qw_xingzhe/article/details/80607283
(测试方法:wkhtmltopdf http://www.baidu.com ./test.pdf)
https://blog.csdn.net/xcc_2269861428/article/details/85247225
安装不同的版本,这个好像是最新的版本安装方法
https://ywnz.com/linuxrj/8026.html
另外还有安装方法:
https://www.cnblogs.com/houss/p/11940381.html
符合我的终极方法
https://blog.junphp.com/details/306.jsp
http://www.ptbird.cn/wkhtmltopdf-html-to-pdf.html
再次发一个php的实现方法
https://blog.csdn.net/qq_14873105/article/details/51394026
https://www.it610.com/article/1280220867766272000.htm
具体的配置方法
https://segmentfault.com/a/1190000018988358?utm_source=sf-related
2023年安装测试这个
https://www.cnblogs.com/TwoBamboo/p/16672385.html