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的工作总算完成了。芜湖,为自己鼓掌。

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

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

相关文章

Python 数据分析学习路线

Python 数据分析学习路线 第一阶段&#xff1a;Python语言基础第二阶段&#xff1a;数据采集和持久化第三阶段&#xff1a;数据分析第四阶段&#xff1a;数据挖掘与机器学习书籍介绍参与方式 第一阶段&#xff1a;Python语言基础 在学习数据分析之前&#xff0c;首先需要掌握P…

iOS加固保护技术:保护你的iOS应用免受恶意篡改

目录 转载&#xff1a;开始使用ipaguard 前言 下载ipa代码混淆保护工具 获取ipaguard登录码 代码混淆 文件混淆 IPA重签名与安装测试 转载&#xff1a;开始使用ipaguard 前言 iOS加固保护是直接针对ios ipa二进制文件的保护技术&#xff0c;可以对iOS APP中的可执行文件…

【操作系统笔记】内存分配

内存对齐 问题&#xff1a;为什么需要内存对齐呢&#xff1f; 主要原因是为了兼容&#xff0c;为了让程序可以运行在不同的处理器中&#xff0c;有很多处理器在访问内存的时候&#xff0c;只能从特定的内存地址读取数据。换个说法就是处理器每次只能从内存取出特定个数字节的数…

ClickHouse与Elasticsearch比较总结

目录 背景 分布式架构 存储架构 写入链路设计 Elasticsearch 再谈Schemaless 查询架构 计算引擎 数据扫描 再谈高并发 性能测试 日志分析场景 access_log&#xff08;数据量197921836&#xff09; trace_log&#xff08;数据量569816761&#xff09; 官方Ontime测…

spring-boot2.x,使用EnableWebMvc注解导致的自定义HttpMessageConverters不可用

在json对象转换方面&#xff0c;springboot默认使用的是MappingJackson2HttpMessageConverter。常规需求&#xff0c;在工程中使用阿里的FastJson作为json对象的转换器。 FastJson SerializerFeatures WriteNullListAsEmpty &#xff1a;List字段如果为null,输出为[],而非nu…

云原生的简单理解

一、何谓云原生&#xff1f; 一种构建和运行应用软件的方法 应用程序从设计之初即考虑到云的环境&#xff0c;原生为云而设计&#xff0c;在云上以最佳姿势运行&#xff0c;充分利用和发挥云平台的弹性分布式优势。 二、包括以下四个要素 采用容器化部署&#xff1a;实现云平…

MySQL学习系列(4)-每天学习10个知识

目录 1. InnoDB 和 MyISAM2. SQL调优3. 数据一致性问题的解决4. MySQL的存储引擎5. MySQL的内存使用问题6. 索引比全表扫描慢的情况7. 行级锁和表级锁8. MySQL的复制功能9. 数据库性能测试10. 数据库管理和优化 &#x1f44d; 点赞&#xff0c;你的认可是我创作的动力&#xff…

SQL Server 入门知识

&#x1f648;作者简介&#xff1a;练习时长两年半的Java up主 &#x1f649;个人主页&#xff1a;程序员老茶 &#x1f64a; ps:点赞&#x1f44d;是免费的&#xff0c;却可以让写博客的作者开兴好久好久&#x1f60e; &#x1f4da;系列专栏&#xff1a;Java全栈&#xff0c;…

el-table表格中加入输入框

<template><div class"box"><div class"btn"><el-button type"primary">发送评委</el-button><el-button type"primary" click"flag true" v-if"!flag">编辑</el-button…

面试系列之《LinuxShell》(更新中)

1.用awk命令实现一个词频统计。 假设文件名“data”&#xff0c;文件内容&#xff1a; A B C D A C D D B C C 1.1. python实现 因为不熟悉awk命令&#xff0c;当时用python实现的&#xff1a; res_dict {} with open(./data, r, encodingutf-8) as fp:for line in fp:for …

win系统环境搭建(九)——Windows安装chatGPT

windows环境搭建专栏&#x1f517;点击跳转 win系统环境搭建&#xff08;九&#xff09;——Windows安装chatGPT 本系列windows环境搭建开始讲解如何给win系统搭建环境&#xff0c;本人所用系统是腾讯云服务器的Windows Server 2022&#xff0c;你可以理解成就是你用的windows…

使用 nohup 运行 Python 脚本

简介&#xff1a;在数据科学、Web 开发或者其他需要长时间运行的任务中&#xff0c;我们经常需要让 Python 脚本在后台运行。尤其是在远程服务器上&#xff0c;可能因为网络不稳定或需要执行多个任务&#xff0c;我们不希望 Python 脚本因为终端关闭而被终止。这时&#xff0c;…

全球南方《乡村振兴战略下传统村落文化旅游设计》许少辉八一著辉少许

全球南方《乡村振兴战略下传统村落文化旅游设计》许少辉八一著辉少许

达梦数据库随系统开机自动启动脚本

写一个脚本&#xff0c;实现在服务器开机后自动启动达梦数据库的功能。 1. 在/etc/init.d/目录下&#xff0c;编写脚本&#xff0c;并将脚本命名为startdm.sh。脚本内容实现如下&#xff1a; #!/bin/bash #chkconfig:2345 80 90 #decription:启动达梦# 切换到 dmdba 用户 su …

Unity云原生分布式运行时

// 元宇宙时代的来临对实时3D引擎提出了诸多要求&#xff0c;Unity作为游戏行业应用最广泛的3D实时内容创作引擎&#xff0c;为应对这些新挑战&#xff0c;提出了Unity云原生分布式运行时的解决方案。LiveVideoStack 2023上海站邀请到Unity中国的解决方案工程师舒润萱&#x…

倒计时列表实现(小程序端Vue)

//rich-text主要用来将展示html格式的&#xff0c;可以直接使用这个标签 <view class"ptBox" v-for"(item,index) in orderList" :key"index"> <rich-text :nodes"item.limit_time|limitTimeFilter"></rich-text>…

2023_Spark_实验十二:Spark高级算子使用

掌握Spark高级算子在代码中的使用 相同点分析 三个函数的共同点&#xff0c;都是Transformation算子。惰性的算子。 不同点分析 map函数是一条数据一条数据的处理&#xff0c;也就是&#xff0c;map的输入参数中要包含一条数据以及其他你需要传的参数。 mapPartitions函数是一个…

网络编程day03(UDP中的connect函数、tftp)

今日任务&#xff1a;tftp的文件上传下载&#xff08;服务端已经准备好&#xff09; 服务端&#xff08;已上传&#xff09; 客户端&#xff1a; 代码&#xff1a; #include <stdio.h> #include <string.h> #include <stdlib.h> #include <sys/types.h…

编译工具:CMake(八) | cmake 常用指令

编译工具&#xff1a;CMake&#xff08;八&#xff09; | cmake 常用指令 基本指令 基本指令 ADD_DEFINITIONS向 C/C编译器添加-D 定义&#xff0c;比如:ADD_DEFINITIONS(-DENABLE_DEBUG-DABC)&#xff0c;参数之间用空格分割。 如果你的代码中定义了#ifdef ENABLE_DEBUG #end…

Java 调用 GitLabAPI 获取仓库里的文件件 提交记录

1. 需求 项目组 需要做统计&#xff0c;获取每个开发人员的代码提交次数&#xff0c;提交时间&#xff0c;提交人等等&#xff0c;因代码在GitLab上管理&#xff0c;所以需要调用GitLabAPI来获取。 2. 开发 API官网&#xff1a;https://docs.gitlab.com/ee/api/ 2.1 创建自…