Vue实现在线预览pdf文件功能(利用pdf.js/iframe/embed)

 更新时间:2021年06月02日 14:45:25   作者:小孬种  
项目要求需要预览pdf文件,网上找了很久,发现pdf.js的效果,这篇文章主要给大家介绍了关于Vue实现在线预览pdf文件功能,主要利用pdf.js/iframe/embed来实现的,需要的朋友可以参考下

前言

最近在做一个精品课程,需要在线预览课件ppt,我们的思路是将ppt转换为pdf在线预览,所以问题就是如何实现在线预览pdf了。

在实现的过程中,为了更好地显示效果,我采用了多种不同的方法,最终选择效果最好的pdf.js。

实现方法:

1:iframe

采取iframe将pdf嵌入网页从而达到预览效果,想法很美好,实现很简单,但显示很残酷…

虽然一行代码简洁明了,打开谷歌浏览器效果也还行,但缺点也是十分明显的!!!!

<iframe src="http......" width="100%"></iframe>

缺点:

(1)不兼容IE,因为iframe毕竟不规范,IE已经不采用它了

(2)下载弹窗!!!每次打开预览都弹出下载弹窗,用户体验极度不好

2:embed

embed和iframe感觉差不多的东西,用起来感觉一样简洁明了,打开IE效果也还行,但仍然无法避免下载弹窗的干扰。

 <embed src="http......" width="100%" height="400" />

3:pdf.js(效果感觉最好)

实现步骤:

(1)下载pdf.js文件

因为pdf.js文件比较多,我们要用的只是核心文件,所以将核心文件抽出来(已处理跨域报错)。点击下载核心文件

(2)在static中引入核心文件

(3)使用

<template>
	<iframe :src="pathUrl" width="100%"></iframe>
</template>

<script>
export default {
	data () {
	   return {
	     pathUrl:''
	   }
	 },
	 mounted () {
      this.pathUrl = '../../../../../static/pdf/web/viewer.html?file=' + encodeURIComponent('https://lidn02.o%BA.pdf')   // 找到之前引进来pdf文件中的的viewe.html并+pdf地址
    },
 }
</script>

(4)效果
各大主流浏览器均兼容。

(5)以流的形式接收pdf

虽然上面已经实现效果了,但打开控制台还是有一行报错:

为了解决这个问题,或者遇到跨域时都采用流的形式接受pdf文件,再进行展示:

mounted(){
	this.getData(你的pdf地址)
}

//接收文件流转换地址再显示
 getData(url){
  axios.get(url,{
    responseType:'blob',
  })
    .then(res => {
      let blob = new Blob([res.data], {type: "application/vnd.ms-excel"})
      let objectUrl = URL.createObjectURL(blob)
      this.pathUrl = '../../../../../static/pdf/web/viewer.html?file=' + objectUrl
    })
    .catch(err => {
      console.log(err)
    })
}

总结

到此这篇关于Vue实现在线预览pdf文件功能的文章就介绍到这了,更多相关Vue在线预览pdf文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue+egg+jwt实现登录验证的示例代码

    vue+egg+jwt实现登录验证的示例代码

    这篇文章主要介绍了vue+egg+jwt实现登录验证的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue的hash值原理也是table切换实例代码

    vue的hash值原理也是table切换实例代码

    这篇文章主要介绍了vue的hash值原理也是table切换,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-12-12
  • Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例

    Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例

    这篇文章主要介绍了Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例,帮助大家更好的理解和学习vue,感兴趣的朋友可以了解下
    2020-11-11
  • 解决vue刷新页面以后丢失store的数据问题

    解决vue刷新页面以后丢失store的数据问题

    这篇文章主要介绍了解决vue刷新页面以后丢失store的数据问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue根据进入的路由进行原路返回的方法

    vue根据进入的路由进行原路返回的方法

    今天小编就为大家分享一篇vue根据进入的路由进行原路返回的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 详解webpack+vue-cli项目打包技巧

    详解webpack+vue-cli项目打包技巧

    本篇文章主要介绍了详解webpack+vue-cli项目打包技巧 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • 关于vue表单提交防双/多击的例子

    关于vue表单提交防双/多击的例子

    今天小编就为大家分享一篇关于vue表单提交防双/多击的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Vue.js实现微信过渡动画左右切换效果

    Vue.js实现微信过渡动画左右切换效果

    这篇文章主要给大家介绍了利用Vue.js仿微信过渡动画左右切换效果的相关资料,需要用到的技术栈是Vue+Vuex。文中通过示例代码介绍的非常详细,对大家具一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-06-06
  • Vue中 key keep-alive的实现原理

    Vue中 key keep-alive的实现原理

    这篇文章主要介绍了Vue中 key keep-alive的实现原理,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 浅析vue-router jquery和params传参(接收参数)$router $route的区别

    浅析vue-router jquery和params传参(接收参数)$router $route的区

    今天做项目时踩到了vue-router传参的坑(jquery和params),所以决定总结一下二者的区别。感兴趣的朋友跟随脚本之家小编一起看看吧
    2018-08-08

最新评论