日韩精品久久一,91中文在线观看,91视频黄版在线

公司有個(gè)業(yè)務(wù)需求,要求后臺傳pdf的base64編碼給前端,前端顯示到界面上,后來在網(wǎng)上搜索了很多關(guān)于base64轉(zhuǎn)pdf的文章,都寫的不是非常的詳細(xì),在實(shí)現(xiàn)的過程中遇到很多坑,經(jīng)過一天的研究終于實(shí)現(xiàn)了這個(gè)功能,分享一下我在這個(gè)功能中遇到的問題和解決方法

要注明的是這里用到的核心插件是pdf.js,原理是動態(tài)生成canvas標(biāo)簽,然后通過pdf.js生成一個(gè)能渲染出pdf的對象,隨后渲染每個(gè)canvas,并且生成的pdf是畫面的形式,并沒有pdf之類的控件

引入插件

這里很多博客都是使用JavaScript原生的方法引入pdf.js,例如使用script標(biāo)簽引入外部的js腳本,或者直接把pdf.js的源碼復(fù)制到項(xiàng)目中,但是我嘗試這些方法的時(shí)候都不是特別好用,而且引入后導(dǎo)致項(xiàng)目體積過于龐大,

隨后我去github上尋找通過包管理器引入pdf.js的方法,在pdf.js的github上官方說明的是用gulp如何使用pdf.js,但是對于npm來說并沒有詳細(xì)說明,終于我在字里行間發(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的話,引入構(gòu)建好的版本的名字為pdfjs-dist,那么我們使用npm的方法引入這個(gè)pdfjs-dist,引入的名字就隨意取名了這里我叫PDFJS

 import PDFJS from 'pdfjs-dist'

使用pdfjs-dist

這里后臺傳給我的是一個(gè)由pdf文件名字和pdf的base64編碼組成的對象的數(shù)組,我取名為pdfDataList

可以看到fileName是pdf的名字,fileVale是pdf文件的base64編碼,thumbnail是pdf縮略圖的base64編碼這里用不到先不管,之前說到需要?jiǎng)討B(tài)生成canvas節(jié)點(diǎn)(這里不會canvas也不要緊,只需要根據(jù)代碼一步步做就能渲染canvas)

首先我們創(chuàng)建一個(gè)承載所有canvas節(jié)點(diǎn)的父節(jié)點(diǎn),取名為pdfList
然后創(chuàng)建一個(gè)異步函數(shù)showPdf(不懂什么是異步函數(shù)的可以去查一下async/await,這里不用異步函數(shù)也可以使用promise.then的方法,但是async/await作為異步操作的終極方案最好還是學(xué)習(xí)一下)

async showPdf() {
       
    }

使用querySelector選擇類名為pdfList的dom節(jié)點(diǎn),隨后遍歷后臺傳過來的pdfDataList數(shù)組的每一項(xiàng),這里用到一個(gè)瀏覽器自帶的atob()方法解碼base64,MDN上是這么解釋的:

你可以使用 window.btoa() 方法來編碼一個(gè)可能在傳輸過程中出現(xiàn)問題的數(shù)據(jù)，并且在接受數(shù)據(jù)之后，使用 atob() 方法再將數(shù)據(jù)解碼。

語法: var decodedData = scope.atob(encodedData);

隨后調(diào)用pdf.js插件的getDocument方法,getDocument是一個(gè)promise,所以使用異步函數(shù)的話前面需要加await關(guān)鍵字(不使用異步函數(shù)的話在方法后面加.then((pdf)=>{.......}),這個(gè)pdf對象和我這個(gè)pdf對象是同一個(gè),同時(shí)這里暫時(shí)也沒考慮異步操作出錯(cuò)的情況,有要求的話可以在加個(gè)catch捕獲錯(cuò)誤)
getDocument方法的參數(shù)是一個(gè)對象,對象鍵名為data,值為base64解碼后的值,此方法返回一個(gè)pdf對象,這個(gè)對象有幾個(gè)屬性,可以打印出來觀察一下

這里我們先用到的是numPages屬性,它指的是當(dāng)前pdf文件有多少頁

async showPdf() {
        let pdfList = document.querySelector('.pdfList') //通過querySelector選擇DOM節(jié)點(diǎn),使用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}) //返回一個(gè)pdf對象
            let pages = pdf.numPages //聲明一個(gè)pages變量等于當(dāng)前pdf文件的頁數(shù)
        }
    }

獲取當(dāng)前pdf文件的對象和當(dāng)前pdf文件的所有頁數(shù)后,循環(huán)遍歷每個(gè)頁數(shù),執(zhí)行如下操作:

1)動態(tài)創(chuàng)建canvas節(jié)點(diǎn)

2)調(diào)用pdf對象原型上的getPage()方法和getViewport()方法,依次傳入當(dāng)前循環(huán)的頁數(shù)和canvas的縮放大小(這里不懂的可以直接復(fù)制黏貼)

3)渲染當(dāng)前的canvas節(jié)點(diǎn)

4)調(diào)用page對象的render()方法渲染當(dāng)前頁,此方法也是一個(gè)promise,需要使用await關(guān)鍵字等到狀態(tài)為resolve后再執(zhí)行之后的代碼

5)給顯示當(dāng)前頁面的canvas節(jié)點(diǎn)一個(gè)className為canvas方便修改樣式,最后把這個(gè)canvas節(jié)點(diǎn)插入到pdfList節(jié)點(diǎn)中

async showPdf() {
        let pdfList = document.querySelector('.pdfList') //通過querySelector選擇DOM節(jié)點(diǎn),使用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}) //返回一個(gè)pdf對象
            let pages = pdf.numPages //聲明一個(gè)pages變量等于當(dāng)前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方法傳入當(dāng)前循環(huán)的頁數(shù),返回一個(gè)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é)點(diǎn)定義一個(gè)class名,這里我取名為canvas
              pdfList.appendChild(canvas) //插入到pdfList節(jié)點(diǎn)的最后
            }
        }
    }

至此頁面上就會多出一個(gè)canvas節(jié)點(diǎn)并且顯示當(dāng)前pdf文件的第一頁的圖片,如果當(dāng)前pdf文件有多頁就會渲染出多個(gè)canvas節(jié)點(diǎn),有多個(gè)pdf文件就會先循環(huán)外層,然后再循環(huán)內(nèi)層,把每個(gè)pdf文件的每一頁都生成一個(gè)canvas節(jié)點(diǎn)