開篇說明:
pdfjs指的是:http://mozilla.github.io/pdf.js/
或者https://github.com/mozilla/pdf.js
PDF在vue中的使用已經(jīng)有很多文章了,嘗試了一大把,發(fā)現(xiàn)不能完全滿足項目需要
項目要求在線加載PDF,滾動顯示,放大縮小等.
踩坑記錄
第一個坑
pdf-vue https://github.com/FranckFreiburger/vue-pdf
這個插件比較簡單,npm install --save pdf-vue既可以使用
流程走到最后發(fā)現(xiàn),這個插件不能滾動翻頁,只能手動觸發(fā)上頁和下頁.......
第二個坑
pdfjs有好多使用博客,比如這個18年的文章http://www.reibang.com/p/b48af7917656
但是直接按照博客去敲代碼會報錯.因為pdfjs的npm版本在19年后發(fā)生了很大變化,原來回調是callback現(xiàn)在改成了promise,老代碼直接不兼容.這算pdfjs自己更新的問題,和博客無關.
正文
本教程使用的pdfjs版本是"pdfjs-dist": "2.3.200",
如果按照教程走一遍發(fā)現(xiàn)報錯,可以把版本改成和作者一致再試試
本文參考的是 pdfjs官網(wǎng)npm版本的使用示例,結合vue寫的
官網(wǎng)npm版本地址https://github.com/mozilla/pdf.js/blob/master/examples/node/getinfo.js
第一步 安裝
項目目錄下
npm install pdfjs-dist --save
第二步 獲得PDF地址
大概邏輯:
先在data中聲明PDF用到的設置變量,
然后獲得PDF線上地址,
最后調用下一步的初始化函數(shù).
下面為示例代碼,
函數(shù)get_pdfurl()默認加載的是PDFjs給的在線PDF文檔例子地址,外網(wǎng)比較慢,要等五分鐘左右,可以注釋掉,直接加載自己項目的pdf地址
<div class="pdf_down" >
<div class="pdf_set_left" @click="scaleD()">放大</div>
<div class="pdf_set_middle" @click="scaleX()">縮小</div>
</div>
<div :style="{width:pdf_div_width,margin:'0 auto'}" >
<canvas v-for="page in pdf_pages" :id="'the-canvas'+page" :key="page"></canvas>
</div>
data(){
return{
pdf_scale:1.0,//pdf放大系數(shù)
pdf_pages:[],
pdf_div_width:'',
pdf_src:null,
}
},
get_pdfurl(){ //獲得pdf
//例子:加載pdf線上示例
this.pdf_src = 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf'
this._loadFile(this.pdf_src)
return
//線上請求
this.$axios.get('')
.then((res)=>{
this.pdf_src = res.url
this._loadFile(this.pdf_src)
})
}
第三步:初始化
let PDFJS = require('pdfjs-dist');
_loadFile (url) { //初始化pdf
let loadingTask = PDFJS.getDocument(url)
loadingTask.promise
.then((pdf) => {
this.pdfDoc = pdf
this.pdf_pages = this.pdfDoc.numPages
this.$nextTick(() => {
this._renderPage(1)
})
})
},
1.先引入pdfjs,作者和官網(wǎng)例子保持一致用的require沒有用import.
2.引入之后 2.3版本返回的是個promise,不是以前的回調函數(shù)
3.該promise成功的話會返回一個pdfjs的實例, this.pdfDoc = pdf把該實例保存下,后面有用
4.滾動翻頁也要知道總頁數(shù),所以 this.pdf_pages = this.pdfDoc.numPages 保存總頁數(shù)
5.因為pdfjs其實是把PDF文件渲染成canvas,所以vue加載完dom后,要用nexttick調用渲染pdf函數(shù)
第四步,渲染
_renderPage (num) { //渲染pdf頁
const that = this
this.pdfDoc.getPage(num)
.then((page) => {
let canvas = document.getElementById('the-canvas' + num)
let ctx = canvas.getContext('2d')
let dpr = window.devicePixelRatio || 1
let bsr = ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio || 1
let ratio = dpr / bsr
let viewport = page.getViewport({ scale: this.pdf_scale })
canvas.width = viewport.width * ratio
canvas.height = viewport.height * ratio
canvas.style.width = viewport.width + 'px'
that.pdf_div_width = viewport.width + 'px'
canvas.style.height = viewport.height + 'px'
ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
let renderContext = {
canvasContext: ctx,
viewport: viewport
}
page.render(renderContext)
if (this.pdf_pages > num) {
this._renderPage(num + 1)
}
})
},
這段代碼大概意思是:通過id錨點把pdf渲染成canvas,
1.let viewport = page.getViewport({ scale: this.pdf_scale })
sacle后面跟的是pdf的縮放比例.默認1.0
大于1.0表示放大,比如1.1
小于1.0表示縮小,比如0.9
所以pdf的放大縮小就是通過改變scale綁定的變量值的大小后再重新調用渲染pdf的函數(shù)來實現(xiàn)
2.that.pdf_div_width = viewport.width + 'px'
這句話是拿到pdf文件的寬度,不同的PDF文件在1.0的縮放下寬度是不確定的,如果想讓渲染的PDF居中,需要canvas元素外面嵌套層div,該div的寬度就是pdf_div_width
總結
讀者直接把博客中的代碼復制到自己的項目中,修改下獲取PDF地址函數(shù)就可以直接用了,
完整的dome在這 https://github.com/bill-mark/pdfjs-usedin-vue
先npm install 再npm run serve就能看的效果 因為用的PDF示例文檔是pdfjs官網(wǎng)提供的,非常慢要等一會才能顯示
