前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现
1.vue项目pdf展示
2.pdf工具栏放大缩小功能
文章目录
前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现前言一、pdf.js展示pdf1.文件准备2.引入3.在页面某个位置使用canvas画布来渲染pdf文件4.主要渲染方法5.调用函数传入pdf文件地址进行渲染6.pdf.js展示形式下监听滚动到底7.pdf.js可定制化的弊端就是工具功能需要自己写二、iframe展示pdf1.标签拿来2.路径拿来3.样式拿来4.监听滚动总结前言
文章参考:
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 || 1let bsr = ctx.webkitBackingStorePixelRatio ||ctx.mozBackingStorePixelRatio ||ctx.msBackingStorePixelRatio ||ctx.oBackingStorePixelRatio ||ctx.backingStorePixelRatio || 1let ratio = dpr / bsrlet viewport = page.getViewport(screen.availWidth / page.getViewport(1).width)canvas.width = viewport.width * ratiocanvas.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 = pdfthis.pages = this.pdfDoc.numPagesthis.$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(){undefinedconsole.log("scroll");});
注意：iframe监听滚动有兼容问题，如果有监听滚动需求建议直接使用pdf.js;
若无滚动监听需要建议直接使用iframe，简单方便快捷
总结
两种形式展示pdf,亲测有效哦
