开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

pdf.js ie 报错

PDF.js 在 Internet Explorer (IE) 中报错可能是由于多种原因造成的，因为 IE 对于现代 JavaScript 特性的支持不如其他现代浏览器。以下是一些基础概念、可能的原因、解决方案以及相关优势和应用场景。

基础概念

PDF.js 是一个由 Mozilla 开发的用于在网页上显示 PDF 文件的开源库。它使用 HTML5 和 JavaScript 技术，可以在不依赖任何插件的情况下渲染 PDF 文件。

可能的原因

兼容性问题：IE 不支持某些现代 JavaScript 特性。
缺少 polyfills：PDF.js 可能使用了 IE 不支持的 ES6+ 功能。
配置问题：PDF.js 的配置可能没有针对 IE 进行优化。

解决方案

以下是一些解决 PDF.js 在 IE 中报错的步骤：

1. 引入 Polyfills

确保你的项目中包含了必要的 polyfills 来填补 IE 不支持的 JavaScript 功能。

<!-- 引入 core-js 和 regenerator-runtime -->
<script src="https://cdn.jsdelivr.net/npm/core-js-bundle@3.6.5/minified.js"></script>
<script src="https://cdn.jsdelivr.net/npm/regenerator-runtime@0.13.7/runtime.min.js"></script>

2. 配置 Babel

如果你使用 Babel 进行代码转换，确保你的配置文件（如 .babelrc 或 babel.config.js）包含了针对 IE 的预设。

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "ie": "11"
      }
    }]
  ]
}

3. 修改 PDF.js 配置

在初始化 PDF.js 时，可以设置一些选项来兼容 IE。

PDFJS.GlobalWorkerOptions.workerSrc = 'pdf.worker.js';
PDFJS.cors = true; // 如果需要跨域加载 PDF 文件

4. 检查控制台错误信息

打开 IE 的开发者工具，查看控制台中的具体错误信息，这有助于定位问题。

相关优势

跨平台：PDF.js 可以在任何支持 JavaScript 的浏览器上运行。
无需插件：不需要安装额外的软件或插件即可查看 PDF 文件。
自定义：可以高度自定义 PDF 的显示方式和交互。

应用场景

在线文档查看：网站提供 PDF 文件供用户在线查看。
电子书阅读器：构建一个基于浏览器的电子书阅读平台。
报告展示：企业内部系统用于展示数据分析报告。

示例代码

以下是一个简单的 PDF.js 使用示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>PDF.js Example</title>
  <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
</head>
<body>
  <canvas id="pdf-canvas"></canvas>
  <script>
    var url = 'example.pdf';
    var loadingTask = pdfjsLib.getDocument(url);
    loadingTask.promise.then(function(pdf) {
      pdf.getPage(1).then(function(page) {
        var viewport = page.getViewport({ scale: 1.5 });
        var canvas = document.getElementById('pdf-canvas');
        var context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        var renderContext = {
          canvasContext: context,
          viewport: viewport
        };
        page.render(renderContext);
      });
    });
  </script>
</body>
</html>

确保在实际部署时，根据需要对代码进行适当的调整和优化，以确保在 IE 中的兼容性。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

PDF.js专题

从github上面我们可以下载PDF.js项目源代码，examples里有几个demo示例，helloworld运行就报错，此处省略研究过程1W字，大家只用看结论就可以了：IE9报错就升级的IE10，我也是试出来的...点击翻页操作，或者改变IE的窗口大小会触发viewer对pdf进行重新解析和渲染。...有时把IE前端的某个挡住他的程序窗口（比如一个txt）移开也会导致重新渲染，但是并不是每次都会触发，原因不详。 ...IE9缺少了一些功能和最显着的类型化数组，支持性表现欠佳，我想到了之前运行出错的helloworld.......IE8 NO none IE8 and below are missing too many features to be supported.

21.1K11 2

PDF.js Electron Viewer

PDF.js 是基于 HTML5 解析与渲染 PDF 的 JavaScript 库，由 Mozilla 主导开源。...本文旨在介绍 PDF.js 于 Electron 里如何开始使用，实际尝试了用其 API 或嵌入 HTML 的几种方式。...PDF.js 渲染使用 API 用 API 渲染页面，可见官方 Examples[3]。 1....效果如下：使用 Viewer HTML PDF.js 提供了在线演示的 viewer.html，不过 pdfjs-dist 里没有，要自己编译其源码。...最后 PDF.js 可以说是 Web 渲染 PDF 的不二选择，很多 PDF Web Viewer 库都是基于它实现的。

12K3 0

IE11 F12报错的解决方案

最近在修复IE10,11浏览器的bug，今天下午我F12准备调试js的时候，竟然发现控制台报错了！ ?

8142 0

IE访问页面400报错，其他浏览器可正常访问

问题：升级Tomcat服务器后，原有的所有含有中文链接在IE浏览器请求均报错HTTP-400，在谷歌chrome、360极速浏览器（极速模式）下均可正常访问。...报错日志：十一月 23, 2020 10:41:46 上午 org.apache.coyote.http11.AbstractHttp11Processor process 信息: 解析 HTTP 请求...[],%:" relaxedQueryChars=":[]|{}^\`"<>" useBodyEncodingForURI="true"/> 还是没有办法解决IE...解决办法： 1、调整IE的设置：Internet选项-高级-按图中勾选即可。...-IE11(Edge 不存在，可能修改了编码方案) 中文会被IE使用iso-8859-1编码编码后的中文字符串带反斜杠，这是RFC文档中规定的不安全字符，Tomcat在高版本中增加的安全验证，凡是RFC

1K2 0

pdf.js显示合同签名问题

需求 pdf页面显示在ios11以下的环境，合同的签名印章或签字会显示不出解决方案（初步处理参考下文引用，这里是后续具体做法）现在通过使用pdf.js插件，参考下文，引入自己的代码我把generic

9.8K2 0

一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

如下面的例子，在IE8进行浏览时，将会使用IE7的标准模式进行渲染，因为他本身不支持IE9和IE10。...兼容问题,IE6,IE7,IE8,IE9,IE10 2012-04-25 16:29:04| 分类：学习 |字号订阅在网站开发中不免因为各种兼容问题苦恼，针对兼容问题，其实IE给出了解决方案...它修复了许多的HTML和CSS问题，并使得透明PNG在IE5、IE6下正确显示。使IE5,IE6兼容到IE7模式（推荐）使IE5,IE6,IE7兼容到IE8模式使IE5,IE6,IE7,IE8兼容到IE9模式 <!

4K2 0

pdf.js使用方法「建议收藏」

猜想如果可以改变默认72DPI就可改变呈现的清晰度上面是最开始探索 pdf.js 使用的方法时的猜想其实 pdf.js 真正使用方法非常简单 (一行代码就可以搞定) pdf.js使用步骤一....到官网下载 pdf.js 插件并解压 (地址: PDF.js ) 1: 进入官网 2 : 选择稳定版下载 3: 下载至本地 4 : 解压 5:创建PDF.js文件夹并将刚解压的文件放入其中...二.将 PDF.js 文件夹放到项目服务器根目录下小伙伴可能会有点头晕先跟着做稍后解释 1.登录项目服务器 2.登录服务器后将 PDF.js 文件夹拷贝到项目服务器的根目录...) 能够看到 PDF.js 这个文件夹说明这一步已经完成了 3.在PDF.js 中依次打开 web 文件夹 viewer.html 文件 (PDF.js/web/viewer.html) 4.随后会显示...截图上的 pdf 文件 5.在地址栏中 http://10.0.0.5/PDF.js/web/viewer.html?

15.6K2 0

终极解决远程预览pdf问题

pdf.js一个基于Html的工具类，熟悉pdf.js的朋友们很清楚，pdf.js帮助我们做了很多事。尤其金融类网站会产生很多的报表。需要在线预览。...pdf.js绝对是我们的首选本地预览在pdf.js的官网上下载的demo中我们就可以直接进行预览。官网的案列在web文件夹下的view.html。这里我整理了一个pdf.js精简版的。...报错了报错大概的意思就是文件没找到。为什么没找到是因为我们的文件是远程文件。pdf.js跨域了。在网上找了很多答案。有的说是在web.xml配置放置跨域的操作。测试无效。

5751 0

IE9上传图片报错：Posted content type isnt multipartform-data

1.问题补充描述 IE 10 、11上传图片正常，基于jquery.uploadify插件实现。...经过分析，在IE10、IE11下，HTTP请求头部已经包含了Content-Type: multipart/form-data;boundary=AaB03x部分，IE9则没有。...2.解决措施（1）首先，在HTTP请求头部加上Content-Type: multipart/form-data，结果报错如下： Error in posting multipart/form-data...Content-Type header is missing boundary （2）然后，在HTTP请求头部加上Content-Type: multipart/form-data;boundary=AaB03x，结果报错如下

1.2K4 0

使用PDF.JS在线查看PDF

第一步：下载源码https://github.com/mozilla/pdf.js 第二步：将源码拷贝进项目中，可以新建一个PDFShow文件夹存放代码第三步：修改viewer.js var DEFAULT_URL...07-13 13:01的分割线------------------------------- 文章年久失修，使用案例可参阅官方Demo 插件官方的例子：http://mozilla.github.io/pdf.js

32.5K2 0

Fluid -3- pdf.js PC,移动端查看 PDF

hexo 有各种支持pdf的查看方案，但大多不同时支持移动端和PC端，本文记录使用 pdf.js 实现各设备查看 pdf 的方法。...简介 pdf.js 是用于解析和呈现 PDF 的基于 Web 标准平台的通用解决方案，功能强大。...官方网站：https://mozilla.github.io/pdf.js/ 下载 pdf.js 官网地址：https://mozilla.github.io/pdf.js/ 新版本不支持部分浏览器，为了更好的兼容性...，下载旧版本浏览器的文件包点击 Download 按钮下载并解压相关内容修改 viewer.js 直接使用下载的文件会报错 Error: file origin does not match viewer's...;height:100%'> src-to-pdf：为 pdf 文件的链接 style 可以根据实际需求适当调整示例参考资料 https://mozilla.github.io/pdf.js

8.9K3 0

IE版本判断代码 if IE 6

在项目中，经常会遇到IE浏览器的兼容问题，IE678简直是前端工程师的噩梦，每个版本的IE浏览器都会有比较大的差异。...我们可以使用下面的代码，判断IE浏览器版本： if IE 8 ：选择IE版本，只有该版本可见。 if lt IE 8 ：lt 小于 Less than的简写，该版本以下版本可见。...(IE 6)&!(IE 8) ：& 且（and），IE6和IE8之外的版本可见。 if (IE 6)|(IE 8) ：| 或（or），IE6或IE8可见。代码如下：以IE8为例 IE 6)&!(IE 8)]> 非IE6及非IE8版本可见 IE 6)|(IE 8)]> IE6或IE8版本可见 IE ：非IE浏览器可见代码如下： IE]> 除了IE以外的版本可见用法： 1、用在头部，实现不同IE浏览器版本引用不同的CSS文件： <!

1.9K0 0

基于HTML的PDF展示 pdf.js

很不错的一个插件，推荐给大家 pdf.js 是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档，无需任何本地技术支持。...在线演示：http://mozilla.github.com/pdf.js/web/viewer.html https://github.com/tonyqus/pdf.js

8.1K8 0

engineercms利用pdf.js制作连续看图功能

id=***来看附件，此时就必须用pdf.js这个插件来完成了。...device-width, initial-scale=1, maximum-scale=1"> PDF.js...locale.properties"/> pdf.js...pdfAsDataUri); // DEFAULT_URL = pdfAsArray; // // 只引入了pdf.js

4.5K1 0

各种IE（IE6-IE10）兼容问题一行代码搞定

用一行代码搞定各种 IE（IE6-IE10）兼容问题，是一个很不错的方法。...IE=9" > IE=8"...，或者使用 IE5 Quirks 模式进行解析。...如下面的例子，在 IE8 进行浏览时，将会使用 IE7 的标准模式进行渲染，因为他本身不支持 IE9 和 IE10。...原创文章采用CC BY-NC-SA 4.0协议进行许可，转载请注明：转载自：各种IE（IE6-IE10）兼容问题一行代码搞定

1.7K3 0

edge开启ie兼容模式_edge ie兼容模式

新教程：Edge浏览器中使用IE浏览器网站电脑没有IE浏览器，想使用edge、google访问IE网站，可以移步此文章：点这里查看 1.前两天帮别人查教师资格证分数，发现只能用内核为IE的浏览器且是兼容模式才可以进入该网站

5K1 0

VUE——如何兼容IE9|IE10|IE11浏览器

前言微软爸爸都把IE干掉了,还有客户在用,木得办法啊内容安装babel-polyfill插件 npm install --save babel-polyfill 在main.js中引入babel-polyfill

1571 0

pdf.js预览pdf文件流（base64）

pdf.js是一款非常优秀的pdf解析工具，但不支持直接预览文件流，这里需要对pdf.js稍微改造。...2、下载pdf.js 下载地址：https://mozilla.github.io/pdf.js/ 下载稳定版本，下载后解压，把他放在静态资源目录下面，我这里的项目是老项目，前后端么有分离的java项目...dataURI.substring(base64Index).replace(/[\r\n]/g, ''); var raw = window.atob(base64);//这个方法在ie...var rawLength = raw.length; //转换成pdf.js能直接解析的Uint8Array类型 var array = new Uint8Array(...array[i] = raw.charCodeAt(i) & 0xff; } return array; } } 5、改造pdf.js

16K2 1

关于angluar options请求在ie浏览器报错导致页面不能正常运行

浏览器自动发送的options请求，是浏览器针对跨域请求自行发起的检查（preflight）请求。这个请求主要验证Access-Control-Allow-...

8393 0

调用IE打印

<OBJECT id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 heig...

1.5K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭