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

如何解决pdf.js跨域从url动态加载pdf文档

news 2026/2/9 10:09:23

摘要

当我们想用PDF.js从URL加载文档时，将会因遇到跨域问题而中断，且是因为会触发了PDF.js和浏览器的双重CORS block，这篇文章将会介绍：①如何禁用pdf.js的跨域？②如何绕过浏览器的CORS加载URL文件？②如何使用PDF.js动态加载URL文件？

关键词 : PDF.js , CORS , URL , 动态加载 

1. Demo和源码

Demo和源码：https://demos.libertynlp.com/#/pdfjs-cors

源码是我已经完成所有设置的 PDF.js 代码，下载后导入你的项目中即可从 url 动态加载pdf。

2. 解决PDF.js跨域

要彻底解决 PDF.js 的跨域问题，让 PDF.js 可以从 url 加载文档，需要解决 PDF.js 本身和浏览器的双重跨域问题。

2.1 禁用PDF.js跨域

要禁用 PDF.js CORS，需要在 viewer.js 文档中将下面一段代码注释掉，让它失效。

// 原代码if (origin !== viewerOrigin && protocol !== "blob:") {throw new Error("file origin does not match viewer's");}// 注释掉上方代码// if (origin !== viewerOrigin && protocol !== "blob:") {//   throw new Error("file origin does not match viewer's");// }
2.2 绕过浏览器跨域

要解决浏览器 URL 文件跨域的问题，可以通过后端服务器将PDF 文件转换成流文件的方式返回给 PDF.js，不过这里我们不讨论这样的策略，而是讨论如何只在前端解决这个问题。按照以下步骤可以解决问题。

  1. 在 viewer.js 中注释掉以下三处代码，然后重写加载 PDF 文件的函数 webViewerLoad 和 Run函数。
// inactivate follow original code in viewer.js//first place
function webViewerLoad() {var config = getViewerConfiguration();window.PDFViewerApplication = pdfjsWebApp.PDFViewerApplication;window.PDFViewerApplicationOptions = pdfjsWebAppOptions.AppOptions;var event = document.createEvent("CustomEvent");event.initCustomEvent("webviewerloaded", true, true, {});document.dispatchEvent(event);pdfjsWebApp.PDFViewerApplication.run(config);
}//second place
if (document.readyState === "interactive" || document.readyState === "complete") {webViewerLoad();
} else {document.addEventListener("DOMContentLoaded", webViewerLoad, true);
}//third place
run: function run(config) {this.initialize(config).then(webViewerInitialized);
},
  1. 重写 webViewerLoad 和 Run 函数
// 重写 webViewerLoad 函数
window.webViewerLoad = function webViewerLoad(fileUrl) {var config = getViewerConfiguration();window.PDFViewerApplication = pdfjsWebApp.PDFViewerApplication;window.PDFViewerApplicationOptions = pdfjsWebAppOptions.AppOptions;var event = document.createEvent('CustomEvent');event.initCustomEvent('webviewerloaded', true, true, {});document.dispatchEvent(event);if (fileUrl) {config.defaultUrl = fileUrl;}pdfjsWebApp.PDFViewerApplication.run(config);
}//rewrite run function
//modeify for browser CORS
run: function run(config) {var _that = this;//add judgementif (config.defaultUrl) {_app_options.AppOptions.set('defaultUrl', config.defaultUrl)}_that.initialize(config).then(function() {webViewerInitialized()});
},
2.2.2 调用以上修改

在 viewer.html 中新增一个函数，目的是在加载页面时调用修改过的 webViewerLoad 函数。

< script type = "text/javascript" >window.onload = function() {var pdfUrl = "https://heritagesciencejournal.springeropen.com/track/pdf/10.1186/s40494-021-00620-2.pdf";webViewerLoad(pdfUrl);}
</script>

3. 从URL动态加载PDF

修改 viewer.html 中的函数，根据 viewer.html 所在 iframe 标签 src 中携带的 PDF url 加载文件。

<script type = "text/javascript" >window.onload = function() {var all_href = location.href;var file_id = all_href.split('?')[1];var pdfUrl = file_id.split('=')[1];// var pdfUrl='https://fireflycos.libertynlp.com/firefly-static/new_shouce.pdf';webViewerLoad(pdfUrl);}
</script>

当在项目中使用 iframe 引用 PDF.js 的 viewer.html 时，只需要修改 *src=”viewer.html?file=” *后面的 PDF Url地址就可以了。也就是改变 <iframe> 的 src 属性值就可以实现动态加载PDF文档。

//complete test.html
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body data-rsssl=1 data-rsssl=1><iframe loading="lazy" id="pdf_container" src="viewer.html?file=https://fireflycos.libertynlp.com/firefly-static/new_shouce.pdf"frameborder="0" width="100%" height="800px"></iframe></body>
</html>

4. 总结

想要 PDF.js 通过 URL 加载文件，需要修改以下几个地方。如果想看看效果或者直接使用我已经修改好的版本，可以到Demo和源码网址：https://demos.libertynlp.com/#/pdfjs-cors

1.在viewer.js中停用跨域判断代码
2.重构viewer.js中 webViewerLoader和run函数来解除浏览器的CORS限制
3.在iframe标签的src属性中增加file参数，实现PDF文件的动态加载

相关文章：

如何解决pdf.js跨域从url动态加载pdf文档

摘要 当我们想用PDF.js从URL加载文档时&#xff0c;将会因遇到跨域问题而中断&#xff0c;且是因为会触发了PDF.js和浏览器的双重CORS block&#xff0c;这篇文章将会介绍&#xff1a;①如何禁用pdf.js的跨域&#xff1f;②如何绕过浏览器的CORS加载URL文件&#xff1f;②如何使…...

编程日记 2024/11/21 7:07:25

深入理解TTY体系：设备节点与驱动程序框架详解

往期内容 本专栏往期内容&#xff1a;Uart子系统 UART串口硬件介绍 interrupt子系统专栏&#xff1a; 专栏地址&#xff1a;interrupt子系统Linux 链式与层级中断控制器讲解&#xff1a;原理与驱动开发 – 末片&#xff0c;有专栏内容观看顺序 pinctrl和gpio子系统专栏&#xf…...

编程日记 2024/11/21 7:01:15

库的操作(MySQL)

1.创建数据库 语法&#xff1a; CREATE DATABASE [IF NOT EXISTS] db_name [create_specification [, create_specification] ...] create_specification:[DEFAULT] CHARACTER SET charset_name[DEFAULT] COLLATE collation_name说明&#xff1a; 大写的表示关键字 [ ] 是可…...

编程日记 2024/11/21 7:00:14

在 for 循环中，JVM可能会将 arr.length 提升到循环外部，仅计算一次。可能会将如何解释 详解

在 Java 的 for 循环中&#xff0c;JVM 有能力进行优化&#xff0c;将 arr.length 的访问提升到循环外部&#xff0c;避免每次迭代都重新计算 arr.length。这种优化主要是由于 JVM 的 即时编译器&#xff08;JIT&#xff09; 和 逃逸分析&#xff08;Escape Analysis&#xff0…...

编程日记 2024/11/21 6:59:12

回溯--数据在内存中的存储：整数、大小端和浮点数的深度解析

目录 引言 1. 整数在内存中的存储 1.1 原码、反码和补码 1.2 为什么使用补码&#xff1f; 1.3 示例代码&#xff1a;整数的存储 2. 大小端字节序和字节序判断 2.1 什么是大端和小端&#xff1f; 2.2 为什么会有大端和小端之分&#xff1f; 2.3 字节序的判断小程序 2.…...

编程日记 2024/11/21 6:58:10

第二十二章 Spring之假如让你来写AOP——Target Object（目标对象）篇

Spring源码阅读目录 第一部分——IOC篇 第一章 Spring之最熟悉的陌生人——IOC 第二章 Spring之假如让你来写IOC容器——加载资源篇 第三章 Spring之假如让你来写IOC容器——解析配置文件篇 第四章 Spring之假如让你来写IOC容器——XML配置文件篇 第五章 Spring之假如让你来写…...

编程日记 2024/11/21 6:57:09

探索设计模式：原型模式

设计模式之原型模式 &#x1f9d0;1. 概念&#x1f3af;2. 原型模式的作用&#x1f4e6;3. 实现1. 定义原型接口2. 定义具体的原型类3. 定义客户端4. 结果 &#x1f4f0; 4. 应用场景&#x1f50d;5. 深拷贝和浅拷贝 在面向对象编程中&#xff0c;设计模式是一种通用的解决方案…...

编程日记 2024/11/21 6:54:05

NLP论文速读（EMNLP 2023）|工具增强的思维链推理

论文速读|ChatCoT: Tool-Augmented Chain-of-Thought Reasoning on Chat-based Large Language Models 论文信息&#xff1a; 简介&#xff1a; 本文背景是关于大型语言模型&#xff08;LLMs&#xff09;在复杂推理任务中的表现。尽管LLMs在多种评估基准测试中取得了优异的成绩…...

编程日记 2024/11/21 6:52:03

JVM垃圾回收详解.②

空间分配担保 空间分配担保是为了确保在 Minor GC 之前老年代本身还有容纳新生代所有对象的剩余空间。 《深入理解 Java 虚拟机》第三章对于空间分配担保的描述如下&#xff1a; JDK 6 Update 24 之前&#xff0c;在发生 Minor GC 之前&#xff0c;虚拟机必须先检查老年代最大…...

编程日记 2024/11/21 6:51:01

什么是事务，事务有什么特性？

事务的四大特性&#xff08;ACID&#xff09; 原子性&#xff08;Atomicity&#xff09; 解释&#xff1a;原子性确保事务中的所有操作要么全部完成&#xff0c;要么全部不做。这意味着事务是一个不可分割的工作单元。在数据库中&#xff0c;这通常通过将事务的操作序列作为一个…...

编程日记 2024/11/21 6:50:01

深入解析：如何使用 PyTorch 的 SummaryWriter 进行深度学习训练数据的详细记录与可视化

深入解析&#xff1a;如何使用 PyTorch 的 SummaryWriter 进行深度学习训练数据的详细记录与可视化 为了更全面和详细地解释如何使用 PyTorch 的 SummaryWriter 进行模型训练数据的记录和可视化&#xff0c;我们可以从以下几个方面深入探讨&#xff1a; 初始化 SummaryWriter…...

编程日记 2024/11/21 6:47:58

企业微信中设置回调接口url以及验证 spring boot项目实现

官方文档&#xff1a; 接收消息与事件&#xff1a; 加密解密文档&#xff1a;加解密库下载与返回码 - 文档 - 企业微信开发者中心 下载java样例 加解密库下载与返回码 - 文档 - 企业微信开发者中心 将解压开的代码 ‘将文件夹&#xff1a;qq\weixin\mp\aes的代码作为工具拷…...

编程日记 2024/11/21 6:46:57

电脑超频是什么意思？超频的好处和坏处

嗨&#xff0c;亲爱的小伙伴&#xff01;你是否曾经听说过电脑超频&#xff1f;在电脑爱好者的圈子里&#xff0c;这个词似乎非常熟悉&#xff0c;但对很多普通用户来说&#xff0c;它可能还是一个神秘而陌生的存在。 今天&#xff0c;我将带你揭开超频的神秘面纱&#xff0c;…...

编程日记 2024/11/21 6:45:55

在 AMD GPU 上构建深度学习推荐模型

Deep Learning Recommendation Models on AMD GPUs — ROCm Blogs 2024 年 6 月 28 日 发布者 Phillip Dang 在这篇博客中&#xff0c;我们将演示如何在支持 ROCm 的 AMD GPU 上使用 PyTorch 构建一个简单的深度学习推荐模型 (DLRM)。 简介 DLRM 位于推荐系统和深度学习的交汇…...

编程日记 2024/11/21 6:44:54

阿里云IIS虚拟主机部署ssl证书

宝塔配置SSL证书用起来是很方便的&#xff0c;只需要在站点里就可以配置好&#xff0c;但是云虚拟主机在管理的时候是没有这个权限的&#xff0c;只提供了简单的域名管理等信息。 此处记录下阿里云&#xff08;原万网&#xff09;的IIS虚拟主机如何配置部署SSL证书。 进入虚拟…...

编程日记 2024/11/21 6:43:52

Python运算符列表

运算符 描述 xy&#xff0c;x—y 加、减,“"号可重载为连接符 x*y,x*&#xff0a;y&#xff0c;x/y,x&#xff05;y 相乘、求平方、相除、求余&#xff0c;“*”号可重载为重复&#xff0c;“&#xff05;"号可重载为格式化 <&#xff0c;<&#xff0c;&…...

编程日记 2024/11/21 6:42:51

MFC图形函数学习09——画多边形函数

这里所说的多边形是指在同一平面中由多条边构成的封闭图形&#xff0c;强调封闭二字&#xff0c;否则无法进行颜色填充&#xff0c;多边形包括凸多边形和凹多边形。 一、绘制多边形函数 原型&#xff1a;BOOL Polygon(LPPOINT lpPoints,int nCount); 参数&#x…...

编程日记 2024/11/21 6:41:50

GaussianDreamer: Fast Generation from Text to 3D Gaussians——点云论文阅读（11）

此内容是论文总结&#xff0c;重点看思路&#xff01;&#xff01; 文章概述 本文提出了一种快速从文本生成3D资产的新方法&#xff0c;通过结合3D高斯点表示、3D扩散模型和2D扩散模型的优势&#xff0c;实现了高效生成。该方法利用3D扩散模型生成初始几何&#xff0c;通过噪声…...

编程日记 2024/11/21 6:40:48

k8s篇之控制器类型以及各自的适用场景

1. k8s中控制器介绍 在 Kubernetes 中，控制器（Controller）是集群中用于管理资源的关键组件。 它们的核心作用是确保集群中的资源状态符合用户的期望，并在需要时自动进行调整。 Kubernetes 提供了多种不同类型的控制器，每种控制器都有其独特的功能和应用场景。 2. 常见的…...

编程日记 2024/11/21 6:39:45

Node.js 笔记（一）：express路由

代码 建立app.js文件&#xff0c;代码如下&#xff1a; const express require(express) const app express() const port 3002app.get(/,(req,res)>{res.send(hello world!)})app.listen(port,()>{console.log(sever is running on http://localhost:${port}) })问…...

编程日记 2024/11/21 6:38:44

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

编程新知 2025/10/19 5:48:51

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

编程新知 2026/2/6 13:42:22

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

编程新知 2025/9/9 8:40:47

Webpack性能优化：构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...

编程新知 2025/12/26 15:05:09

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

编程新知 2025/12/29 15:43:26

【Linux系统】Linux环境变量：系统配置的隐形指挥官

。# Linux系列 文章目录 前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变量的生命周期 四、环境变量的组织方式五、C语言对环境变量的操作5.1 设置环境变量&#xff1a;setenv5.2 删除环境变量:unsetenv5.3 遍历所有环境…...

编程新知 2026/1/31 17:02:38

Java求职者面试指南：Spring、Spring Boot、Spring MVC与MyBatis技术解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么&#xff1f;它的作用是什么&#xff1f; Spring框架的核心容器是IoC&#xff08;控制反转&#xff09;容器。它的主要作用是管理对…...

编程新知 2025/7/17 8:16:30

绕过 Xcode？使用 Appuploader和主流工具实现 iOS 上架自动化

iOS 应用的发布流程一直是开发链路中最“苹果味”的环节&#xff1a;强依赖 Xcode、必须使用 macOS、各种证书和描述文件配置……对很多跨平台开发者来说&#xff0c;这一套流程并不友好。 特别是当你的项目主要在 Windows 或 Linux 下开发&#xff08;例如 Flutter、React Na…...

编程新知 2026/1/10 11:35:24

车载诊断架构 --- ZEVonUDS（J1979-3）简介第一篇

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 做到欲望极简，了解自己的真实欲望，不受外在潮流的影响，不盲从，不跟风。把自己的精力全部用在自己。一是去掉多余，凡事找规律，基础是诚信；二是…...

编程新知 2026/1/26 21:09:29

SQL注入篇-sqlmap的配置和使用

在之前的皮卡丘靶场第五期SQL注入的内容中我们谈到了sqlmap&#xff0c;但是由于很多朋友看不了解命令行格式&#xff0c;所以是纯手动获取数据库信息的 接下来我们就用sqlmap来进行皮卡丘靶场的sql注入学习&#xff0c;链接&#xff1a;https://wwhc.lanzoue.com/ifJY32ybh6vc…...

编程新知 2026/2/8 12:28:29