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

相关推荐
递归不收敛3 小时前
大语言模型(LLM)入门笔记:嵌入向量与位置信息
人工智能·笔记·语言模型
冷雨夜中漫步3 小时前
高级系统架构师笔记——数据库设计基础知识(5)Armstrong公理系统、无损连接和有损连接
笔记·系统架构
im_AMBER4 小时前
算法笔记 05
笔记·算法·哈希算法
Element_南笙5 小时前
吴恩达新课程:Agentic AI(笔记2)
数据库·人工智能·笔记·python·深度学习·ui·自然语言处理
koo3646 小时前
李宏毅机器学习笔记21-26周汇总
人工智能·笔记·机器学习
.小小陈.6 小时前
数据结构2:单链表
c语言·开发语言·数据结构·笔记·学习方法
立志成为大牛的小牛6 小时前
数据结构——二十三、并查集的终极优化(王道408)
开发语言·数据结构·笔记·学习·程序人生·考研
全栈游侠7 小时前
04-优先级与延时链表
笔记
im_AMBER7 小时前
React 01
前端·javascript·笔记·react.js·前端框架·web
稻草猫.7 小时前
文件 IO
java·笔记·后端·java-ee·idea