整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          把HTML轉(zhuǎn)成PDF的4個(gè)方案及實(shí)現(xiàn)方法

          本文中,我將展示如何使用 Node.js、Puppeteer、headless Chrome 和 Docker 從樣式復(fù)雜的 React 頁面生成 PDF 文檔。

          背景:幾個(gè)月前,一個(gè)客戶要求我們開發(fā)一個(gè)功能,用戶可以得到 PDF 格式的 React 頁面內(nèi)容。該頁面基本上是患者病例的報(bào)告和數(shù)據(jù)可視化結(jié)果,其中包含許多 SVG。另外還有一些特殊的請(qǐng)求來操縱布局,并對(duì) HTML 元素進(jìn)行一些重新排列。因此與原始的 React 頁面相比,PDF 中應(yīng)該有不同的樣式和額外的內(nèi)容。

          由于這個(gè)任務(wù)比用簡(jiǎn)單的 CSS 規(guī)則解決要復(fù)雜得多,所以我們先探討了可能的實(shí)現(xiàn)方法。我們找到了 3 個(gè)主要解決方案。這篇博文將指導(dǎo)你了解它們的可能性并最終實(shí)施。

          目錄:

          • 在客戶端還是服務(wù)器端生成?
          • 方案1:從 DOM 制作屏幕截圖
          • 方案2:僅使用 PDF 庫
          • 最終方案3:Node.js、Puppeteer 和 Headless Chrome
          • 樣式控制
          • 將文件發(fā)送到客戶端并保存
          • 在 Docker 中使用 Puppeteer
          • 方案3 +1:CSS打印規(guī)則
          • 總結(jié)

          在客戶端還是服務(wù)器端生成?

          在客戶端和服務(wù)器端都可以生成PDF文件。但是讓后端處理它可能更有意義,因?yàn)槟悴⒉幌牒谋M用戶瀏覽器可以提供的所有資源。

          即便如此,我仍然會(huì)展示這兩種方法的解決方案。

          方案1:從 DOM 制作屏幕截圖

          乍一看,這個(gè)解決方案似乎是最簡(jiǎn)單的,事實(shí)證明的確是這樣,但它有其自身的局限性。如果你沒有特殊需求,例如在 PDF 中選擇文本或?qū)ξ谋具M(jìn)行搜索,那么這就是一種簡(jiǎn)單易用的方法。

          此方法簡(jiǎn)單明了:從頁面創(chuàng)建屏幕截圖,并把它放到 PDF 文件中。非常直截了當(dāng)。我們可以使用兩個(gè)包來實(shí)現(xiàn):

          • Html2canvas,根據(jù) DOM 生成截圖
          • jsPdf,一個(gè)生成PDF的庫

          開始編碼:

          npm install html2canvas jspdf

          就這樣!

          請(qǐng)注意 html2canvas 的 onclone方法。當(dāng)你在截圖之前需要操縱 DOM(例如隱藏打印按鈕)時(shí),它是非常方便的。我看到過很多使用這個(gè)包的項(xiàng)目。但不幸的是,這不是我們想要的,因?yàn)槲覀冃枰诤蠖送瓿蓪?duì) PDF 的創(chuàng)建工作。

          方案2:只使用 PDF 庫

          NPM上有幾個(gè)庫,如 jsPDF(如上所述)或PDFKit。他們的問題是,如果我想使用這些庫,我將不得不重新調(diào)整頁面結(jié)構(gòu)。這肯定會(huì)損害可維護(hù)性,因?yàn)槲倚枰獙⑺泻罄m(xù)更改應(yīng)用到 PDF 模板和 React 頁面中。

          請(qǐng)看下面的代碼。你需要親自手動(dòng)創(chuàng)建 PDF 文檔。你需要遍歷 DOM 并找出每個(gè)元素并將其轉(zhuǎn)換為 PDF 格式,這是一項(xiàng)繁瑣的工作。必須找到一個(gè)更簡(jiǎn)單的方法。

          這段代碼段來自 PDFKit 文檔。但是如果你的目標(biāo)是直接生成一個(gè) PDF 文件,而不是對(duì)一個(gè)已經(jīng)存在的(并且不斷變化的)HTML 頁面進(jìn)行轉(zhuǎn)換,它還是很有用的。

          最終方案3:基于 Node.js 的 Puppeteer 和 Headless Chrome

          什么是 Puppeteer?其文檔中寫道:

          Puppeteer 是一個(gè) Node 庫,它提供了一個(gè)高級(jí) API 來控制 DevTools 協(xié)議上的 Chrome 或 Chromium。 Puppeteer 默認(rèn)以 headless 模式運(yùn)行 Chrome 或 Chromium,但其也可以被配置為完整的(non-headless)模式運(yùn)行。

          它本質(zhì)上是一個(gè)可以從 Node.js 運(yùn)行的瀏覽器。如果你讀過它的文檔,其中首先提到的就是你可以用 Puppeteer 來生成頁面的截圖和PDF。優(yōu)秀!這正是我們想要的。

          先用 npmi i puppeteer 安裝 Puppeteer,并實(shí)現(xiàn)我們的功能。

          這是一個(gè)簡(jiǎn)單的功能,可導(dǎo)航到 URL 并生成站點(diǎn)的 PD F文件。

          首先,我們啟動(dòng)瀏覽器(僅在 headless 模式下支持 PDF 生成),然后打開新頁面,設(shè)置視口,并導(dǎo)航到提供的URL。

          設(shè)置 waitUntil:'networkidle0' 選項(xiàng)意味著當(dāng)至少500毫秒沒有網(wǎng)絡(luò)連接時(shí),Puppeteer 會(huì)認(rèn)為導(dǎo)航已完成。 (可以從 API docs 獲取更多信息。)

          之后,我們將 PDF 保存為變量,關(guān)閉瀏覽器并返回 PDF。

          注意:page.pdf 方法接收 options 對(duì)象,你可以使用 'path' 選項(xiàng)將文件保存到磁盤。如果未提供路徑,則 PDF 將不會(huì)被保存到磁盤,而是會(huì)得到緩沖區(qū)。(稍后我將討論如何處理它。)

          如果需要先登錄才能從受保護(hù)的頁面生成 PDF,首先你要導(dǎo)航到登錄頁面,檢查表單元素的 ID 或名稱,填寫它們,然后提交表單:

          要始終將登錄憑據(jù)保存在環(huán)境變量中,不要硬編碼!

          樣式控制

          Puppeteer 也有這種樣式操作的解決方案。你可以在生成 PDF 之前插入樣式標(biāo)記,Puppeteer 將生成具有已修改樣式的文件。

          await page.addStyleTag({ content: '.nav { display: none} .navbar { border: 0px} #print-button {display: none}' })
          

          將文件發(fā)送到客戶端并保存

          好的,現(xiàn)在你已經(jīng)在后端生成了一個(gè) PDF 文件。接下來做什么?

          如上所述,如果你不把文件保存到磁盤,將會(huì)得到一個(gè)緩沖區(qū)。你只需要把含有適當(dāng)內(nèi)容類型的緩沖區(qū)發(fā)送到前端即可。

          現(xiàn)在,你只需在瀏覽器向服務(wù)器發(fā)送請(qǐng)求即可得到生成的 PDF。

          一旦發(fā)送了請(qǐng)求,緩沖區(qū)的內(nèi)容就應(yīng)該開始下載了。最后一步是將緩沖區(qū)數(shù)據(jù)轉(zhuǎn)換為 PDF 文件。

          就這樣!如果單擊“保存”按鈕,那么瀏覽器將會(huì)保存 PDF。

          在 Docker 中使用 Puppeteer

          我認(rèn)為這是實(shí)施中最棘手的部分 —— 所以讓我?guī)湍愎?jié)省幾個(gè)小時(shí)的百度時(shí)間。

          官方文檔指出*“在 Docker 中使用 headless Chrome 并使其運(yùn)行起來可能會(huì)非常棘手”*。官方文檔有疑難解答部分,你可以找到有關(guān)用 Docker 安裝 puppeteer 的所有必要信息。

          如果你在 Alpine 鏡像上安裝 Puppeteer,請(qǐng)確保在看到頁面的這一部分時(shí)再向下滾動(dòng)一點(diǎn)。否則你可能會(huì)忽略一個(gè)事實(shí):你無法運(yùn)行最新的 Puppeteer 版本,并且你還需要用一個(gè)標(biāo)記禁用 shm :

          const browser = await puppeteer.launch({
           headless: true,
           args: ['--disable-dev-shm-usage']
          });
          

          否則,Puppeteer 子進(jìn)程可能會(huì)在正常啟動(dòng)之前耗盡內(nèi)存。

          方案 3 + 1:CSS 打印規(guī)則

          可能有人認(rèn)為從開發(fā)人員的角度來看,簡(jiǎn)單地使用 CSS 打印規(guī)則很容易。沒有 NPM 模塊,只有純 CSS。但是在跨瀏覽器兼容性方面,它的表現(xiàn)如何呢?

          在選擇 CSS 打印規(guī)則時(shí),你必須在每個(gè)瀏覽器中測(cè)試結(jié)果,以確保它提供的布局是相同的,并且它不是100%能做到這一點(diǎn)。

          例如,在給定元素后面插入一個(gè) break-after 并不是一個(gè)多么高深的技術(shù),但是你可能會(huì)驚訝的發(fā)現(xiàn)要在 Firefox 中使用它需要使用變通方法。

          除非你是一位經(jīng)驗(yàn)豐富的 CSS 大師,在創(chuàng)建可打印頁面方面有很多的經(jīng)驗(yàn),否則這可能會(huì)非常耗時(shí)。

          如果你可以使打印樣式表保持簡(jiǎn)單,打印規(guī)則是很好用的。

          讓我們來看一個(gè)例子吧。

          @media print {
           .print-button {
           display: none;
           }
           
           .content div {
           break-after: always;
           }
          }
          

          上面的 CSS 隱藏了打印按鈕,并在每個(gè) div 之后插入一個(gè)分頁符,其中包含content 類。有一篇很棒的文章總結(jié)了你可以用打印規(guī)則做什么,以及它們有什么問題,包括瀏覽器兼容性。

          考慮到所有因素,如果你想從不那么復(fù)雜的頁面生成 PDF,CSS打印規(guī)則非常有效。

          總結(jié)

          讓我們快速回顧前面介紹的方案,以便從 HTML 頁面生成 PDF 文件:

          • 從 DOM 產(chǎn)生截圖:當(dāng)你需要從頁面創(chuàng)建快照時(shí)(例如創(chuàng)建縮略圖)可能很有用,但是當(dāng)你需要處理大量數(shù)據(jù)時(shí)就會(huì)有些捉襟見肘。
          • 只用 PDF 庫:如果你打算從頭開始以編程方式創(chuàng)建 PDF 文件,這是一個(gè)完美的解決方案。否則,你需要同時(shí)維護(hù) HTML 和 PDF 模板,這絕對(duì)是一個(gè)禁忌。
          • Puppeteer:盡管在 Docker 上工作相對(duì)困難,但它為我們的實(shí)現(xiàn)提供了最好的結(jié)果,而且編寫代碼也是最簡(jiǎn)單的。
          • CSS打印規(guī)則:如果你的用戶受過足夠的教育,知道如何把頁面內(nèi)容打印到文件,并且你的頁面相對(duì)簡(jiǎn)單,那么它可能是最輕松的解決方案。正如你在我們的案例中所看到的,事實(shí)并非如此。

          雖然今天是愚人節(jié),但是以上所有內(nèi)容都是在真的!

          作者:瘋狂的技術(shù)宅

          鏈接:https://juejin.im/post/5ca1dc0251882543d569e075

          Number() 轉(zhuǎn)換為數(shù)字, String() 轉(zhuǎn)換為字符串, Boolean() 轉(zhuǎn)化為布爾值。


          JavaScript 數(shù)據(jù)類型

          在 JavaScript 中有 5 種不同的數(shù)據(jù)類型:

          • string

          • number

          • boolean

          • object

          • function

          3 種對(duì)象類型:

          • Object

          • Date

          • Array

          2 個(gè)不包含任何值的數(shù)據(jù)類型:

          • null

          • undefined

          typeof 操作符

          你可以使用 typeof 操作符來查看 JavaScript 變量的數(shù)據(jù)類型。

          實(shí)例

          typeof "John" // 返回 string

          typeof 3.14 // 返回 number

          typeof NaN // 返回 number

          typeof false // 返回 boolean

          typeof [1,2,3,4] // 返回 object

          typeof {name:'John', age:34} // 返回 object

          typeof new Date() // 返回 object

          typeof function () {} // 返回 function

          typeof myCar // 返回 undefined (如果 myCar 沒有聲明)

          typeof null // 返回 object

          請(qǐng)注意:

          • NaN 的數(shù)據(jù)類型是 number

          • 數(shù)組(Array)的數(shù)據(jù)類型是 object

          • 日期(Date)的數(shù)據(jù)類型為 object

          • null 的數(shù)據(jù)類型是 object

          • 未定義變量的數(shù)據(jù)類型為 undefined

          如果對(duì)象是 JavaScript Array 或 JavaScript Date ,我們就無法通過 typeof 來判斷他們的類型,因?yàn)槎际?返回 Object。

          constructor 屬性

          constructor 屬性返回所有 JavaScript 變量的構(gòu)造函數(shù)。

          實(shí)例

          "John".constructor // 返回函數(shù) String() { [native code] }

          (3.14).constructor // 返回函數(shù) Number() { [native code] }

          false.constructor // 返回函數(shù) Boolean() { [native code] }

          [1,2,3,4].constructor // 返回函數(shù) Array() { [native code] }

          {name:'John', age:34}.constructor // 返回函數(shù) Object() { [native code] }

          new Date().constructor // 返回函數(shù) Date() { [native code] }

          function () {}.constructor // 返回函數(shù) Function(){ [native code] }

          你可以使用 constructor 屬性來查看是對(duì)象是否為數(shù)組 (包含字符串 "Array"):

          實(shí)例

          function isArray(myArray) {

          return myArray.constructor.toString().indexOf("Array") > -1;

          }

          你可以使用 constructor 屬性來查看是對(duì)象是否為日期 (包含字符串 "Date"):

          實(shí)例

          function isDate(myDate) {

          return myDate.constructor.toString().indexOf("Date") > -1;

          }

          JavaScript 類型轉(zhuǎn)換

          JavaScript 變量可以轉(zhuǎn)換為新變量或其他數(shù)據(jù)類型:

          • 通過使用 JavaScript 函數(shù)

          • 通過 JavaScript 自身自動(dòng)轉(zhuǎn)換

          將數(shù)字轉(zhuǎn)換為字符串

          全局方法 String() 可以將數(shù)字轉(zhuǎn)換為字符串。

          該方法可用于任何類型的數(shù)字,字母,變量,表達(dá)式:

          實(shí)例

          String(x) // 將變量 x 轉(zhuǎn)換為字符串并返回

          String(123) // 將數(shù)字 123 轉(zhuǎn)換為字符串并返回

          String(100 + 23) // 將數(shù)字表達(dá)式轉(zhuǎn)換為字符串并返回

          Number 方法 toString() 也是有同樣的效果。

          實(shí)例

          x.toString()

          (123).toString()

          (100 + 23).toString()

          在 Number 方法 章節(jié)中,你可以找到更多數(shù)字轉(zhuǎn)換為字符串的方法:

          方法描述
          toExponential()把對(duì)象的值轉(zhuǎn)換為指數(shù)計(jì)數(shù)法。
          toFixed()把數(shù)字轉(zhuǎn)換為字符串,結(jié)果的小數(shù)點(diǎn)后有指定位數(shù)的數(shù)字。
          toPrecision()把數(shù)字格式化為指定的長(zhǎng)度。

          將布爾值轉(zhuǎn)換為字符串

          全局方法 String() 可以將布爾值轉(zhuǎn)換為字符串。

          String(false) // 返回 "false"

          String(true) // 返回 "true"

          Boolean 方法 toString() 也有相同的效果。

          false.toString() // 返回 "false"

          true.toString() // 返回 "true"

          將日期轉(zhuǎn)換為字符串

          全局方法 String() 可以將日期轉(zhuǎn)換為字符串。

          String(Date()) // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

          Date 方法 toString() 也有相同的效果。

          實(shí)例

          Date().toString() // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

          在 Date 方法 章節(jié)中,你可以查看更多關(guān)于日期轉(zhuǎn)換為字符串的函數(shù):

          方法描述
          getDate()從 Date 對(duì)象返回一個(gè)月中的某一天 (1 ~ 31)。
          getDay()從 Date 對(duì)象返回一周中的某一天 (0 ~ 6)。
          getFullYear()從 Date 對(duì)象以四位數(shù)字返回年份。
          getHours()返回 Date 對(duì)象的小時(shí) (0 ~ 23)。
          getMilliseconds()返回 Date 對(duì)象的毫秒(0 ~ 999)。
          getMinutes()返回 Date 對(duì)象的分鐘 (0 ~ 59)。
          getMonth()從 Date 對(duì)象返回月份 (0 ~ 11)。
          getSeconds()返回 Date 對(duì)象的秒數(shù) (0 ~ 59)。
          getTime()返回 1970 年 1 月 1 日至今的毫秒數(shù)。

          將字符串轉(zhuǎn)換為數(shù)字

          全局方法 Number() 可以將字符串轉(zhuǎn)換為數(shù)字。

          字符串包含數(shù)字(如 "3.14") 轉(zhuǎn)換為數(shù)字 (如 3.14).

          空字符串轉(zhuǎn)換為 0。

          其他的字符串會(huì)轉(zhuǎn)換為 NaN (不是個(gè)數(shù)字)。

          Number("3.14") // 返回 3.14

          Number(" ") // 返回 0

          Number("") // 返回 0

          Number("99 88") // 返回 NaN

          在 Number 方法 章節(jié)中,你可以查看到更多關(guān)于字符串轉(zhuǎn)為數(shù)字的方法:

          方法描述
          parseFloat()解析一個(gè)字符串,并返回一個(gè)浮點(diǎn)數(shù)。
          parseInt()解析一個(gè)字符串,并返回一個(gè)整數(shù)。

          一元運(yùn)算符 +

          Operator + 可用于將變量轉(zhuǎn)換為數(shù)字:

          實(shí)例

          var y = "5"; // y 是一個(gè)字符串

          var x = + y; // x 是一個(gè)數(shù)字

          如果變量不能轉(zhuǎn)換,它仍然會(huì)是一個(gè)數(shù)字,但值為 NaN (不是一個(gè)數(shù)字):

          實(shí)例

          var y = "John"; // y 是一個(gè)字符串

          var x = + y; // x 是一個(gè)數(shù)字 (NaN)

          將布爾值轉(zhuǎn)換為數(shù)字

          全局方法 Number() 可將布爾值轉(zhuǎn)換為數(shù)字。

          Number(false) // 返回 0

          Number(true) // 返回 1

          將日期轉(zhuǎn)換為數(shù)字

          全局方法 Number() 可將日期轉(zhuǎn)換為數(shù)字。

          d = new Date();

          Number(d) // 返回 1404568027739

          日期方法 getTime() 也有相同的效果。

          d = new Date();

          d.getTime() // 返回 1404568027739

          自動(dòng)轉(zhuǎn)換類型

          當(dāng) JavaScript 嘗試操作一個(gè) "錯(cuò)誤" 的數(shù)據(jù)類型時(shí),會(huì)自動(dòng)轉(zhuǎn)換為 "正確" 的數(shù)據(jù)類型。

          以下輸出結(jié)果不是你所期望的:

          5 + null // 返回 5 null 轉(zhuǎn)換為 0

          "5" + null // 返回"5null" null 轉(zhuǎn)換為 "null"

          "5" + 1 // 返回 "51" 1 轉(zhuǎn)換為 "1"

          "5" - 1 // 返回 4 "5" 轉(zhuǎn)換為 5

          自動(dòng)轉(zhuǎn)換為字符串

          當(dāng)你嘗試輸出一個(gè)對(duì)象或一個(gè)變量時(shí) JavaScript 會(huì)自動(dòng)調(diào)用變量的 toString() 方法:

          document.getElementById("demo").innerHTML = myVar;

          // if myVar = {name:"Fjohn"} // toString 轉(zhuǎn)換為 "[object Object]"

          // if myVar = [1,2,3,4] // toString 轉(zhuǎn)換為 "1,2,3,4"

          // if myVar = new Date() // toString 轉(zhuǎn)換為 "Fri Jul 18 2014 09:08:55 GMT+0200"

          數(shù)字和布爾值也經(jīng)常相互轉(zhuǎn)換

          // if myVar = 123 // toString 轉(zhuǎn)換為 "123"

          // if myVar = true // toString 轉(zhuǎn)換為 "true"

          // if myVar = false // toString 轉(zhuǎn)換為 "false"

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!

          幾天,我手里的一個(gè)項(xiàng)目需要將富文本的所有 html 標(biāo)簽全部刪除,得到純文本后再存儲(chǔ)到數(shù)據(jù)庫中。在一系列得搜索操作之后,我找到了實(shí)現(xiàn)這個(gè)目的的幾種方法,在這里我分享給大家,當(dāng)你遇到同樣的情況興許也能用的上。

          1. 使用 .replace(/<[^>]*>/g, '')

          這個(gè)方法是從文本中去除 html 標(biāo)簽最簡(jiǎn)單的方法。它使用字符串的方法 .replace(待替換的字符串,替換后的字符串) 將 HTML 標(biāo)簽替換成空值。 /g 是表示替換字符串所有匹配的值,即字符串中所有符合條件的字符都將被替換。

          這個(gè)方法的缺點(diǎn)是有些 HTML 標(biāo)簽不能被剔除,不過它依然很好用。

          2. 創(chuàng)建臨時(shí)DOM元素并獲取其中的文本

          這種方法是完成該問題的最有效的方法。創(chuàng)建一個(gè)臨時(shí) DOM 并給他賦值,然后我們使用 DOM 對(duì)象方法提取文本。

          3. 使用 html-to-text npm 包

          html-to-text 這個(gè)包的功能很全了,轉(zhuǎn)換也有許多的選項(xiàng)比如:wordwrap, tags, whitespaceCharacters , formatters 等等。

          安裝:

          npm install html-to-text

          使用:

          最后感謝閱讀,如果此文對(duì)您有幫助,請(qǐng)點(diǎn)贊或添加關(guān)注。


          主站蜘蛛池模板: 亚洲日韩一区二区三区| 国产一区二区三区不卡观| 亚洲综合色一区二区三区 | 无码人妻久久一区二区三区免费| 高清一区二区三区免费视频| 日本中文一区二区三区亚洲| 国产精品视频一区二区三区经 | 国产福利一区二区| 亚洲另类无码一区二区三区| 午夜精品一区二区三区在线视 | 91视频一区二区三区| 日本一区午夜艳熟免费| 国产精品综合一区二区| 免费高清av一区二区三区| 天堂Av无码Av一区二区三区| 亚拍精品一区二区三区| 无码精品视频一区二区三区| 麻豆亚洲av熟女国产一区二| 无码人妻久久久一区二区三区| 亚洲一区免费观看| 亚洲电影国产一区| 影院无码人妻精品一区二区| 久久国产精品免费一区二区三区| 无码8090精品久久一区| 国产亚洲一区区二区在线| 亚洲AⅤ无码一区二区三区在线 | 精品无码成人片一区二区| 日韩免费无码一区二区三区 | 亚洲AV色香蕉一区二区| 精品一区二区三区高清免费观看| 亚洲中文字幕丝袜制服一区| 国产成人精品一区二三区在线观看| 一区免费在线观看| 色老板在线视频一区二区| 亚洲成av人片一区二区三区| 国内精品无码一区二区三区| 中文字幕一区在线播放| 日韩免费视频一区二区| 老熟女五十路乱子交尾中出一区| 国产麻豆精品一区二区三区| 国产肥熟女视频一区二区三区|