话不多说先展示效果

开篇说明:

pdfjs指的是:http://mozilla.github.io/pdf.js/
或者https://github.com/mozilla/pdf.js

注：该实现的底层为canvas渲染，本人亲自体验，渲染较大的pdf等待时间会比较长，用手机查看效果可能会出现渲染不全的情况

正文

本教程使用的pdfjs版本是"pdfjs-dist": “^2.3.200”,
如果读者安装教程走一遍发现报错,可以把版本改成和作者一致,再install

本文参考的是 pdfjs官网npm版本的使用示例,结合vue写的
官网npm版本地址https://github.com/mozilla/pdf.js/blob/master/examples/node/getinfo.js

第一步安装
项目目录下
npm install pdfjs-dist --save

第二步获得PDF地址
大概逻辑:先声明一些变量,然后获得PDF线上地址,最后调用下一步的初始化函数.
函数get_pdfurl()默认加载的是PDFjs给的在线PDF文档例子地址,外网比较慢,要等五分钟左右,可以注释掉,直接加载自己项目的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放大系数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.urlthis._loadFile(this.pdf_src)})}

第三步:初始化

let PDFJS = require('pdfjs-dist');

_loadFile (url) {  //初始化pdflet loadingTask = PDFJS.getDocument(url)loadingTask.promise.then((pdf) => {this.pdfDoc = pdfthis.pdf_pages = this.pdfDoc.numPagesthis.$nextTick(() => {this._renderPage(1)})})},

1.先引入pdfjs,作者和官网例子保持一致用的require没有用import.
2.引入之后 2.3版本返回的是个promise,不是以前的回调函数
3.该promise成功的话会返回一个pdfjs的实例, this.pdfDoc = pdf把该实例保存下,后面有用
4.滚动翻页也要知道总页数,所以 this.pdf_pages = this.pdfDoc.numPages 保持总页数
5.因为pdfjs其实是把PDF文件渲染成canvas,所以vue加载完dom后,要用nexttick调用渲染pdf函数

第四步,渲染

_renderPage (num) {  //渲染pdf页const that = thisthis.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({ scale: this.pdf_scale })canvas.width = viewport.width * ratiocanvas.height = viewport.height * ratiocanvas.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的函数来实现
2.that.pdf_div_width = viewport.width + ‘px’
这句话是拿到pdf文件的宽度,不同的PDF文件在1.0的缩放下宽度是不确定的,如果想让渲染的PDF居中,需要canvas元素外面嵌套层div,该div的宽度就是pdf_div_width

总结

读者直接把博客中的代码复制到自己的项目中,修改下获取PDF地址函数就可以直接用了,
完整的dome在这 https://gitee.com/huazi-zhanye/pdf-js_-deme

vue + pdf.js实现浏览器查看pdf文件相关推荐

Asp.net Core 配合 PDFObject 和 pdf.js 在浏览器显示pdf文件
Asp.net Core 配合 PDFObject 和 pdf.js 在浏览器直接显示pdf文件测试环境的浏览器版本: Chrome :90.0.4430.93(64 位) FireFox :88. ...
fis3+vue+pdf.js制作预览PDF文件或其他
人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠 ...
android 在线解析pdf文件格式,Android PDF预览阅读：用Mozilla PDF.js浏览本地在线PDF文件 | KaelLi的博客...
在之前的Android端预览PDF方案一文中,曾经提到了使用Mozilla的PDF.js来加载PDF的办法,今天就详细的说一下具体的实现. 简介 PDF.js是一个使用HTML5构建的PDF查看器.由 ...
JS实现浏览器打印PDF（使用HttpPrinter打印插件）
JS实现浏览器打印PDF(使用HttpPrinter打印插件) 第一步:启动HttpPrinter打印插件第二步:用浏览器打开示例文件\调用示例\websocket协议示例\html\打印pdf.h ...
RAD PDF于Web浏览器的PDF阅读器
RAD PDF 基于Web浏览器的PDF阅读器作为功能最完备的基于HTML的PDF查看器,编辑器和ASP.NET的表单填充器,提供了灵活而强大的替代常规PDF解决方案.与Adobe Acroba ...
vue版pdf.js 在线预览pdf文件流
1.简介由于我使用的是若依版的vue前端框架(ElementUI二开),因此不知道为什么在前端配置pdf.js一直无法生效,所以换了一个思路,将pdf.js相关文件放置在后台代码中,以访问后台页面的 ...
springboot+vue整合pdf.js实现预览pdf
前景回顾: 上一次说到使用浏览器自带的预览pdf功能所遗留的问题,360浏览器不够给力,IE的我没测,估计也不行,于是乎我又翻阅资料(度娘)找到了一种新的实现方式,使用pdf.js实现如果想看使用浏 ...
PDF.js实现在线展示pdf文件
背景现在很多项目开发过程中都会碰到PDF在线预览的需求,对于PC端浏览器,一般直接提供PDF文件,iframe一下就可以直接预览.但在移动端要预览PDF则较为麻烦,有些浏览器检测到文件流,就会直接下 ...
uniapp 使用pdf.js 加载本地pdf文件报错问题
最近有在做一个移动端的应用,应用里涉及到大量的js游戏开发,使用Android原生做不太合适,就选择了uniapp,其中有一个功能是读取本地的pdf文件并展示.在网上查了点资料都是用pdf.js来开发 ...
html 加载pdf文件内容不显示不出来,pdf.js首次加载pdf文件时找不到pdf文件，刷新后才能出现pdf文件...
前台点击文件学码的定一近,更工广款近,更工广款近,更名后,后台通过openoffice将doc文件转为pdf格式文件,然后存放在服务器tomcat'中,pdf.js首次加载服务器中tomcat中的转化 ...

vue + pdf.js实现浏览器查看pdf文件

话不多说先展示效果

开篇说明:

注：该实现的底层为canvas渲染，本人亲自体验，渲染较大的pdf等待时间会比较长，用手机查看效果可能会出现渲染不全的情况

正文

总结

vue + pdf.js实现浏览器查看pdf文件相关推荐

最新文章

热门文章