在本文中,我将展示如何使用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')
})
就这样!