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

相关推荐
麟城Lincoln34 分钟前
【RHCSA-Linux考试题目笔记(自用)】servera的题目
linux·笔记·考试·rhcsa
丰锋ff1 小时前
计网学习笔记第2章 物理层(灰灰题库)
笔记·学习
阿絮~3 小时前
Apache RocketMQ进阶之路阅读笔记和疑问
笔记·apache·rocketmq
天水幼麟8 小时前
动手学深度学习-学习笔记(总)
笔记·深度学习·学习
天水幼麟10 小时前
动手学深度学习-学习笔记【二】(基础知识)
笔记·深度学习·学习
绿皮的猪猪侠10 小时前
算法笔记上机训练实战指南刷题
笔记·算法·pta·上机·浙大
沧海一笑-dj11 小时前
【51单片机】51单片机学习笔记-课程简介
笔记·学习·51单片机·江科大·江科大学习笔记·江科大单片机·江科大51单片机
老虎062711 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
大苏打seven12 小时前
Docker学习笔记:Docker网络
笔记·学习·docker
kikikidult16 小时前
(2025.07)解决——ubuntu20.04系统开机黑屏,左上角光标闪烁
笔记·ubuntu