vue前台解析pdf文件流(Vue实现在线预览pdf文件功能利用pdf.js/iframe/embed)
类别:编程学习 浏览量:1583
时间:2022-01-19 00:12:17 vue前台解析pdf文件流
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文件内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- ant design 的vue批量操作(ant desing vue table 实现可伸缩列的完整例子)
- vue定时器中间变颜色(Vue如何优雅的清除定时器)
- vue页面关闭前的执行(Vue 页面监听用户预览时间功能的实现代码)
- vue项目的一些手动配置(使用vue项目配置多个代理的注意点)
- vue实现图片上传数据库(vue.js根据图片url进行图片下载)
- vue本地图片切换(vue动态加载本地图片的处理方法)
- vue虚拟dom如何转换成真实dom的(vue中对虚拟dom的理解知识点总结)
- vue跨域代理怎么写(解决vue $http的get和post请求跨域问题)
- vue3 axios 怎么封装api(vue中如何简单封装axios浅析)
- vuex怎么使用数据(vuex的辅助函数该如何使用)
- vue中的定时函数(vue计时器的实现方法)
- vue实现双向绑定原理(vue实现双向数据绑定)
- vue elementui 公共列表组件(Vue Element-ui表单校验规则实现)
- vue 手机端tab切换页面不刷新(vue Tab切换以及缓存页面处理的几种方式)
- vue怎么配置到idea(idea编译器vue缩进报错问题场景分析)
- vue路由跳转自动定位在哪里(Vue路由this.route.push跳转页面不刷新的解决方案)
- 得这个 难治病 的人太多了,300个人赶到杭州商量怎么办(得这个难治病的人太多了)
- 经度,世界时间腕表的灵魂(世界时间腕表的灵魂)
- 阿里最新财报公布 三季度营收增长3 ,将增加150亿美元回购额度 在美股价小涨(阿里最新财报公布)
- 赵薇时胖时瘦 最近变美少女 原因在这里 躺着就变瘦(赵薇时胖时瘦最近变美)
- 学会这26种姿势,你就可以和兵哥哥切磋了(你就可以和兵哥哥切磋了)
- 吴彦祖陈冠希 恩怨 ,失去曾让他流泪的女友,终遇走过18年真爱(吴彦祖陈冠希恩怨)
热门推荐
- docker可以快速的创建和删除(Docker 命令自动补全的实现)
- windows连接云服务器的软件(Windows云服务器如何开启ping?)
- dedecms简介(Linux操作系统下DedeCMS详细安全设置教程)
- SQL中not in有Null值时
- python图像仿射变换(详解Python计算机视觉 图像扭曲仿射扭曲)
- 能自动点赞的小程序(python实现QQ空间自动点赞功能)
- python标准库操作键盘(Python中捕获键盘的方式详解)
- dedecms是静态吗(dedecms全站伪静态的实现方法及注意事项)
- sql server存储过程详解(SQL Server存储过程中编写事务处理的方法小结)
- C#中Dispose、析构函数、close的区别
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9