目前大多数PC浏览器支持在线预览pdf文件，但大多数手机浏览器还未支持，尝试用手机浏览器打开一个pdf文件会弹出是否下载的提示框。网上查了一些资料，在实现的过程中，还是走了比较多的弯路，最后采用了备受推荐的pdf.js插件来实现。

pdf.js可以从github上clone下来，然后本地gulp生成可用的pdf.js和pdf.worker.js(参考readme即可)。

不过更简单的方法是使用cnpm来安装： cnpm isntall --save pdfjs-dist，然后可以在项目中使用了，我使用插件的方式。具体使用示例：

pdf.vue

上一页下一页

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)

}

}

}

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%;

}

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')

}

// ...

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。