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

摘要

当我们想用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 文件的函数 webViewerLoadRun函数。
// 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.jsviewer.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文件的动态加载

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

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

相关文章

Jmeter中的断言(三)

9--MD5Hex断言 功能特点 数据完整性验证&#xff1a;验证响应数据的 MD5 哈希值是否符合预期。简单配置&#xff1a;只需提供预期的 MD5 哈希值即可。灵活配置&#xff1a;可以设置多个断言条件&#xff0c;满足复杂的测试需求。 配置步骤 添加 MD5Hex 断言 右键点击需要添加…

Tomcat和Nginx原理说明

Tomcat Tomcat 是一个开源的 Java 应用服务器&#xff0c;它由多个关键组件组成。这些组件共同协作&#xff0c;实现了 Servlet 容器的功能。以下是 Tomcat 的核心组件说明及其逻辑架构的示意图。 1. Tomcat 核心组件说明 (1) Server 描述&#xff1a;Tomcat 的顶级组件&…

vmWare虚拟环境centos7安装Hadoop 伪分布式实践

背景&#xff1a;近期在研发大数据中台&#xff0c;需要研究Hadoop hive 的各种特性&#xff0c;需要搭建一个Hadoop的虚拟环境&#xff0c;本来想着使用dock &#xff0c;但突然发现docker 公共仓库的镜像 被XX 了&#xff0c;无奈重新使用vm 搭建虚拟机。 大概经历了6个小时完…

10 基于深度学习的目标检测

首次完成时间&#xff1a;2024 年 11月 20 日 1. 使用OpenCV的dnn模块实现图像分类。 1&#xff09;程序代码&#xff1a; import numpy as np import cv2# 解析标签文件 row open("model1/synset_words.txt").read().strip().split("\n") class_label …

ssl证书,以 Nginx 为例

文章目录 1 证书概述1.1 常见证书格式1.2 证书的几种扩展名1.3 关于 PKCS#12 格式 2 Nginx 下证书配置2.1 证书的工作原理2.1.1 单向认证2.1.2 双向认证 2.2 CA 机构签发2.2.1 免费 SSL 证书申请2.2.2 双向认证 2.3 自签证书2.3.1 单向认证2.3.2 双向认证 附录 1&#xff1a;Wi…

android:taskAffinity 对Activity退出时跳转的影响

android:taskAffinity 对Activity跳转的影响 概述taskAffinity 的工作机制taskAffinity对 Activity 跳转的影响一个实际的开发问题总结参考 概述 在 Android 开发中&#xff0c;任务栈&#xff08;Task&#xff09;是一个核心概念。它决定了应用程序的 Activity 如何相互交互以…

专家PID控制

专家PID控制&#xff08;Expert PID Control&#xff09;是一种结合了传统PID控制和专家系统思想的控制方法。它通过引入专家经验、规则和推理机制&#xff0c;以改善PID控制器在面对复杂系统时的性能。专家PID控制不仅仅依赖于固定的PID参数&#xff08;比例、积分、微分&…

ES分词环境实战

文章目录 安装下载1.1 下载镜像1.2 单节点启动 防火墙设置异常处理【1】iptable链路中断 参考文档 参加完2024年11月软考&#xff0c;对ES的分词进行考查&#xff0c;前期有【 Docker 环境下安装部署 Elasticsearch 和 kibana】和【 Docker 环境下为 Elasticsearch 安装IK 分…

【桌面应用程序】Vue-Electron 环境构建、打包与测试(Windows)

前言 Vue 与 Electron 环境构建、打包与测试。 目录 前言 一、基本环境准备 二、配置npm源 三、创建Vue项目 四、添加Electron支持 五、应用启动 ​六、添加UI框架 ElementUI ​七、打包 一、基本环境准备 npm版本&#xff1a;8.6.0node版本&#xff1a;v18.0.0Vue/…

golang中的init函数

程序的初始化和执行都起始于 main 包。如果 main 包还导入了其它的包&#xff0c;那么就会在编译时将它们依次 导入。有时一个包会被多个包同时导入&#xff0c;那么它只会被导入一次&#xff08;例如很多包可能都会用到 fmt 包&#xff0c;但 它只会被导入一次&#x…

Paint 学习笔记

目录 ippaint 外扩对象 LCM_inpaint_Outpaint_Comfy&#xff1a; 不支持文字引导 ippaint https://github.com/Sanster/IOPaint 外扩对象 https://www.iopaint.com/models/diffusion/powerpaint_v2 GitHub - open-mmlab/PowerPaint: [ECCV 2024] PowerPaint, a versatile …

【C++】深入理解 C++ 中的继承进阶:多继承、菱形继承及其解决方案

个人主页: 起名字真南的CSDN博客 个人专栏: 【数据结构初阶】 &#x1f4d8; 基础数据结构【C语言】 &#x1f4bb; C语言编程技巧【C】 &#x1f680; 进阶C【OJ题解】 &#x1f4dd; 题解精讲 目录 C继承机制详解与代码示例&#x1f4cc;1. 继承的基本概念&#x1f4cc; 2.…

【MATLAB源码-第218期】基于matlab的北方苍鹰优化算法(NGO)无人机三维路径规划,输出做短路径图和适应度曲线.

操作环境&#xff1a; MATLAB 2022a 1、算法描述 北方苍鹰优化算法&#xff08;Northern Goshawk Optimization&#xff0c;简称NGO&#xff09;是一种新兴的智能优化算法&#xff0c;灵感来源于北方苍鹰的捕猎行为。北方苍鹰是一种敏捷且高效的猛禽&#xff0c;广泛分布于北…

C#中的二维数组的应用:探索物理含义与数据结构的奇妙融合

在C#编程中&#xff0c;二维数组&#xff08;或矩阵&#xff09;是一种重要的数据结构&#xff0c;它不仅能够高效地存储和组织数据&#xff0c;还能通过其行、列和交叉点&#xff08;备注&#xff1a;此处相交处通常称为“元素”或“单元格”&#xff0c;代表二维数组中的一个…

利用uniapp开发鸿蒙:运行到鸿蒙模拟器—踩坑合集

从uniapp运行到鸿蒙模拟器上这一步&#xff0c;就有非常多的坑&#xff0c;一些常见的坑&#xff0c;官网都有介绍&#xff0c;就不再拿出来了&#xff0c;这里记录一下官网未记录的大坑 1.运行路径从hbuilderx启动鸿蒙模拟器 解决方法&#xff1a; Windows系统&#xff0c;官…

跨平台WPF框架Avalonia教程 十三

AutoCompleteBox 自动补全输入框 自动补全输入框提供了一个供用户输入的文本框和一个包含可能匹配项的下拉列表。下拉列表会在用户开始输入时显示&#xff0c;并且每输入一个字符&#xff0c;匹配项都会更新。用户可以从下拉列表中选择匹配项。 文本与可能项匹配的方式是可配…

开发中使用UML的流程_02 CIM-1:定义业务流程

CIM-1定义业务流程&#xff08;业务用例模型&#xff09;的生成&#xff0c;有下列两项&#xff1a; 1.业务用例图 2.业务用例简述 业务用例图的主要组成元素是业务用例和业务执行者。 图中的一个业务用例代表一条业务流程&#xff0c;业务执行者则代表位于业务组织外但会启动…

Streamlit + AI大模型API实现视频字幕提取

简介 在本文中&#xff0c;我将带你探讨如何使用Streamlit和AI大模型API来实现视频字幕提取的技术。Streamlit是一个开源的Python库&#xff0c;用于快速构建数据应用的Web界面&#xff0c;而AI大模型API&#xff0c;如OpenAI&#xff0c;提供了强大的语言处理能力&#xff0c…

c++--------《set 和 map》

c--------《set 和 map》 1 set系列的使⽤1.1 set类的介绍1.2 set的构造和迭代器1.3 set重要接口 2 实现样例2.1: insert和迭代器遍历使⽤样例&#xff1a;2.2: find和erase使⽤样例&#xff1a; 练习3.map系列的使用3.1 map类的介绍3.1.1 pair类型介绍 3.2 map的数据修改3.3mu…

计算机网络——路由选择算法

路由算法 路由的计算都是以子网为单位计算的——找到从原子网到目标子网的路径 链路状态算法 序号——&#xff08;源路由器&#xff0c;序号&#xff09;——如果发现这个序号重复或者老了——就不扩散 先测量——再泛洪获得路由 路由转发情况 若S——>W是21则不更改——…