目前大多数PC浏览器支持在线预览pdf文件,但大多数手机浏览器还未支持,尝试用手机浏览器打开一个pdf文件会弹出是否下载的提示框。网上查了一些资料,在实现的过程中,还是走了比较多的弯路,最后采用了倍受推荐的pdf.js插件来实现(文末附Demo)。
pdf.js可以从github上clone下来,然后本地gulp生成可用的pdf.js和pdf.worker.js(参考readme即可)。github地址是:https://github.com/mozilla/pdf.js。
不过更简单的方法是使用cnpm来安装: cnpm isntall --save pdfjs-dist,然后可以在项目中使用了,我写成了插件的形式。具体使用示例:
pdf.vue
<template>
<div id="container">
<!-- <div class='pdf-page'> -->
<canvas id="the-canvas"></canvas>
<div class="foot" v-if='pdfDoc'>
<button class='left' v-if="pageNum>1" @click="onPrevPage">上一页</button>
<button class='right' v-if="pageNum<pdfDoc.numPages" @click="onNextPage">下一页</button>
</div>
<!-- </div> -->
</div>
</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
} else {
this.renderPage(num)
}
},
onPrevPage () {
if (this.pageNum <= 1) {
return
}
this.pageNum--
this.queueRenderPage(this.pageNum)
},
onNextPage () {
if (this.pageNum >= this.pdfDoc.numPages) {
return
}
this.pageNum++
this.queueRenderPage(this.pageNum)
}
}
}
</script>
<style scoped>
#container {
background-color: rgba(0,0,0,0.75);
position:fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
padding: 5px;
}
.pdf-page {
}
.foot {
position: fixed;
transform: translate(-50%,0);
left: 50%;
}
</style>
index.js:
import PDF from './PDF'
var $vm
export default {
install (Vue, options) {
if (!$vm) {
const PDFPlugin = Vue.extend(PDF)
$vm = new PDFPlugin().$mount()
document.body.appendChild($vm.$el)
}
Vue.prototype.$showPDF = function (url) {
$vm.showPDF(url)
}
}
把两个文件放到同一文件夹pdf中形成一个插件,在main.js引入并use:
import pdf from '@/components/pdf'
Vue.use(pdf)
这样,在需要显示pdf的地方调用vue的$showPDF方法即可。
效果显示(手机浏览器验证显示正常):
不过需要注意一点问题是:
pdf.js不能处理跨域文件和本地文件,所以本地调试的时候应该请求服务器的文件,如果请求的是远程服务器,存在跨域,那就需要在config/index.js中配置一下代理:
-
// ...
-
proxyTable: {
-
'/media': {
-
target: 'https://xxxx.cn', // 换成正确的服务器域名
-
changeOrigin: true,
-
pathRewrite: {
-
'^/media': '/media'
-
}
-
}
-
}
-
// ...
然后在使用的地方填相对路径即可:
-
// ...
-
mounted () {
-
this.$showPDF('/media/up/2018/3/9/494079c7ec333bd371798dd0a73c0a0b.pdf')
-
}
-
// ...
------------------------------
2018.05.28更新
对于有小伙伴提出的模糊性问题,在网上查找了一些资料后发现canvas显示模糊与设备像素比有关系,所以重写了一个Demo。优化了自适应屏幕大小显示、多页显示,解决了模糊性问题。附地址:https://github.com/Lushenggang/show-pdf
-----------------------------
2019.06.04更新
写了一个改进版本,一次性加载改进为分页加载,地址:https://github.com/Lushenggang/pdf-preview