本篇內(nèi)容主要講解“react不顯示PDF生成信息如何解決”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“react不顯示PDF生成信息如何解決”吧!

成都創(chuàng)新互聯(lián)是一家專業(yè)提供牧野企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、網(wǎng)站制作、H5場景定制、小程序制作等業(yè)務(wù)。10年已為牧野眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進行中。

react不顯示PDF生成信息的解決辦法：1、從后臺獲取到的pdf的url地址，再請求獲取到pdf文件；2、請求pdf文件時設(shè)置responseType為blob；3、將PDF文件轉(zhuǎn)換為base64格式；4、以canvas來呈現(xiàn)PDF即可。

解決react項目中PDF的顯示與打印問題

最近項目中有這樣一個需求：

• 頁面中可以顯示pdf

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

PDF文件的顯示

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

后來在 npmjs.com 上找到了 react-pdf-js 組件, 心想顯示pdf有望。就迫不及待將 react-pdf-js 依賴 通過 cnpm install react-pdf-js --save-dev 命令安裝到項目中，通過 import PDF from 'react-pdf-js' 引入到項目里。將<PDF file={pdfUrl} onDocumentComplete={this.onDocumentComplete} onPageComplete={this.state.page} />插入render里。

在調(diào)試過程中發(fā)現(xiàn)靜態(tài)pdf文件可以顯示，在線pdf文件不能顯示。通過控制的報錯信息了解道，react-pdf-js組件要求file文件地址是url或者base64格式, 既然url行不通，就只能往base64上靠了。

獲取PDF文件

一開始我直接將將pdf的在線地址url轉(zhuǎn)換為base64，但是不能顯示。后來想明白了，只把url轉(zhuǎn)換成base64格式是沒有用的，需要把pdf的文件內(nèi)容轉(zhuǎn)換成base64才行。接下來就順理成章，通過從后臺獲取到的pdf的url地址，再次請求獲取到pdf文件。

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

'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文件轉(zhuǎn)換為base64格式

base64可以存儲任何格式的文件，一種的很棒的存儲方法。將文件轉(zhuǎn)換為base64格式。

這里需要注意請求pdf文件的時候要設(shè)置responseType為blob, 為什么使用blob類型下面解釋，到這我就拿到了pdf文件，將其轉(zhuǎn)化為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格式的轉(zhuǎn)換，需要時blob格式，將轉(zhuǎn)化為base64格式的pdf，在file={file}, 將其在瀏覽器上顯示出來。實際上最終是以canvas來呈現(xiàn)的PDF。

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

PDF文件的打印

在瀏覽器上，打印分整頁打印和指定部分打印。項目需要打印制定部分內(nèi)容打印，實現(xiàn)打印的方法多種多樣，我使用了傳統(tǒng)的css控制。通過@media print將打印時不需要打印的部分隱藏掉，那么剩下的就是要打印的部分了。

PDF文件打印調(diào)試

這里有個調(diào)試的小技巧：因為只有當(dāng)調(diào)用了瀏覽器的打印才會調(diào)用@media print 里的樣式，所以可以將這部分樣式放在外面，當(dāng)將不需要打印的部分都隱藏掉了，再將外部的這些樣式去掉，給@media print即可。

調(diào)用瀏覽器的打印使用的 window.print()， 雖然不能兼容所有瀏覽器，但是常見的高級瀏覽器都可以兼容，滿足了我們的項目需求，這里我就沒有繼續(xù)深挖。

到此，相信大家對“react不顯示PDF生成信息如何解決”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

標(biāo)題名稱：react不顯示PDF生成信息如何解決
文章地址：http://m.newbst.com/article30/iideso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、微信公眾號、網(wǎng)站策劃、App開發(fā)、網(wǎng)站收錄、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)