当前位置: 首页 > news >正文

pdfjs解决ie浏览器预览pdf问题

pdfjs是一个js库,可以将pdf文件用canvas重新绘制,从而无需借助pdf读取插件就可以直接预览。
目前chrome内核的浏览器已内置pdf读取插件,但ie浏览器还没有。而我们最近在做的一个项目使用对象是医院,使用的浏览器竟然还是ie。所以我们只能把项目用js重写(当然也可以用jQuery的)。
首先模拟ie浏览器就是个挑战。长期做B端项目被惯坏了,早就忘记还有ie这么个天使了。官网已经不提供ie的下载渠道,搜索了一圈,发现用edge模拟是一个比较好的选择。
在windows11中打开ie浏览器的步骤是:

  1. 首先,按 Win + R 打开运行窗口
  2. 接下来,在运行命令框中输入 inetcpl.cpl
  3. 单击 确定 进入 Internet 属性窗口
  4. 选择 程序 选项卡,点击 管理加载项 按钮
  5. 然后,点击窗口底部 了解有关工具栏和扩展的详细信息
    这样就打开了可爱的ie浏览器。

原生js获取xhr的主体方法

function Request(){this.httpRequest = function(obj,successfun, errFun){var xmlHttp = null;//创建 XMLHttpRequest 对象,老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")if(window.XMLHttpRequest){//code for all new browsers()xmlHttp = new XMLHttpRequest;}else if(window.ActiveXObject){//code for IE5 and IE6xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}//判断是否支持请求if(xmlHttp == null){alert("浏览器不支持xmlHttp");return;}//请求方式, 转换为大写var httpMethod = (obj.method || "Get").toUpperCase();//数据类型var httpDataType = obj.dataType || 'json';//urlvar httpUrl = obj.url;//异步请求var async = true;//post请求时参数处理if(httpMethod == "POST"){//请求体中的参数 post请求参数格式为:param1=test&param2=test2var data = obj.data || {};var requestData = '';for(var key in data){requestData = requestData + key + "=" + data[key] + "&";}if(requestData == ''){requestData = '';}else{requestData = requestData.substring(0, requestData.length - 1);}}//请求接口if(httpMethod == 'GET'){xmlHttp.open("GET", httpUrl, async);xmlHttp.send(null);}else if(httpMethod == "POST"){xmlHttp.open("POST", httpUrl, async);xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");xmlHttp.send(requestData);}//onreadystatechange 是一个事件句柄。它的值 (state_Change) 是一个函数的名称,当 XMLHttpRequest 对象的状态发生改变时,会触发此函数。状态从 0 (uninitialized) 到 4 (complete) 进行变化。仅在状态为 4 时,我们才执行代码xmlHttp.onreadystatechange = function(){//completeif(xmlHttp.readyState == 4){// 此处用了promise替代了请求成功后的回调if(xmlHttp.status == 200){var res = JSON.parse(xmlHttp.responseText);// var res = xmlHttp.responseText;if (res && res.code == '200') {//请求成功执行的回调函数typeof successfun === 'function' &&successfun(res);} else {//请求失败的回调函数typeof errFun === 'function' &&errFun(res);}} else {var msg = new Error('出错了')//请求失败的回调函数typeof errFun === 'function' &&errFun(msg);}}}}
}var $request = new Request()

数据请求的问题完成了。但是现在pdf文件没有出现在期待的位置,只是在底部出现了一个下载文件的请求提示。查了下,原来是ie没有内置pdf阅读器,所以无法预览,浏览器将pdf文件识别为需要下载。

那么问题来了,解决方法有两个:

1.下载Adobe pdf-reader。
下载地址:https://www.adobe.com/cn/acrobat/pdf-reader.html,还需要再ie浏览器中启用,在管理加载项中修改(管理加载项打开方法见上面那个步骤)
在这里插入图片描述
但这个方法也有一个问题,下载插件对用户是有门槛的,用户很可能不愿意这么麻烦。

2.用pdfjs处理pdf文件。
这样用户不需要额外做任何操作。但pdfjs兼容性有限,只能兼容到ie9,更低版本的浏览器就不行了。
综合评估后还是决定用pdfjs处理。如果还有更低版本的就继续下载pdf阅读器。
高版本的pdfjs已放弃对ie的兼容,需要下载旧版本。在官网选择tags,按照对应指示打包。注意打包旧版本时需要保证node在10以下(我本地的node是16.16.0,怪不得昨天一直报错到崩溃)。
当然也可以找别人已经打好的包,参考地址。
要注意把viewer.js中的defaultUrl清空(这个变量的名称可能不同版本不一样,我当时的变量名是DEFAULT_URL,DEFAULT_URL = ‘compressed.tracemonkey-pldi-09.pdf’)。不清空会报错,报“Missing PDF file”。

再把下载下来的文件地址改写为‘./pdfjs/web/viewer.html?file=’+realUrl。

这样先在chrome发现是正常展示的,没有问题,说明方法写地是对的。但是用ie浏览器打开就是一片黑。昨天崩溃了一天,换了很多个pdfjs版本,今天终于意识到应该看看报了什么错。发现控制台报的错是“附加页针对的是文档模式7,部分控制台api和功能可能无法使用”。针对这个报错,一查发现是因为浏览器设置的默认文档模式是7,导致虽然我的浏览器是ie11,但实际是按照ie7来解析网页,而我的网页是不兼容ie7地,这可不就会报错嘛。
查看了相关文章,发现了应该在头文件加上两句声明。

// 如果安装了 Google Chrome Frame (谷歌浏览器 內嵌框架), 则使用 谷歌浏览器 内核模式,否则使用 最新的 IE 模式(浏览器是哪个版本就用哪个ie模式)
<meta http-equiv="X-UA-Compatible" content="IE=edge chrome=1">
// 双核浏览器兼容,使用 Chromium 内核(极速模式)
<meta name="renderer" content="webkit"/>

自己的html文件和pdfjs的viewer.html都要加上。
还发现了一个宝贝,meta标签声明,可以强制在浏览器中用低版本模式打开网页。

<meta http-equiv="X-UA-Compatible" content="IE=7" /> 

分别变更content中的数字,可以在ie11中分别模拟对应ie版本中的兼容情况。啊啊啊,妈妈再也不用担心我怎样切换ie版本了。
IE模式参考文章。

好了,至此,pdf预览兼容的IE的工作总算完成了。芜湖,为自己鼓掌。

相关文章:

pdfjs解决ie浏览器预览pdf问题

pdfjs是一个js库&#xff0c;可以将pdf文件用canvas重新绘制&#xff0c;从而无需借助pdf读取插件就可以直接预览。 目前chrome内核的浏览器已内置pdf读取插件&#xff0c;但ie浏览器还没有。而我们最近在做的一个项目使用对象是医院&#xff0c;使用的浏览器竟然还是ie。所以我…...

千里共婵娟 | 结合微信公众号用JavaScript完整开发实现换中秋头像的功能

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;CSDN领军人物&#xff0c;全栈领域优质创作者✌&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责…...

pt26django教程

admin 后台数据库管理 django 提供了比较完善的后台管理数据库的接口&#xff0c;可供开发过程中调用和测试使用 django 会搜集所有已注册的模型类&#xff0c;为这些模型类提拱数据管理界面&#xff0c;供开发者使用 创建后台管理帐号: [rootvm mysite2]# python3 manage.…...

javabasic

计算机基础 一、学前知识 1. 计算机组成 2. 进制的概念 &#xff08;1&#xff09;二进制的存储 计算机不管是内存还是硬盘&#xff0c;都是以二进制的形式存储。如同一张巨大的表格&#xff0c;里面都是由0和1组成。 二进制&#xff1a;逢2进1 基数为2&#xff0c;数值部分…...

电子词典项目

目录 目录 头文件&#xff1a;dict.h: 源文件&#xff1a;dict.c: 服务器测试文件&#xff1a;serDict.c: 客户端测试文件&#xff1a;cliDict.c: 头文件&#xff1a;dict.h: #ifndef __DICT_H__ #define __DICT_H__ #include<myhead.h> #include<sqlite3.h>#de…...

SQL12 高级操作符练习(2)

描述 题目&#xff1a;现在运营想要找到学校为北大或GPA在3.7以上(不包括3.7)的用户进行调研&#xff0c;请你取出相关数据&#xff08;使用OR实现&#xff09; 示例&#xff1a;user_profile iddevice_idgenderageuniversitygpa12138male21北京大学3.423214male复旦大学4.03…...

python写代码过程中的坑230915

1.解释代码IndentationError: expected an indented block 这个错误通常是由于代码缩进错误导致的。 在Python中,代码块(如循环、条件语句、函数等)通常使用缩进来表示。因此,如果你在期望缩进的位置没有正确缩进代码,就会出现"IndentationError: expected an inden…...

SpringBoot课堂笔记20230913

本篇文章为SpringBoot学习笔记&#xff0c;方便自己再复习。 Maven&#xff1a;jar包管理工具 注解&#xff1a; Controller:处理http请求&#xff0c;返回的视图 RestController: 相当于ResponseBody和Controller一起用&#xff0c;返回的是json ResponseBody:返回响应内容 …...

3D数字孪生:从3D数据采集到3D内容分析

数字孪生&#xff08;Digital Twin&#xff09;是物理对象、流程或系统的虚拟复制品&#xff0c;用于监控、分析和优化现实世界的对应物。 这些数字孪生在制造、工程和城市规划等领域变得越来越重要&#xff0c;因为它们使我们能够在现实世界中实施改变之前模拟和测试不同的场景…...

【杂记】git管理工具的相关应用

这里记录一些用git管理工具进行开发的命令&#xff0c;便于自己查看&#xff0c;我认为下面两篇博客写的很详细&#xff0c;但是为了自己方便查看&#xff0c;所以自己写了一些命令供自己进一步理解。gitee相对git来说更方便一些&#xff08;毕竟国内的不用担心墙&#xff09;&…...

看好多人都在劝退学计算机,可是张雪峰又 推荐过计算机,所以计算机到底是什么样 的?

张雪峰高考四百多分&#xff0c;但是他现在就瞧不起400多分的学生。说难听点&#xff0c;六七百分的 热门专业随便报谁不会啊&#xff1f; 计算机专业全世界都是过剩的&#xff0c;今年桂林电子科技&#xff0c;以前还是华为的校招大学&#xff0c;今年 计算机2/3待业。这个世…...

leetcode 26.删除有序数组中的重复项

给你一个 升序排列 的数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使每个元素 只出现一次 &#xff0c;返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。然后返回 nums 中唯一元素的个数。 考虑 nums 的唯一元素的数量为 k &#xff0c;你需要做…...

jitsi音视频会议集成到自己的网页中

将jitsi视频会议集成到自己的web网站&#xff1a; 源码&#xff1a; <!DOCTYPE html> <html lang"en" xmlns:th"http://www.thymeleaf.org"> <head><meta charset"UTF-8"><meta name"viewport" content&…...

浅析Java责任链模式实现

一、概要 定义&#xff1a;责任链模式是一种行为设计模式&#xff0c; 允许你将请求沿着处理者链进行发送。收到请求后&#xff0c; 每个处理者均可对请求进行处理&#xff0c; 或将其传递给链上的下个处理者。 二、应用场景&#xff1a; 1.多条件流程判断&#xff1a;权限相关…...

SpringBoot雪花算法主键ID传到前端后精度丢失问题的解决

Java后端Long类型的范围 -263~263&#xff0c;即&#xff1a;-9223372036854775808~9223372036854775807&#xff0c;它是19位的。 这个数字可以通过方法获得&#xff1a;Long.MAX_VALUE、Long_MIN_VALUE。 前端JS的数字类型的范围 -253~253&#xff0c;即&#xff1a;-9007…...

vue使用elementUI的upload上传文件封装

这篇文章的目的 将文件上传的方法封装一下&#xff0c;供大家统一调用, 话不多说&#xff0c;直接上代码 upload 核心参数说明 action 上传的地址accept 接受上传的文件类型multiple 是否开启多文件上传模式limit 限制上传个数fileList 文件列表disabled 是否禁用 upload 核心方…...

cenos自动启动tomcat

首先创建一个脚本 关闭tomcat 等待2分钟 启动tomcat 并且把日志输出在 /usr/local/tomcat/tomcatchognqi.log #!/bin/bashexport JAVA_HOME/usr/local/jdk/jdk1.8.0_211 export JRE_HOME$JAVA_HOME/jre# 日志文件路径和文件名 LOG_FILE"/usr/local/tomcat/tomcatchognqi.…...

OSI模型与数据的封装

1、OSI模型 上层|| 七层模型 四层模型|| 应用层| 表示层 应用层 http/ftp/ssh/ftps| 会话层 -----------------------------------------------------------------------| 传输层 传输层 tcp/udp ------------------------------…...

【李沐深度学习笔记】数据操作

本课观看地址 数据操作p1 N维数组样例 N维数组是机器学习和神经网络的主要数据结构 1-d向量就是样本的各特征抽象成一个向量&#xff1b;2-d矩阵的每一行是一个样本&#xff0c;每一行都是一个样本的特征向量 3-d可以表示RGB图片&#xff0c;RGB图像是一个三维数组&#xff…...

【蓝桥杯选拔赛真题61】Scratch小猫照镜子 少儿编程scratch图形化编程 蓝桥杯选拔赛真题解析

目录 scratch小猫照镜子 一、题目要求 编程实现 二、案例分析 1、角色分析...

vue3将页面导出成PDF文件(完美解决图片、表格内容分割问题)

vue3将页面导出成PDF文件&#xff08;完美解决图片、表格内容分割问题&#xff09; 1、安装依赖2、在utils中创建htmlToPDF.js文件3、在vue中引入并使用 1、安装依赖 npm install --save html2canvas // 页面转图片 npm install jspdf --save // 图片转pdf2、在utils中创建h…...

软件测试:黑盒测试用例的四种设计方法

一、输入域测试用例设计方法 输入域测试法是一种综合考虑了等价类划分、边界值分析等方法的综合方法&#xff0c;针对输入域测试法中可能出现的各种情况&#xff0c;输入域测试法主要考虑三个方面&#xff1a;  (1)极端测试(ExtremalTesting)&#xff0c;要求在输入域中选择测…...

数据库开发-MySQL基础DQL和多表设计

1. 数据库操作-DQL DQL英文全称是Data Query Language(数据查询语言)&#xff0c;用来查询数据库表中的记录。 1.1 介绍 查询关键字&#xff1a;SELECT 查询操作是所有SQL语句当中最为常见&#xff0c;也是最为重要的操作。在一个正常的业务系统中&#xff0c;查询操作的使…...

PowerDesigner 逆向工程以及IDEA中UML插件

1、MySQL数据库连接&#xff08;JDBC方式&#xff09; 1.1 新建一个pdm&#xff0c;dbms选择mysql 1.2 Database - Connect 选择数据库连接 1.3 配置连接信息 数据库连接这里是通过一个配置文件来获取连接信息的&#xff0c;首次的话因为没有&#xff0c;所以我们需要选择…...

企业架构LNMP学习笔记56

MongoDB数据类型操作&#xff1a;CURD 1、添加数据&#xff1a; mongodb里存储数据的格式文档形式&#xff0c;以bson格式的文档形式。 创建数据库&#xff1a; > use tp5shop switched to db tp5shop > db.getName() tp5shop使用切换库&#xff0c;不存在自动创建&am…...

[Linux入门]---搭建Linux环境

1.Linux环境的搭建方式 使用Linux操作系统的三种途径&#xff1a; 1.直接安装在物理机上&#xff0c;但是由于 Linux 桌面使用起来非常不友好&#xff0c;不推荐。 2.使用虚拟机软件&#xff0c;将 Linux 搭建在虚拟机上&#xff0c;但是由于当前的虚拟机软件(如 VMWare 之类的…...

性能测试知多少---性能分析与调优的原理

最近一直纠结性能分析与调优如何下手&#xff0c;先从硬件开始&#xff0c;还是先从代码或数据库。从操作系统&#xff08;CPU调度&#xff0c;内存管理&#xff0c;进程调度&#xff0c;磁盘I/O&#xff09;、网络、协议&#xff08;HTTP&#xff0c; TCP/IP &#xff09;&…...

“对象创建”模式

通过“对象创建”模式绕开new&#xff0c;来避免对象创建 (new) 过程中所导致的紧耦合(依赖具体类)从而支持对象创建的稳定。它是接口抽象之后的第一步工作。 典型模式 Factory MethodAbstract FactoryPrototypeBuilder Factory Method 动机 (Motivation) 在软件系统中&am…...

ipad手写笔有必要买吗?好用的平板触控笔

众所周知&#xff0c;随着Apple pencil的出现&#xff0c;市面上出现越来越多平替电容笔的出现&#xff0c;无论是价格和功能&#xff0c;几乎都很接近。很多小伙伴不知如何下手&#xff0c;不知道如何从众多品牌中挑选出适合自己的电容笔&#xff0c;今天我为大家总结一下网上…...

OpenGL ES视频特效开发参考Shadertoy参数详解参考Godot文档

今天一个大厂的学员过来问shadertoy上一些参数的问题&#xff0c;因为我之前用过一段时间Godot引擎&#xff0c; 我清晰记得Godot官方文档有明确的解释&#xff0c;所以整理下发给做特效的同学。 Shadertoy是一个网站&#xff0c;它方便用户编写片段着色器并创造出纯粹的魔法。…...

济南做网站公司/医疗网站优化公司

0、引言 本系列博客仅作为本人学习K210单片机的学习记录&#xff0c;主要学习其内部资源使用&#xff0c;作为初学者难免有错误之处&#xff0c;如有发现还望指出。 硬件&#xff1a;Sipeed Maix Dock开发板&#xff08;推荐官方KD233开发板&#xff09; 软件&#xff1a;Kend…...

慈善网站建设方案/百度软文推广公司

在File类中&#xff0c;需要导入命名空间&#xff1a;using System.IO,不需要实例化&#xff0c;直接使用即可。 基本操作&#xff1a;盘存、复制、移动、删除。 基本方法&#xff1a;File.Exist()、File.Copy()、File.Move()、File.Delete() File.Create(path)----在指定路径…...

餐饮公司做网站的好处/什么叫seo优化

1040: [ZJOI2008]骑士 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 4859 Solved: 1869[Submit][Status][Discuss]Description Z国的骑士团是一个很有势力的组织&#xff0c;帮会中汇聚了来自各地的精英。他们劫富济贫&#xff0c;惩恶扬善&#xff0c;受到社会各 界的赞…...

网站建设手机银行修改登录密码/优化大师win10下载

<#if startTime?datetime lt .now?datetime>:年月日时分秒比较 <#if startTime?date lt .now?date>:年月日比较 <#if startTime?time lt .now?time>:时分秒比较...

网站搭建设计 是什么/今日热搜排行第一名

List<Map>是什么意思&#xff1f; List集合中的对象是一个Map对象,而这个Map对象的键是String类型,值是Object类型 List以Map接口对象为列表对象。 Map以String为键&#xff0c;以Object为值。 List里只能放Map类型的对象&#xff0c;而这个Map类型的对象又只能放以St…...

网站商城建设的维度/百度知道免费提问

wget&#xff1a;使用yum安装文件之前&#xff0c;要先确定一下/etc/yum.repos.d下的文件是否改变 在使用yum安装wget inotify&#xff1a;yum -y install inotify-tools scp&#xff1a;可以在有scp命令的电脑上查询一下scp的包名 # which scp # rpm -qf /usr/bin/scp scp的安…...