目前大多数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 = thisPDFJS.getDocument(url).then(function (pdf) {_this.pdfDoc = pdf_this.renderPage(1)})},renderPage (num) {this.pageRendering = truelet _this = thisthis.pdfDoc.getPage(num).then(function (page) {var viewport = page.getViewport(_this.scale)let canvas = document.getElementById('the-canvas')canvas.height = viewport.heightcanvas.width = viewport.width// Render PDF page into canvas contextvar renderContext = {canvasContext: canvas.getContext('2d'),viewport: viewport}var renderTask = page.render(renderContext)// Wait for rendering to finishrenderTask.promise.then(function () {_this.pageRendering = falseif (_this.pageNumPending !== null) {// New page rendering is pendingthis.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中配置一下代理：

1. // ...

2. proxyTable: {

3. '/media': {

4. target: 'https://xxxx.cn', // 换成正确的服务器域名

5. changeOrigin: true,

6. pathRewrite: {

7. '^/media': '/media'

8. }

9. }

10. }

11. // ...

然后在使用的地方填相对路径即可：

1. // ...

2. mounted () {

3. this.$showPDF('/media/up/2018/3/9/494079c7ec333bd371798dd0a73c0a0b.pdf')

4. }

5. // ...

------------------------------

2018.05.28更新

对于有小伙伴提出的模糊性问题，在网上查找了一些资料后发现canvas显示模糊与设备像素比有关系，所以重写了一个Demo。优化了自适应屏幕大小显示、多页显示，解决了模糊性问题。附地址：https://github.com/Lushenggang/show-pdf

-----------------------------

2019.06.04更新

写了一个改进版本，一次性加载改进为分页加载，地址：https://github.com/Lushenggang/pdf-preview