vue插件开发之使用插件开发之使用pdf.js实现手机端在线预览实现手机端在线预览pdf文档的方法文档的方法
目前大多数PC浏览器支持在线预览pdf文件，但大多数手机浏览器还未支持，尝试用手机浏览器打开一个pdf文件会弹出是否
下载的提示框。网上查了一些资料，在实现的过程中，还是走了比较多的弯路，最后采用了备受推荐的pdf.js插件来实现。
pdf.js可以从github上clone下来，然后本地gulp生成可用的pdf.js和pdf.worker.js（参考readme即可）。
不过更简单的方法是使用cnpm来安装： cnpm isntall –save pdfjs-dist，然后可以在项目中使用了，我使用插件的方式。具体
使用示例：
pdf.vue
<template><p id="container">
<!-- <p class='pdf-page'> -->
<canvas id="the-canvas"></canvas></p><p class="foot" v-if="pdfDoc"><button class="left" click="onPrevPage" v-if="pageNum>1">上一页</button>
<button class="right" click="onNextPage" v-if="pageNum<pdfDoc.numPages">下一页</button></p>
<!-- </p> --><p></p>
</template>
<script>
import PDFJS from 'pdfjs-dist'
export default {
data () {
return {
pdfDoc: null,
pageNum: 1,
pageRendering: false,
pageNumPending: null,
scale: 0.9
}
},
methods: {
showPDF (url) {
let _this = this
PDFJS.getDocument(url).then(function (pdf) {
_this.pdfDoc = pdf
_this.renderPage(1)
})
},
renderPage (num) {
this.pageRendering = true
let _this = this
this.pdfDoc.getPage(num).then(function (page) {
var viewport = page.getViewport(_this.scale)
let canvas = document.getElementById('the-canvas')
canvas.height = viewport.height
canvas.width = viewport.width
// Render PDF page into canvas context
var renderContext = {
canvasContext: canvas.getContext('2d'),
viewport: viewport
}
var renderTask = page.render(renderContext)
// Wait for rendering to finish
renderTask.promise.then(function () {
_this.pageRendering = false
if (_this.pageNumPending !== null) {
// New page rendering is pending
this.renderPage(_this.pageNumPending)
_this.pageNumPending = null
}
})
})
},
queueRenderPage (num) {
if (this.pageRendering) {
this.pageNumPending = num
weixin_38696336
- 粉丝: 3
- 资源: 923
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
评论0