react不顯示PDF生成信息如何解決

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

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

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

解決react項(xiàng)目中PDF的顯示與打印問(wèn)題

最近項(xiàng)目中有這樣一個(gè)需求：

頁(yè)面中可以顯示pdf
不希望把整個(gè)頁(yè)面打印下來(lái)，只打印顯示PDF的部分，可以使用瀏覽器自帶打印功能

PDF文件的顯示

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

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

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

獲取PDF文件

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

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

'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可以存儲(chǔ)任何格式的文件，一種的很棒的存儲(chǔ)方法。將文件轉(zhuǎn)換為base64格式。

這里需要注意請(qǐng)求pdf文件的時(shí)候要設(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)換，需要時(shí)blob格式，將轉(zhuǎn)化為base64格式的pdf，在file={file}, 將其在瀏覽器上顯示出來(lái)。實(shí)際上最終是以canvas來(lái)呈現(xiàn)的PDF。

pdf顯示算是告一段落，接下來(lái)就是打印了。

PDF文件的打印

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

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

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

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

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

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

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

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

猜你還喜歡下面的內(nèi)容