最近項目中有這樣一個需求：
- 頁面中可以顯示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' 引入到項目里。將<PDF file={pdfUrl} onDocumentComplete={this.onDocumentComplete} onPageComplete={this.state.page} />插入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的顯示與打印，前前后后遇到了不少問題，以上流水做個總結。
