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

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

news 2026/3/26 17:52:11

摘要

当我们想用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

3步终结告警疲劳：Keep平台的智能告警管理实践

3步终结告警疲劳&#xff1a;Keep平台的智能告警管理实践 【免费下载链接】keep The open-source alerts management and automation platform 项目地址: https://gitcode.com/GitHub_Trending/kee/keep 智能告警管理已成为现代运维体系的核心能力。根据Gartner最新报告…...

编程新知 2026/3/26 17:29:37

家里装了 OpenClaw，在公司也能随时管理——Shield CLI 远程访问方案

家里装了 OpenClaw&#xff0c;在公司也能随时管理 OpenClaw 火到不用介绍了——GitHub 25 万 Star&#xff0c;一个能真正帮你干活的 AI Agent。很多人装在家里的 Windows 电脑上&#xff0c;配好了 API Key 和各种插件&#xff0c;用着很爽。但一到公司或者出门在外&#xff…...

编程新知 2026/3/26 17:09:24

3个高效学习技巧：如何用JiYuTrainer实现课堂学习体验优化

3个高效学习技巧&#xff1a;如何用JiYuTrainer实现课堂学习体验优化 【免费下载链接】JiYuTrainer 极域电子教室防控制软件, StudenMain.exe 破解 项目地址: https://gitcode.com/gh_mirrors/ji/JiYuTrainer 问题场景&#xff1a;当数字化教学遇上学习需求冲突 "…...

编程新知 2026/3/26 16:53:18

Wan2.2-I2V-A14B高性能实践：10核CPU+120GB内存协同优化视频推理稳定性

Wan2.2-I2V-A14B高性能实践&#xff1a;10核CPU120GB内存协同优化视频推理稳定性 1. 镜像概述与核心优势 Wan2.2-I2V-A14B是一款专为高性能文生视频任务优化的私有部署镜像&#xff0c;针对RTX 4090D 24GB显存显卡和10核CPU120GB内存配置进行了深度优化。这个镜像解决了视频生…...

编程新知 2026/3/26 15:36:19

告别爆显存！在16G显卡上高效训练SDXL LORA的完整配置流程

16G显卡极限优化&#xff1a;SDXL LORA训练全流程实战指南 引言 当你手握一块RTX 4060 Ti或4070这样的16G显存显卡&#xff0c;想要尝试SDXL LORA训练时&#xff0c;是否常被爆显存的恐惧支配&#xff1f;别担心&#xff0c;这不是硬件性能的终点&#xff0c;而是优化艺术的起点…...

编程新知 2026/3/26 15:36:14

别再死记硬背了！用Treap（树堆）搞定LeetCode平衡树难题，附C++完整模板

Treap实战指南&#xff1a;用随机化平衡树高效解决LeetCode难题 1. 为什么选择Treap而非传统平衡树&#xff1f; 在算法竞赛和面试场景中&#xff0c;我们经常需要处理动态有序集合的操作。传统平衡树如AVL和红黑树虽然能保证严格的平衡性&#xff0c;但它们的实现复杂度往往让…...

编程新知 2026/3/26 15:24:00

安卓虚拟摄像头：解锁手机摄像头的无限创意可能

安卓虚拟摄像头&#xff1a;解锁手机摄像头的无限创意可能 【免费下载链接】com.example.vcam 虚拟摄像头 virtual camera 项目地址: https://gitcode.com/gh_mirrors/co/com.example.vcam 想要在视频会议中展示精心准备的演示内容&#xff1f;还是希望在直播时使用定制…...

编程新知 2026/3/26 14:13:18

Android开发者必看：火山引擎API验签实战，5步搞定接口适配

Android开发者实战指南&#xff1a;火山引擎API验签与接口适配全解析 在移动应用开发领域&#xff0c;直接调用第三方API服务已成为提升开发效率的常见做法。火山引擎作为国内领先的云服务平台&#xff0c;其丰富的API接口为Android应用开发提供了强大支持。然而&#xff0c;由…...

编程新知 2026/3/26 13:12:56

ADRV9009+ZCU102实战：从HDL工程构建到no-OS移植的5个关键步骤

ADRV9009ZCU102全流程开发指南&#xff1a;从HDL工程构建到no-OS移植的深度实践 在射频系统开发领域&#xff0c;ADRV9009作为一款高性能射频收发器&#xff0c;与Xilinx ZCU102开发板的组合已成为许多硬件工程师的首选方案。本文将深入剖析五个关键环节的技术细节&#xff0c;…...

编程新知 2026/3/26 11:58:00

终极Markdown Viewer：5分钟打造你的浏览器技术文档阅读器

终极Markdown Viewer&#xff1a;5分钟打造你的浏览器技术文档阅读器 【免费下载链接】markdown-viewer Markdown Viewer / Browser Extension 项目地址: https://gitcode.com/gh_mirrors/ma/markdown-viewer 你是否厌倦了在浏览器中查看Markdown文件时格式混乱的体验&a…...

编程新知 2026/3/26 11:43:58