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

news2024/12/25 22:06:20

方案一、vue-pdf插件

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

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

<vue-pdf :src="ivcPdfUrl"></vue-pdf>

import pdf from 'vue-pdf';

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

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

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

方案二、ifream标签【采纳】

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

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

1、样例代码

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1624846.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

决策树分析及其在项目管理中的应用

决策树分析是一种分类学习方法&#xff0c;其主要用于解决分类和回归问题。在决策树中&#xff0c;每个内部节点表示一个属性上的测试&#xff0c;每个分支代表一个属性输出&#xff0c;而每个叶节点则代表类或类分布。通过从根节点到内部节点的路径&#xff0c;可以构建一系列…

commvault学习(6):备份oracle(包括oracle的安装)

1.环境 CS、MA&#xff1a;一台windows server2012 客户端&#xff1a;2台安装了oracle11g的windows server2008 1.1 windows server2008安装oracle11g &#xff08;1&#xff09;右击安装包内的setup&#xff0c;以管理员方式运行 &#xff08;2&#xff09;取消勾选接收安…

PFA容量瓶耐受强酸强碱进口特氟龙材质定容瓶

PFA容量瓶&#xff0c;也叫特氟龙容量瓶&#xff0c;是用于配制标准浓度溶液的实验室器皿&#xff0c;是有着细长颈、梨形肚的耐强腐蚀平底塑料瓶&#xff0c;颈上有标线&#xff0c;可直接配置标准溶液和准确稀释溶液以及制备样品溶液。 因其有着不易碎、材质纯净、化学稳定性…

用docker方式安装openGauss数据库的事项记录

文章目录 &#xff08;一&#xff09;背景&#xff08;二&#xff09;安装&#xff08;2.1&#xff09;安装docker&#xff08;2.2&#xff09;安装openGauss &#xff08;三&#xff09;运行&#xff08;3.1&#xff09;运行openGauss镜像&#xff08;3.2&#xff09;连接open…

docker安装【zookeeper】【kafka】【provectuslabs/kafka-ui】记录

目录 1.安装zookeeper:3.9.2-jre-172.安装kafka:3.7.03.安装provectuslabs/kafka-ui &#xff08;选做&#xff09;新环境没有jdk&#xff0c;安装jdk-17.0.10备用 mkdir -p /export/{data,apps,logs,conf,downloads}cd /export/downloadscurl -OLk https://download.oracle.…

ABAP json解析使用引用代替预定义数据结构

背景&#xff1a;在解析JSON数据时&#xff0c;通常会事先为定义相应的ABAP数据结构。但是&#xff0c;当遇到一些结构纵深较为复杂的情况时&#xff0c;会比较麻烦。 处理&#xff1a;使用引用类型来定义结构中的纵深部分来达到“省事”的目的&#xff0c;缺点在于访问时需要使…

rust中结构体的属性默认是不能修改的,要想修改可以有两种方式

Rust中结构体里面的属性默认是不支持修改的&#xff0c;而且默认不是pub的&#xff0c;要想修改的话&#xff0c;有两种方式&#xff0c;我以为和python里面的类似呢&#xff0c;但是还是需要一点技术含量的。如果想在引到外部修改&#xff0c;需要声明pub&#xff0c;如果想在…

Qt xml示范

1.数据格式 #ifndef XML_DATA_H #define XML_DATA_H#include<QWidget>struct Student {int s_id;QString s_name;double s_math_score;double s_english_score;}; struct Teacher{int t_id;QString t_name;QVector<Student> t_students_v; };#endif // XML_DATA_H…

论文解读:(VPT)Visual Prompt Tuning

文章汇总 要解决的问题 大型模型应用于下游任务本身就存在挑战。最明显的(通常也是最有效的)适应策略是对预先训练好的模型进行全面的端到端微调。 动机 只微调参数的一个子集 解决的办法 只在输入空间中引入少量特定于任务的可学习参数&#xff0c;而在下游训练期间冻结…

STM32的GPIO控制寄存器开发

寄存器GPIO控制 寄存器地址 寄存器地址计算 某个寄存器地址&#xff0c;由三个参数决定&#xff1a;1、总线基地址&#xff08;BUS_BASE_ADDR&#xff09;&#xff1b;2&#xff0c;外设基于总线基地址的偏移量&#xff08;PERIPH_OFFSET&#xff09;&#xff1b;3&#xff…

书生·浦语 大模型(学习笔记-8)Lagent AgentLego 智能体应用搭建

目录 一、智能体出现的原因 二、智能体的定义 三、智能体的组成 四、Lagent 五、AgentLego 六、实战一&#xff08;Lagent&#xff09; 环境配置及安装 安装依赖 准备 Tutorial Lagent Web Demo AgentLego 使用 图片推理&#xff08;结果&#xff09;&#xff1a; …

C#基础之函数基础

函数 文章目录 1、函数基础1、概念2、函数位置3、基本语法4、实际运用5、return 2、ref 和 out1、ref 和 out 使用2、区别思考 登录 3、变长参数和参数默认值1、变长参数2、参数默认值 4、函数重载5、递归函数思考1 阶乘思考2 阶乘相加思考3 竹竿减半思考4 递归循环输出 1、函数…

diskMirror-backEnd-spring-boot | diskMirror 后端服务器 SpringBoot 版本!

diskMirror-backEnd-spring-boot diskMirror 后端服务器的 SpringBoot 版本&#xff0c;此版本中拓展了 DiskMirrorBackEnd&#xff0c;是一个完全的SpringBoot项目&#xff01; 目录 文章目录 diskMirror-backEnd-spring-boot目录我如何部署与配置docker 方式部署 diskMirro…

【树莓派】yolov5 Lite,目标检测,行人检测入侵报警

延续之前的程序&#xff1a; https://qq742971636.blog.csdn.net/article/details/138172400 文章目录 播放声音pygame不出声音怎么办&#xff08;调节音量&#xff09;树莓派上的音乐播放器&#xff08;可选&#xff09;命令行直接放歌&#xff08;尝试放mp3歌曲&#xff09; …

分类算法——模型评估(八)

1混淆矩阵 在分类任务下&#xff0c;预测结果与正确标记之间存在四种不同的组合&#xff0c;构成混淆矩阵&#xff08;适用于多分类&#xff09; TP True Possitive FN False Negative 2精确率&#xff08;Precision&#xff09;与召回率&#xff08;Recall&#xff09; 精…

第11章 Android特色开发——基于位置的服务

第11章 Android特色开发——基于位置的服务 本章中&#xff0c;将要学习一些全新的Android技术&#xff0c;这些技术有别于传统的PC或Web领域的应用技术&#xff0c;是只有在移动设备上才能实现的。 基于位置的服务&#xff08;Location Based Service&#xff09;。由于移动…

智能穿戴终端设备安卓主板方案_MTK平台智能手表PCBA定制开发

新移科技智能手表方案兼容WiFi、BLE、2~5G等多种通信能力。支持多个功能模块&#xff0c;包括&#xff1a;通话、计步、定位、睡眠监测、心率监测、血氧监测等。智能手表通过滑动与功能性按键提供高度直观的体验感受&#xff0c;从腕间即可掌控日常生活。形态支持定制包括&…

数据结构篇其二---单链表(C语言+超万字解析)

目录 前言&#xff1a; 一、顺序表的缺点和链表的引入。 二、链表概述 实现一个简单的链表 空链表的概念 三、链表的功能实现 链表的打印 链表节点的创建 链表的头插&#xff08;自上而下看完分析&#xff0c;相信你会有所收获&#xff09; 头插的前置分析 传值调用和…

【韩国】UE5的MetaHuman确实可以导入Blender进行编辑。

UE5的MetaHuman确实可以导入Blender进行编辑。根据网络上的信息&#xff0c;你可以将MetaHuman模型导出为FBX文件&#xff0c;然后在Blender中进行修改。修改完成后&#xff0c;你可以将其重新导入到Unreal Engine 5中4。请注意&#xff0c;当你在Blender中编辑模型时&#xff…

debian配置四叶草输入法

效果展示 一、前言 在linux下体验比较好的输入法只有两款&#xff1a;搜狗输入法、四叶草输入法。 ubuntu下可以成功配置搜狗输入法&#xff0c;但debian下从来没有成功过。 今天在用fcitx5 四叶草时发现VNC远程输入法会失灵&#xff0c;于是改用了ibus 四叶草&#xff0c…