Python语言技术文档

微信小程序技术文档

php语言技术文档

jsp语言技术文档

asp语言技术文档

C#/.NET语言技术文档

html5/css技术文档

javascript

点击排行

您现在的位置:首页 > 技术文档 > js框架/js库

vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法

来源:中文源码网    浏览:173 次    日期:2024-03-25 16:59:30
【下载文档:  vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法.txt 】


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


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: 'http://xxxx.cn', // 换成正确的服务器域名
changeOrigin: true,
pathRewrite: {
'^/media': '/media'
}
}
}
// ...
然后在使用的地方填相对路径即可:
// ...
mounted () {
this.$showPDF('/media/up/2018/3/9/494079c7ec333bd371798dd0a73c0a0b.pdf')
}
// ...
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持中文源码网。

相关内容