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

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

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

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

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

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

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

PDF文件的顯示

拿到這個需求，真時一頭霧水。因為沒有做過類似需求，不知從何下手。在查閱資料的過程中，發(fā)現有很多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' 引入到項目里。將<PDF file={pdfUrl} onDocumentComplete={this.onDocumentComplete} onPageComplete={this.state.page} />插入render里。

在調試過程中發(fā)現靜態(tài)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()，雖然不能兼容所有瀏覽器，但是常見的高級瀏覽器都可以兼容，滿足了我們的項目需求，這里我就沒有繼續(xù)深挖。

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

標題名稱：react不顯示PDF生成信息如何解決
文章地址：http://bm7419.com/article30/iideso.html

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

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

猜你還喜歡下面的內容