html显示PDF并兼容IE浏览器的解决方案

方案一、vue-pdf插件

缺点:IE11显示空白,编译后的Edge测试环境可以正常线上,打到线上报错,谷歌和百分浏览器显示完美

1、vue 只显示核心代码,需要安装vue-pdf插件

html 复制代码
<vue-pdf :src="ivcPdfUrl"></vue-pdf>

import pdf from 'vue-pdf';

components: {'vue-pdf': pdf},

// 动态赋值url
this.ivcPdfUrl = pdfUrl; 
         

IE空白效果,控制台无报错

方案二、ifream标签【采纳】

原理:使用各浏览器对现实pdf的支持

缺点:不同的浏览器显示的样式不同

1、样例代码

html 复制代码
<iframe :src="ivcPdfUrl" 
    style="min-height: 550px;
    width:100%;
    margin:0;
    border:0;">
</iframe>

2、各个浏览器效果图(这里用个模态框显示的,测试数据哈,就不打码了)

1)百分(谷歌内核)

2)谷歌

3)Edge

4)IE11

重点!!!

IE默认使用ifream会直接让选择下载...这里不截图了

原因:IE没有对IE显示的内置程序,默认的处理方式就是下载

解决:安装对应的处理插件:adobe pdf reader,linux和mac也有对应的安装包的,亲测2015版本2015版本的可用

注:

IE设置:

Intenet选项》程序》管理加载项》显示》未经许可允许》双击

默认的.pdf用pdf reader打开即可

相关推荐
阿群今天学习了吗2 小时前
RNN、LSTM、Transformer推荐博文
人工智能·笔记·python·学习·算法
五行缺弦2 小时前
Java 笔记 封装(Encapsulation)
笔记
饭碗的彼岸one2 小时前
重生之我在10天内卷赢C++ - DAY 2
linux·开发语言·c++·笔记·算法·vim
小豪GO!3 小时前
MySQL索引和事务笔记
数据库·笔记·mysql
rannn_1117 小时前
【MySQL学习|黑马笔记|Day3】多表查询(多表关系、内连接、外连接、自连接、联合查询、子查询),事务(简介、操作、四大体系、并发事务问题、事务隔离级别)
数据库·笔记·后端·学习·mysql
五行缺弦8 小时前
Java 笔记 transient 用法
java·笔记
使一颗心免于哀伤8 小时前
《设计模式之禅》笔记摘录 - 11.策略模式
笔记·设计模式
sealaugh328 小时前
aws(学习笔记第五十课) ECS集中练习(2)
笔记·学习·aws
ATaylorSu9 小时前
排序算法入门:直接插入排序详解
笔记·学习·算法·排序算法
三不原则9 小时前
运维笔记:HTTP 性能优化
运维·笔记·http