這篇文章主要介紹了使用Vue將pdf轉(zhuǎn)換為圖片時需要注意哪些問題，此處通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考價值，需要的朋友可以參考下：
Vue是一套用于構(gòu)建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。
引入插件
這里很多博客都是使用JavaScript原生的方法引入pdf.js,例如使用script標簽引入外部的js腳本,或者直接把pdf.js的源碼復(fù)制到項目中,但是我嘗試這些方法的時候都不是特別好用,而且引入后導(dǎo)致項目體積過于龐大,
隨后我去github上尋找通過包管理器引入pdf.js的方法,在pdf.js的github上官方說明的是用gulp如何使用pdf.js,但是對于npm來說并沒有詳細說明,終于我在字里行間發(fā)現(xiàn)了這么一句話
To use PDF.js in a web application you can choose to use a pre-built version of the library or to build it from source. We supply pre-built versions for usage with NPM and Bower under the pdfjs-dist name. For more information and examples please refer to the wiki page on this subject.
大致的意思就是如果使用npm包管理器或者bower的話,引入的名字為pdfjs-dist,那么我們使用npm的方法引入這個pdfjs-dist,引入的名字就隨意取名了這里我叫PDFJS
import PDFJS from 'pdfjs-dist'
使用pdfjs-dist
這里后臺傳給我的是一個由pdf文件名字和pdf的base64編碼組成的對象的數(shù)組,我取名為pdfDataList
可以看到fileName是pdf的名字,fileVale是pdf文件的base64編碼,thumbnail是pdf縮略圖的base64編碼這里用不到先不管,之前說到需要動態(tài)生成canvas節(jié)點(這里不會canvas也不要緊,只需要根據(jù)代碼一步步做就能渲染canvas)
1.首先我們創(chuàng)建一個承載所有canvas節(jié)點的父節(jié)點,取名為pdfList
2.然后創(chuàng)建一個異步函數(shù)showPdf(不懂什么是異步函數(shù)的可以去查一下async/await,這里不用異步函數(shù)也可以使用promise.then的方法,但是async/await作為異步操作的終極方案最好還是學(xué)習(xí)一下)
重慶分公司
重慶分公司
async showPdf() {
}使用querySelector選擇類名為pdfList的dom節(jié)點,隨后遍歷后臺傳過來的pdfDataList數(shù)組的每一項,這里用到一個瀏覽器自帶的atob()方法解碼base64,MDN上是這么解釋的:
你可以使用
window.btoa()方法來編碼一個可能在傳輸過程中出現(xiàn)問題的數(shù)據(jù)，并且在接受數(shù)據(jù)之后，使用 atob() 方法再將數(shù)據(jù)解碼。
語法: var decodedData = scope.atob(encodedData);
隨后調(diào)用pdf.js插件的getDocument方法,getDocument是一個promise,所以使用異步函數(shù)的話前面需要加await關(guān)鍵字(不使用異步函數(shù)的話在方法后面加.then((pdf)=>{.......}),這個pdf對象和我這個pdf對象是同一個,同時這里暫時也沒考慮異步操作出錯的情況,有要求的話可以在加個catch捕獲錯誤)
getDocument方法的參數(shù)是一個對象,對象鍵名為data,值為base64解碼后的值,此方法返回一個pdf對象,這個對象有幾個屬性,可以打印出來觀察一下
這里我們先用到的是numPages屬性,它指的是當前pdf文件有多少頁
async showPdf() {
let pdfList = document.querySelector('.pdfList') //通過querySelector選擇DOM節(jié)點,使用document.getElementById()也一樣
for(let value of this.pdfDataList){ //遍歷后臺傳過來的pdfDataList
let base64 = value.fileValue //獲得bas464編碼
let decodedBase64 = atob(base64) //使用瀏覽器自帶的方法解碼
let pdf = await PDFJS.getDocument({data: decodedBase64}) //返回一個pdf對象
let pages = pdf.numPages //聲明一個pages變量等于當前pdf文件的頁數(shù)
}
}獲取當前pdf文件的對象和當前pdf文件的所有頁數(shù)后,循環(huán)遍歷每個頁數(shù),執(zhí)行如下操作:
1)動態(tài)創(chuàng)建canvas節(jié)點
2)調(diào)用pdf對象原型上的getPage()方法和getViewport()方法,依次傳入當前循環(huán)的頁數(shù)和canvas的縮放大小(這里不懂的可以直接復(fù)制黏貼)
3)渲染當前的canvas節(jié)點
4)調(diào)用page對象的render()方法渲染當前頁,此方法也是一個promise,需要使用await關(guān)鍵字等到狀態(tài)為resolve后再執(zhí)行之后的代碼
5)給顯示當前頁面的canvas節(jié)點一個className為canvas方便修改樣式,最后把這個canvas節(jié)點插入到pdfList節(jié)點中
async showPdf() {
let pdfList = document.querySelector('.pdfList') //通過querySelector選擇DOM節(jié)點,使用document.getElementById()也一樣
for(let value of this.pdfDataList){ //遍歷后臺傳過來的pdfDataList
let base64 = value.fileValue //獲得bas464編碼
let decodedBase64 = atob(base64) //使用瀏覽器自帶的方法解碼
let pdf = await PDFJS.getDocument({data: decodedBase64}) //返回一個pdf對象
let pages = pdf.numPages //聲明一個pages變量等于當前pdf文件的頁數(shù)
for (let i = 1; i <= pages; i++) { //循環(huán)頁數(shù)
let canvas = document.createElement('canvas')
let page = await pdf.getPage(i) //調(diào)用getPage方法傳入當前循環(huán)的頁數(shù),返回一個page對象
let scale = 1;//縮放倍數(shù)，1表示原始大小
let viewport = page.getViewport(scale);
let context = canvas.getContext('2d'); //創(chuàng)建繪制canvas的對象
canvas.height = viewport.height; //定義canvas高和寬
canvas.width = viewport.width;
let renderContext = {
canvasContext: context,
viewport: viewport
};
await page.render(renderContext)
canvas.className = 'canvas' //給canvas節(jié)點定義一個class名,這里我取名為canvas
pdfList.appendChild(canvas) //插入到pdfList節(jié)點的最后
}
}
}至此頁面上就會多出一個canvas節(jié)點并且顯示當前pdf文件的第一頁的圖片,如果當前pdf文件有多頁就會渲染出多個canvas節(jié)點,有多個pdf文件就會先循環(huán)外層,然后再循環(huán)內(nèi)層,把每個pdf文件的每一頁都生成一個canvas節(jié)點
 |
修改樣式
渲染出頁面后還有個要注意的點,Vue框架會給每個組件的DOM節(jié)點生成一個自定義屬性,而節(jié)點動態(tài)生成的canvas節(jié)點,并沒有data-v-xxxxx這樣的自定義屬性
而Vue會給每個組件里面的樣式添加這個自定義屬性,Vue框架這樣做可以防止樣式的相互污染(也就是style旁邊的scoped屬性)
我們這里可以在這個style下面再創(chuàng)建一個style寫入樣式來達到修改canvas樣式的效果,但是記得這樣做你整個項目里面類名叫canvas的都會獲得這個樣式,需要注意
到此這篇關(guān)于使用Vue將pdf轉(zhuǎn)換為圖片時需要注意哪些問題的文章就介紹到這了,更多相關(guān)使用Vue將pdf轉(zhuǎn)換為圖片時需要注意哪些問題的內(nèi)容請搜索創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
