vue中如何实现pdf文件预览的方法(2)

// index.js import PDF from './pdf' var $vmexport 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) } } }

3. 在main.js中引入

import pdf from './components/pdf' Vue.use(pdf)

这样就可以全局使用了，使用的时候就直接使用，本文是在一个图片展示 的地方加上一个点击事件，点击时触发该函数即可；

function showPdf() { let url = 'https://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf' // let url = 'https://ecs7.tokopedia.net/instant-loan/file/29a2218e-bef9-44cb-b92b-8e81bc4d5228_DOC-20171013-WA0035.pdf' this.$showPDF(url) }

文中添加了关闭功能，点击close即可关闭pdf的展示, 同时组件中也有分页功能，如果页数大于1就会显示下一页按钮；

以上既是本人实现的过程，至于跨域问题，我这边还没遇到，现在是本地访问可以的，等到线上再看看行不行，如果不行后边再追加方法实现。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章: