首頁 > web前端 > 前端問答 > react不顯示PDF產生資訊怎麼辦

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

藏色散人
發布: 2023-01-06 11:47:58
原創
1980 人瀏覽過

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

react不顯示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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板