react不顯示PDF產生資訊怎麼辦

react不顯示PDF產生資訊的解決方法：1、從後台取得的pdf的url位址，再要求取得到pdf檔；2、請求pdf檔時設定responseType為blob；3、將PDF文件轉換為base64格式；4、以canvas來呈現PDF即可。

本教學操作環境：Windows10系統、react18.0.0版、Dell G3電腦。

react不顯示PDF產生資訊怎麼辦？

解決react專案中PDF的顯示與列印問題

#最近專案中有這樣一個需求：

• 頁面中可以顯示pdf

• 不希望把整個頁面列印下來，只列印顯示PDF的部分，可以使用瀏覽器自帶列印功能

#PDF檔案的顯示

拿到這個需求，真時一頭霧水。因為沒有做過類似需求，不知從何下手。在查閱資料的過程中，發現有很多jQuery插件可以實現顯示pdf, 但是我們是react單頁面應用項目，看來這些插件並不適用，只能另尋其它方法。

後來在 npmjs.com 上找到了 react-pdf-js 元件, 心想顯示pdf有望。就迫不及待將 react-pdf-js 依賴 透過 cnpm install react-pdf-js --save-dev 指令安裝到專案中，透過 import PDF from 'react-pdf-js' 引進到專案裡。將插入render裡。

在偵錯過程中發現靜態pdf檔可以顯示，線上pdf檔不能顯示。透過控制的報錯資訊了解道，react-pdf-js元件要求file檔案位址是url或base64格式, 既然url行不通，就只能往base64上靠了。

取得PDF檔案

一開始我直接將pdf的線上位址url轉換為base64，但不能顯示。後來想明白了，只要把url轉換成base64格式是沒有用的，需要把pdf的檔案內容轉換成base64才行。接下來就順理成章，透過從後台取得到的pdf的url位址，再次要求取得到pdf檔。

在做這部分的遇到一個小問題：能請求成功，就是獲取不到pdf文件，在這糾結了很久，也不知道該如何解決，把問題描述給我們公司的架構師，我們分析這是跨域問題造成的，他給nginx伺服器的配置解決了跨域問題。

'Content-Type':  'application/x-www-form-urlencoded;charset=utf-8',
'Access-Control-Allow-Origin': 'https://www.nurse-go.cn:9091',
'Access-Control-Allow-Methods': 'GET',
'Access-Control-Allow-Headers': 'X-Custom-Header',
'Access-Control-Allow-Credentials': true,

將PDF文件轉換為base64格式

base64可以儲存任何格式的文件，一種很棒的儲存方法。將檔案轉換為base64格式。

這裡需要注意請求pdf文件的時候要設定responseType為blob, 為什麼使用blob類型下面解釋，到這我就拿到了pdf文件，將其轉化為base64格式。

let reader  = new FileReader()
let fileParts = []
fileParts.push(this.props.pdfFile)
let blob = new Blob(fileParts, {type : 'application/pdf'})
if (blob) {
    reader.readAsDataURL(blob)
}
let base64
let that = this      // 处理this的指向  
reader.addEventListener("load", function () {
    base64 = reader.result
   that.setState({
          base64: base64,
 })
}, false);

base64格式的轉換，需要時blob格式，將轉換為base64格式的pdf，在file={file}, 將其在瀏覽器上顯示出來。實際上最終是以canvas來呈現的PDF。

pdf顯示算是告一段落，接下來就是列印了。

PDF檔案的列印

在瀏覽器上，列印分整頁列印和指定部分列印。專案需要列印製定部分內容列印，實現列印的方法多種多樣，我使用了傳統的css控制。透過@media print將列印時不需要列印的部分隱藏掉，那麼剩下的就是要列印的部分了。

PDF檔案列印調試

這裡有個調試的小技巧：因為只有當呼叫了瀏覽器的列印才會呼叫@media print 裡的樣式，所以可以將這部分樣式放在外面，當將不需要列印的部分都隱藏掉了，再將外部的這些樣式去掉，給@media print即可。

呼叫瀏覽器的列印所使用的window.print()， 雖然不能相容於所有瀏覽器，但是常見的高階瀏覽器都可以相容，滿足了我們的專案需求，這裡我就沒有繼續深挖。

pdf的顯示與列印，前後遇到了不少問題，以上流水做個總結。

推薦學習：《react影片教學》

以上是react不顯示PDF產生資訊怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章！