前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现

1.vue项目pdf展示
2.pdf工具栏放大缩小功能

前言

文章参考:
pdf.js使用1
pdf.js使用2

前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现
先看下效果图：

一、pdf.js展示pdf

1.文件准备

pdfjs-dist
需要放在根目录下的static文件夹中(具体文件查看我的资源中pdfjs-dist)

2.引入

import PDFJS from '../../../../../static/pdfjs-dist/build/pdf.js'

3.在页面某个位置使用canvas画布来渲染pdf文件

<div class="pdf-box" @scroll="mScroll" ref="agreemenContent">
    <canvas v-for="page in pages" :id="'the-canvas' + page" :key="page" ref="pdf"></canvas>
 </div>

4.主要渲染方法

methods:{
    _renderPage (num) {
            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(screen.availWidth / page.getViewport(1).width)
                canvas.width = viewport.width * ratio
                canvas.height = viewport.height * ratio
                // canvas.style.width = viewport.width + 'px'
                canvas.style.width = 6 + 'rem'  //设置宽度
                // 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.pages > num) {
                    this._renderPage(num + 1)
                }
            })
        },
        _loadFile (url) {
            PDFJS.getDocument(url).then((pdf) => {
                this.pdfDoc = pdf
                this.pages = this.pdfDoc.numPages
                this.$nextTick(() => {
                    this._renderPage(1)
                })
            })
        },
}

5.调用函数传入pdf文件地址进行渲染

this._loadFile(pdfurl)

6.pdf.js展示形式下监听滚动到底

主要方法@scroll=“mScroll”

<div class="pdf-box" @scroll="mScroll" ref="agreemenContent">
    <canvas v-for="page in pages" :id="'the-canvas' + page" :key="page" ref="pdf"></canvas>
 </div>

7.pdf.js可定制化的弊端就是工具功能需要自己写

（1）pdf放大

// pdf放大
    scaleD() {
      this.scaleCount++
      this.$refs.pdf.forEach(item => {
        let widthTemp = item.style.width.split('px')[0]
        let heightTemp = item.style.height.split('px')[0]
        item.style.width = parseInt(widthTemp) * parseFloat(this.scale) + 'px'
        item.style.height = parseInt(heightTemp) * parseFloat(this.scale) + 'px'
        // let widthTemp = item.style.width.split('rem')[0]
        // let heightTemp = item.style.height.split('rem')[0]
        // item.style.width = parseInt(widthTemp) * parseFloat(this.scale) + 'rem'
        // item.style.height = parseInt(heightTemp) * parseFloat(this.scale) + 'rem'
      })
    },

（2）缩小

// pdf缩小
    scaleX() {
      if (this.scaleCount == 0) {
        return
      }
      this.$refs.pdf.forEach(item => {
        let widthTemp = item.style.width.split('px')[0]
        let heightTemp = item.style.height.split('px')[0]
        item.style.width = parseInt(widthTemp) / parseFloat(this.scale) + 'px'
        item.style.height = parseInt(heightTemp) / parseFloat(this.scale) + 'px'
        // let widthTemp = item.style.width.split('rem')[0]
        // let heightTemp = item.style.height.split('rem')[0]
        // item.style.width = parseInt(widthTemp) / parseFloat(this.scale) + 'rem'
        // item.style.height = parseInt(heightTemp) / parseFloat(this.scale) + 'rem'
      })
      this.scaleCount--
    },

二、iframe展示pdf

1.标签拿来

<div>
    <iframe src="./research.html" name="iframetest" class="iframetest" id="iframetest" width="100%" height="200" frameborder="0" scrolling="no"></iframe>
</div>

2.路径拿来

src="./research.html"

3.样式拿来

class="iframetest" id="iframetest" width="100%" height="200" frameborder="0" scrolling="no"

4.监听滚动

var frameWidow = document.getElementById('iframe').contentWindow;

$(frameWidow).scroll(function(){undefined
      console.log("scroll");
 });

注意：iframe监听滚动有兼容问题，如果有监听滚动需求建议直接使用pdf.js;
若无滚动监听需要建议直接使用iframe，简单方便快捷

总结

两种形式展示pdf,亲测有效哦