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打开即可

相关推荐
骁的小小站18 小时前
Verilator 和 GTKwave联合仿真
开发语言·c++·经验分享·笔记·学习·fpga开发
kkkkk02110618 小时前
软考高级-系统架构设计师案例专题三:系统开发基础
笔记·系统架构
新子y1 天前
【小白笔记】区分类方法/实例方法和静态函数/命名空间函数
笔记·分类
梁辰兴1 天前
企业培训笔记:外卖平台后端--套餐管理模块--新建套餐信息
笔记·vue·mybatis·springboot·外卖管理系统
degen_1 天前
第一次进入 PEICORE 流程
c语言·笔记
YJlio1 天前
Process Monitor 学习笔记(5.24):工具栏参考与高效快捷键指南
笔记·学习·php
摇滚侠1 天前
Spring Boot 3零基础教程,WEB 开发 Thymeleaf 核心语法 笔记39
spring boot·笔记·后端·thymeleaf
张人玉1 天前
WPF 常用样式属性及示例笔记
笔记·wpf
报错小能手1 天前
linux学习笔记(49)Redis详解(1)
linux·笔记·学习
QT 小鲜肉1 天前
【个人成长笔记】在本地Windows系统中如何正确使用adb pull命令,把Linux系统中的文件或文件夹复制到本地中(亲测有效)
linux·windows·笔记·学习·adb