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

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

news 2025/9/15 22:51:58

摘要

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

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/8/31 5:08:06

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

编程新知 2025/9/14 23:47:25

PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

编程新知 2025/9/6 15:39:02

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2025/9/14 12:35:23

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

编程新知 2025/8/25 23:10:09

Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

编程新知 2025/9/14 20:40:14

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

编程新知 2025/8/6 4:17:44

【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

编程新知 2025/9/2 3:37:40

【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

编程新知 2025/9/14 12:10:01

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

编程新知 2025/8/1 7:53:11