在本文中，我將展示如何使用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