@H_404_0@目前大多数PC浏览器支持在线预览pdf文件,但大多数手机浏览器还未支持,尝试用手机浏览器打开一个pdf文件会弹出是否下载的提示框。网上查了一些资料,在实现的过程中,还是走了比较多的弯路,最后采用了备受推荐的pdf.js插件来实现。
@H_404_0@pdf.js可以从github上clone下来,然后本地gulp生成可用的pdf.js和pdf.worker.js(参考readme即可)。
@H_404_0@不过更简单的方法是使用cnpm来安装: cnpm isntall --save pdfjs-dist,然后可以在项目中使用了,我使用插件的方式。具体使用示例:
@H_404_0@pdf.vue @H_404_0@index.js:
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)
}
}
}
@H_404_0@把两个文件放到同一文件夹pdf中形成一个插件,在main.js引入并use:
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)
}
}
}