pdf预览在vue项目中的使用兼容ie浏览器
最近做项目有需求需要pdf在线预览并支持下载,而且还要兼容ie浏览器,之前又是使用过vue-pdf插件在chrome上没有问题但是在ie上不兼容。最后使用了pdf.Js这个原生库,虽然网上有许多使用教程但是还是踩了不少坑,所以在此记录下来。
一、下载pdf.js这个插件
链接: https://pan.baidu.com/s/1RVeDiPQKG4GfBNbwc_fqqQ 提取码: 4dgg也可以在官网上下载或者在github上下载(官网上贼慢)
二、将下面两个文件复制到项目中
需要找到build和web这两个文件夹放在项目的public下(使用的是vue-cli3)
三、直接可以在项目中使用了不需要额外的引入
有三种方式可以预览pdf,都需要注意路径问题:
pSrc为预览pdf的完整路径:
第一个红色框里面为 打开pdf.js的地址需要根据自己放置文件的地址进行修改。
第二个红色框内为需要预览的pdf的完整地址,需要使用pdf自带的方法encodeURIComponent()进行解析。
路径处理完,就可以根据自己的情况使用下面三种方法进行预览了
1、使用iframe标签直接引入
2、使用a标签在本页面直接预览
3、使用window.open打开新的页面进行预览
预览效果如图:
四、遇到的问题
1、 在pdf预览的时候可能会存在跨域问题
这个问题我没有遇到但是看到别的小伙伴有遇到这个问题,所以说下看到的解决办法吧:
找到复制pdf的文件夹web下的viewer.js 然后找到下图中的代码直接注释掉就可以了
2、ie浏览器不兼容问题
在这个问题上浪费了不少时间,我们后端给返回的是文件流的形式,直接使用上面的方法进行预览,在Chrome和其他浏览器上都可以正常预览,但是在ie浏览器上有时候可以打开,更多的时候会报下图中的错误,预览失败,在网上也搜索到了有小伙伴遇到这个问题但是没有解答,试了好多方法都不好使(包括让后端返回流时添加文件类型的标识),最后偶然发现一个博主的git的案例找到了解决方法.
猜测原因是因为后端返回的流ie浏览器因为某些原因老是解析失败.
解决办法: 直接返回文件在服务器中存放的地址,可以在浏览器中直接访问的url就可以了.
3、预览文件title标题标题问题
因为后端查找在服务器上的文件是id的地址,所以预览的时候自动换的就是id值或者是undefined,现在手动添加预览文件名
问题如下图所示:
解决方法:
步骤1
找到viewer.js中的代码进行改动如下图:
解析预览地址中faleName的参数。
步骤2
因为修改了解析url中的faleName字段所以我们在代码中的预览地址直接加上这个参数字段并且把返回来的文件名拼接上就可以了。如下图:
解决后的效果如下图:
最后放上那位博主的git地址链接:https://github.com/goSunadeod/vue-pdf.js-demo
大家作为对照参考,如果有帮助到你,给那位博主支持一下。
pdf预览在vue项目中的使用兼容ie浏览器相关推荐
- vue项目中解决打开新页浏览器拦截的问题
项目中,如果通过接口获取数据,并在then中打开新页面会提示浏览器阻止,如何解决呢? 其实很简单: 1.定义一个url data(){return{url:''} } 2.监听该url,url发生变化 ...
- Vue项目中添加锁屏功能
0. 直接上 预览链接 Vue项目中添加锁屏功能 1. 实现思路 ( 1 ) 设置锁屏密码 ( 2 ) 密码存localStorage (本项目已经封装h5的sessionStorage和localS ...
- VUE-PDF VUE的PDF预览组件
VUE-PDF VUE的PDF预览组件 vue.js pdf viewer 安装 npm install --save vue-pdf 示例 <template><pdf src=& ...
- vue项目中阻止浏览器返回上一页
vue项目中在某个页面阻止浏览器返回上一页,适用移动端.PC端. 使用场景例如: 首页 与 A页面 来回跳转,那样点击浏览器返回时也会来回跳转,本想当页面在首页的时候就不再返回了,所以这个时候 ...
- vue项目中浏览器图标的设置
在vue项目中,我们怎样设置浏览器图标? 我们来看vue项目的目录结构,根目录下有一个index.html,这个就相当于我们普通项目中的各个html页面文件,所以设置方法就是在index.html的h ...
- vue 项目中分别使用 vue-pdf 插件和内嵌 iframe 实现 PDF 文件预览,缩放,旋转,下载,保存等功能 ?
需求:在 vue 和 element-ui 项目中,有点击按钮预览,下载,打印 PDF 文件 需求,要求支持 PDF 的预览,上下页切换,首尾页切换,页码选择跳转,放大缩小,顺时针逆时针旋转,下载, ...
- vue 项目中实现pdf预览 pdf打印 pdf下载
在Vue项目中实现PDF预览.打印和下载可以通过以下步骤来实现: 安装pdf.js pdf.js是一个JavaScript库,可以用于在Web上渲染PDF文件. 可以使用npm安装pdf.js,命令如 ...
- vue项目中预览pdf文件
一.利用浏览器自带的预览pdf // [pdfUrl] 获取pdf地址 eg:http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pl ...
- vue中pdf预览组件_Vue+ElementUI使用vue-pdf实现预览功能
Vue + ElementUI项目中使用vue-pdf实现简单预览,供大家参考,具体内容如下 1.安装 vue-pdf npm install --save vue-pdf 2.在vue页面中导入对应 ...
最新文章
- iOS视频流采集概述(AVCaptureSession)
- 虚拟机中的黑苹果系统经常卡死_程序员吐槽macOS 10.15系统:破坏SSH默认规则
- Struts2中的拦截器
- 逐步转向自己主动化測试
- FPGA设计的常用思想与技巧(转)
- Angular15 利用ng2-file-upload实现文件上传
- 小黑框运行java_初探Java类加载机制
- 修改帝国cms验证码 每个都不一样
- centos samba 看不到共享目录_linux入门系列--文件共享之Samba和NFS
- 【BZOJ4011】【HNOI2015】落忆枫音 题解
- 网易云登陆界面怎么用PHP做,网易云音乐登录流程图
- 移植linux内核串口配置,uClinux内核的移植 - bootloader对uClinux的S3C44B0移植
- 雾霾不散,课就不得不停?
- 学校教务系统服务器配置,校园小程序: 基于强智教务系统的校园服务类小程序--多校版本(默认 山科)使用云开发...
- openstack环境搭建之六horizon配置
- 3ds Max 实验十五 UV展开综合运用
- Linux命令查询服务器名称和型号
- 英国脱欧给云计算行业带来震动:六大典型场景解析
- 【立创开源】GL823K 读卡器
- 河南林业职业技术学院计算机专业校企合作,河南林业职业学院2016年校企合作方案...