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

如何在PDF.js中改造viewer.html以实现PDF的动态加载

在PDF.js中改造viewer.html实现PDF动态加载,需结合参数传递、文件流处理及跨域配置等技术。以下是综合多个技术方案的核心实现步骤:


一、基础参数传递法

1. ​URL参数动态加载

通过修改viewer.html的URL参数传递PDF路径,适用于静态文件或服务端直链:

  • 实现方式​:在viewer.html的URL后添加?file=参数,例如:

    html
    运行
    复制
    <iframe src="viewer.html?file=http://example.com/doc.pdf"></iframe>
    
  • 关键代码调整​:在viewer.js中注释或修改跨域检查代码,并在webViewerInitialized事件中解析URL参数:

    javascript
    复制
    const urlParams = new URLSearchParams(window.location.search);
    const pdfUrl = urlParams.get('file');
    PDFViewerApplication.open(pdfUrl);
    

二、文件流动态加载

2. ​通过Ajax获取二进制流

适用于后端返回PDF字节流而非静态链接的场景:

  1. 前端改造​:在viewer.html中添加Ajax请求逻辑(需在引入viewer.js前执行):

    javascript
    复制
    fetch('/api/get-pdf-stream').then(response => response.arrayBuffer()).then(data => {const uint8Array = new Uint8Array(data);PDFViewerApplication.open(uint8Array);});
    
  2. 后端要求​:响应头需设置Content-Type: application/pdf,并处理CORS。

3. ​Base64数据加载

若需处理Base64编码的PDF数据:

javascript
复制
const base64ToUint8Array = (base64) => {const binaryString = atob(base64.split(',')[1]);const len = binaryString.length;const bytes = new Uint8Array(len);for (let i = 0; i < len; i++) {bytes[i] = binaryString.charCodeAt(i);}return bytes;
};
PDFViewerApplication.open(base64ToUint8Array(base64Data));

三、跨框架通信方案

4. ​使用postMessage传递数据

viewer.html嵌入iframe时,通过父子页面通信传递PDF数据:

  • 父页面发送数据​:

    javascript
    复制
    const iframe = document.getElementById('pdfFrame');
    iframe.contentWindow.postMessage({action: 'loadPdf',data: pdfBytes // 可以是URL、Uint8Array或Base64
    }, '*');
    
  • 子页面(viewer.html)监听​:

    javascript
    复制
    window.addEventListener('message', (event) => {if (event.data.action === 'loadPdf') {PDFViewerApplication.open(event.data.data);}
    });
    

    此方法可绕过sessionStorage的5MB限制。


四、深度定制viewer.js

5. ​核心代码修改
  • 禁用默认文件加载​:删除或注释viewer.jsDEFAULT_URL的定义。

  • 事件触发时机​:在webViewerLoaded事件中动态注入加载逻辑,确保PDF.js初始化完成后再操作:

    javascript
    复制
    PDFViewerApplication.initializedPromise.then(() => {// 动态加载代码
    });
    

五、跨域与安全处理

6. ​跨域配置
  • 服务端​:设置响应头Access-Control-Allow-Origin: *

  • PDF.js改造​:在viewer.js中注释以下代码段以禁用跨域检查:

    javascript
    复制
    if (origin !== viewerOrigin && protocol !== 'blob:') {throw new Error('跨域禁止');
    }
    
7. ​电子签章兼容性

pdf.worker.js中注释签名验证代码段:

javascript
复制
// 注释以下三行(约第2000行)
if (this.fieldType === 'Sig') {this._setFlags(AnnotationFlag.HIDDEN);
}

六、性能优化建议

  1. 按需渲染​:参考PDF.js的分页渲染机制,仅预加载可视区域页面。

  2. 内存管理​:调用PDFViewerApplication.close()释放已卸载文档内存。

  3. 错误处理​:监听documentloaderror事件实现容错:

    javascript
    复制
    PDFViewerApplication.eventBus.on('documentloaderror', (err) => {console.error('加载失败:', err);
    });
    

扩展场景示例

动态加载加密PDF
javascript
复制
PDFViewerApplication.open({url: 'encrypted.pdf',password: 'user123'
}).catch(reason => {// 弹出密码输入框PDFViewerApplication.pdfViewer.passwordPrompt();
});

通过上述方案,可实现从URL、二进制流、Base64、跨框架通信等多渠道动态加载PDF,同时解决电子签章、跨域限制等疑难问题。具体实现需根据项目架构选择合适的技术组合。

相关文章:

如何在PDF.js中改造viewer.html以实现PDF的动态加载

在PDF.js中改造viewer.html实现PDF动态加载&#xff0c;需结合参数传递、文件流处理及跨域配置等技术。以下是综合多个技术方案的核心实现步骤&#xff1a; ​一、基础参数传递法​ 1. ​URL参数动态加载​ 通过修改viewer.html的URL参数传递PDF路径&#xff0c;适用于静态文…...

Android——动画

帧动画 帧动画就是很多张图片&#xff0c;一帧一帧的播放&#xff0c;形成的一个动画效果。 frame.xml <?xml version"1.0" encoding"utf-8"?> <animation-list xmlns:android"http://schemas.android.com/apk/res/android">&l…...

基于linux 设置无线网卡Monitor模式 sniffer抓包

硬件 TP-WN722N 开源无线网卡 网卡设置成抓包模式&#xff0c;条件是什么&#xff1f; 硬件条件 网卡芯片支持监听模式&#xff0c;外置天线或高增益天线可提升抓包效果驱动与软件条件&#xff1a;正确的驱动程序系统与权限条件 Linux&#xff1a;原生支持&#xff08;Kali …...

Ubuntu18.04安装Qt5.12

本文介绍了在Ubuntu18.04环境下安装QT QT5.12相关安装包下载地址 https://download.qt.io/archive/qt/5.12/ Linux系统下Qt的离线安装包以.run结尾 (sudo apt-get install open-vm-tools open-vm-tools-desktop解决无法paste的问题) 安装 1.cd命令 终端进入对应的文件夹下面 2.…...

克服储能领域的数据处理瓶颈及AI拓展

对于储能研究人员来说&#xff0c;日常工作中经常围绕着一项核心但有时令人沮丧的任务&#xff1a;处理实验数据。从电池循环仪的嗡嗡声到包含电压和电流读数的大量电子表格&#xff0c;研究人员的大量时间都花在了提取有意义的见解上。长期以来&#xff0c;该领域一直受到对专…...

PDF.js 生态中如何处理“添加注释\添加批注”以及 annotations.contents 属性

我们来详细解释一下在 PDF.js 生态中如何处理“添加注释”以及 annotations.contents 属性。 核心要点&#xff1a;PDF.js 本身主要是阅读器&#xff0c;不是编辑器 首先&#xff0c;最重要的一点是&#xff1a;PDF.js 的核心库 (pdfjs-dist) 主要设计用于解析和渲染&#xf…...

L38.【LeetCode题解】四数之和(双指针思想) 从汇编角度分析报错原因

目录 1.题目 2.分析 去重的代码 错误代码 3.完整代码 提交结果 1.题目 四数之和 给你一个由 n 个整数组成的数组 nums &#xff0c;和一个目标值 target 。请你找出并返回满足下述全部条件且不重复的四元组 [nums[a], nums[b], nums[c], nums[d]] &#xff08;若两个四元…...

【第48节】探究汇编使用特性:从基础到混合编程

目录 引言 一、调用约定的奥秘 1.1 . C调用约定&#xff08;_cdecl&#xff09; 1.2 stdcall调用约定&#xff08;_stdcall&#xff09; 1.3 fastcall快速调用约定&#xff08;_fastcall&#xff09; 1.4 thiscall调用约定&#xff08;C类成员函数&#xff09; 二、X64汇…...

【jenkins】首次配置jenkins

第一步&#xff0c;输入管理员密码 cat /var/jenkins_home/secrets/initialAdminPassword第二步&#xff0c;点击安装推荐的插件 第三步&#xff0c;创建管理员用户 第四步&#xff0c;返回实例 第五步&#xff0c; 升级jenkins 第六步&#xff0c; 修复提示 第七步&#xff0c…...

Python 项目文档编写全攻略:从入门到自动化维护

引言 在软件开发领域&#xff0c;完善的文档可提升 40% 的团队协作效率&#xff08;来源&#xff1a;IEEE 2022 年开发者调查报告 ^^1^^&#xff09;。本文将深入探讨 Python 项目文档的最佳实践&#xff0c;涵盖文档生成工具、注释规范、自动化维护等关键环节。 一、Python 文…...

基于 React 和 CodeMirror 实现自定义占位符编辑器

npm git 在前端开发中&#xff0c;我们经常需要实现各种复杂的编辑器功能&#xff0c;比如代码编辑器、富文本编辑器等。本文将介绍如何基于 React 和 CodeMirror 实现一个带有自定义占位符功能的编辑器&#xff0c;这种编辑器在模板系统、表单设计器等场景中非常有用。 一…...

GitHub Copilot在产品/安全团队中的应用实践:处理Markdown、自动化报告与电子表格、使用CLI命令等

本文来源github.com&#xff0c;由GitHub中国授权合作伙伴-创实信息翻译整理。 在当今的快节奏时代&#xff0c;技术和非技术团队之间的协作至关重要&#xff0c;事实证明&#xff0c;GitHub Copilot等工具已成为不可或缺的助手。这些由AI驱动的工具已不只是开发者的“秘密武器…...

嵌入式系统中Flash操作全面解析与最佳实践

嵌入式系统中Flash操作全面解析与最佳实践 一、Flash存储器基础与分类 Flash存储器是嵌入式系统中最重要的非易失性存储介质&#xff0c;根据内部架构和工作原理主要分为两大类&#xff1a; 1.1 NOR Flash与NAND Flash对比 特性NOR FlashNAND Flash架构随机存取架构串行存取…...

tomcat 的安装与启动

文章目录 tomcat 服务器安装启动本地Tomcat服务器 tomcat 服务器安装 https://tomcat.apache.org/下载 Tomcat 10.0.X 启动本地Tomcat服务器 进入 Tomcat 的 bin...

Flash存储器(二):SPI NAND Flash与SPI NOR Flash

目录 一.存储架构 二.接口与封装 三.特性对比 四.典型应用场景 4.1 SPI NOR Flash 4.2 SPI NAND Flash 五.技术演进与市场趋势 六.选择建议 6.1 选择SPI NOR的场景 6.2 选择SPI NAND的场景 SPI NAND Flash和SPI NOR Flash是嵌入式设备中常用的存储器。下面通过全面对…...

第 7 期:DDPM 采样提速方案:从 DDPM 到 DDIM

本期关键词:采样加速、DDIM 推导、可控性提升、伪逆过程、代码实战 前情回顾:DDPM 的采样瓶颈 在前几期中,我们构建了一个完整的 DDPM 生成流程。但是你可能已经发现: 生成一张图像太慢了!!! 原因是: DDPM 要在 T 个时间步中一步步地去噪,从 x_T → x_0。而通常 T 至…...

axios 模拟实现

axios 模拟实现 包含[发送请求,拦截器,取消请求] 第一步 , axios模拟发送请求 //使用 xhr 发送请求function xhr_adpter(config){return new Promise(function handle(resolve,reject){let xhr new XMLHttpRequest();xhr.open(config.method, config.url,true);xhr.onreadys…...

架构师面试(三十一):IM 消息收发逻辑

问题 今天聊一下 IM 系统最核心的业务逻辑。 在上一篇短文《架构师面试&#xff08;三十&#xff09;&#xff1a;IM 分层架构》中详细分析过&#xff0c;IM 水平分层架构包括&#xff1a;【入口网关层】、【业务逻辑层】、【路由层】和【数据访问层】&#xff1b;除此之外&a…...

hadoop三大组件的结构及各自的作用

1 HDFS 1.1功能 HDFS 是 Hadoop 的分布式文件系统&#xff0c;用于存储和管理海量数据。它具有高容错性、高吞吐量和可扩展性&#xff0c;能够在多个节点上存储和管理大规模数据 1.2架构&#xff1a;采用主从架构&#xff0c;由一个 NameNode 和多个 DataNode 组成。NameNode…...

GEE学习笔记 29:基于GEE的多源Landsat合成与植被指数时序提取

基于GEE的多源Landsat合成与植被指数时序提取 🌿 1.写在前面 | 基于GEE的Landsat多尺度植被指数提取脚本📌 2.常用植被指数计算公式2.1. 🌿 NDVI(归一化植被指数)Normalized Difference Vegetation Index2.2. 🌱 EVI(增强型植被指数)Enhanced Vegetation Index2.3.…...

负载均衡的策略

目的&#xff1a;将请求均衡分发到后台的服务器 算法&#xff1a; 随机算法&#xff1a;随机数获取服务器加权随机算法&#xff1a;根据权重&#xff0c;增加某些服务器&#xff08;性能比较好等&#xff09;选择的随机比例轮询算法&#xff1a;轮流分发给服务器加权轮询算法…...

AWS Elastic Beanstalk的部署Python Flask后端服务(Hello,World)

问题 最近需要使用AWS Elastic Beanstalk来部署Python的Flask后端web接口。这里先做一个最简单的Flask Hello&#xff0c;World接口服务程序。 Flask工程与代码 创建本地虚拟环境 conda create -n flask python3.13 # 激活 conda activate flaskapp.py from flask import …...

Hadoop的三大结构及各自的作用?

1.HDFS 作用&#xff1a; 存储海量数据&#xff0c;支持高容错&#xff08;数据自动备份&#xff09;和高吞吐量&#xff08;适合大文件读写&#xff09;。 采用主从架构&#xff1a; NameNode&#xff1a;管理文件系统的元数据&#xff08;如文件目录结构&#xff09;。 Dat…...

在Ubuntu系统中安装和升级RabbitVCS

在Ubuntu系统中安装和升级RabbitVCS 目前在ubuntu中使用svn的GUI工具&#xff0c;已经安装了。想升级一下。 当前遇到的问题是&#xff0c;我想用它看看我当前的代码对应的版本号&#xff0c;然后再决定是否update。但是&#xff0c;好像我看不出来。根本不如在windows使用To…...

深入理解红黑树:原理、实现与应用

深入理解红黑树&#xff1a;原理、实现与应用 引言 红黑树&#xff08;Red-Black Tree&#xff09;是计算机科学中一种重要的自平衡二叉查找树。它通过简单的规则和高效的调整策略&#xff0c;保证了插入、删除、查找等操作的时间复杂度均为 O(log n)。红黑树广泛应用于实际开…...

Java学习手册:Java并发编程最佳实践

在Java并发编程中&#xff0c;遵循最佳实践可以显著提高程序的性能、可靠性和可维护性。本文将总结Java并发编程中的关键最佳实践&#xff0c;帮助开发者避免常见陷阱并编写高效的并发程序。 1. 选择合适的并发工具 Java提供了丰富的并发工具&#xff0c;选择合适的工具可以简…...

接口自动化测试(二)

一、接口测试流程&#xff1a;接口文档、用例编写 拿到接口文档——编写接口用例以及评审——进行接口测试——工具/自动化框架进行自动化用例覆盖(70%)——输出测试报告 自动化的目的一般是为了回归 第一件事情&#xff1a;理解需求&#xff0c;学会看接口文档 只需要找到我…...

C++类和对象上

1. 面向对象编程与面向过程编程的比较 我们一开始接触的C语言就是一门面向过程编程的语言&#xff0c;而C就是一门面向对象编程的语言。那么这两者有什么区别呢&#xff1f; 举个例子&#xff0c;就比如说点外卖&#xff0c;如果是C语言的话&#xff0c;那么在程序的编写过程…...

hadoop的三大结构及各自的作用

Hadoop 分布式文件系统&#xff08;HDFS&#xff09; 存储大量数据&#xff1a;HDFS 被设计用于在商品硬件上存储海量数据&#xff0c;它将大文件分割成多个数据块&#xff0c;并分布存储在集群中的不同节点上&#xff0c;支持数据的可靠存储和高效访问。提供数据冗余和容错机制…...

珈和科技遥感赋能农业保险创新 入选省级卫星应用示范标杆

为促进空天信息与数字经济深度融合&#xff0c;拓展卫星数据应用场景价值&#xff0c;提升卫星数据应用效能和用户体验&#xff0c;加速卫星遥感技术向民生领域转化应用&#xff0c;近日&#xff0c;湖北省国防科工办组织开展了2024年湖北省卫星应用示范项目遴选工作。 经多渠…...

香港服务器CPU对比:Intel E3与E5系列核心区别与使用场景

香港服务器的 CPU 配置(核心数与主频)直接决定了其并发处理能力和数据运算效率&#xff0c;例如高频多核处理器可显著提升多线程任务响应速度。在实际业务场景中&#xff0c;不同负载需求对 CPU 架构的要求存在显著差异——以 Intel E3 和 E5 系列为例&#xff0c;由于两者在性…...

【人工智能】DeepSeek 与 RAG 技术:构建知识增强型问答系统的实战

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门! 解锁Python编程的无限可能:《奇妙的Python》带你漫游代码世界 本文深入探讨了如何利用 DeepSeek R1 模型结合检索增强生成(RAG)技术,构建一个高效的知识增强型问答系统。RAG 技术通过结合信息检索与生…...

得佳胜哲讯科技 SAP项目启动会:胶带智造新起点 数字转型新征程

在全球制造业加速向数字化、智能化转型的浪潮中&#xff0c;胶带制造行业正迎来以“自动化生产、数据化运营、智能化决策”为核心的新变革。工业互联网、大数据分析与智能装备的深度融合&#xff0c;正推动胶带制造从传统生产模式向“柔性化生产精准质量控制全链路追溯”的智慧…...

超导体的应用价值:超导磁探测技术开启科技与生活的新变革

科技的飞速发展&#xff0c;带来了一种新型材料的快速应用&#xff0c;那就是超导体材料。超导体的特性&#xff0c;能够为当今社会众多领域带来革命性的变革&#xff0c;也将极大的改变我们现在的生活质量。 超导体的特性 超导体是指在特定温度下的电阻会突然消失&#xff0c…...

UNION和UNION ALL的主要区别

UNION和UNION ALL的主要区别在于处理重复数据和排序的方式。 UNION和UNION ALL都是SQL语言中用于合并两个或多个SELECT语句结果集的关键字。它们的主要区别如下&#xff1a; 1、对重复结果的处理&#xff1a;UNION在进行表链接后会筛选掉重复的记录&#xff0c;而UNION ALL不会…...

软件项目验收报告模板

软件项目验收报告 一、项目基本信息 项目名称XX智能仓储管理系统开发单位XX科技有限公司验收单位XX物流集团合同签订日期2023年3月15日项目启动日期2023年4月1日验收日期2024年1月20日 二、验收范围 入库管理模块&#xff08;包含RFID识别、库存预警&#xff09;出库调度模…...

第五章 SQLite数据库:5、SQLite 进阶用法:JOIN、UNION、TRIGGER、INDEX、ALIAS、INDEXED BY 等模块

一、JOIN&#xff1a;跨表查询的核心机制 1. JOIN 类型总览 JOIN 是连接多个表获取综合信息的关键手段。常见 JOIN 类型如下&#xff1a; INNER JOIN&#xff08;内连接&#xff09;&#xff1a;仅返回两个表中满足连接条件的行。LEFT OUTER JOIN&#xff08;左连接&#xf…...

中间件--ClickHouse-10--海量数据存储如何抉择ClickHouse和ES?

在Mysql数据存储或性能瓶颈时&#xff0c;采用冷热数据分离的方式通常是一种选择。ClickHouse和Elasticsearch&#xff08;ES&#xff09;是两个常用的组件&#xff0c;但具体使用哪种组件取决于冷数据的存储目的、查询模式和业务需求等方面。 1、核心对比 &#xff08;1&…...

JESD204B标准及其在高速AD采集系统中的应用详解

一、JESD204B协议的本质与核心价值 JESD204B是由JEDEC制定的第三代高速串行接口标准&#xff08;2011年发布&#xff09;&#xff0c;专为解决高速ADC/DAC与FPGA/ASIC间数据传输瓶颈而设计。其核心突破体现在&#xff1a; 速率革命性提升 支持每通道最高12.5Gbps&#xff08;通…...

给予FLUX更好的控制:FLUX.1-dev-ControlNet-Union-Pro-2.0

Shakker Labs FLUX.1-dev-ControlNet-Union-Pro-2.0 一、模型概述 Shakker Labs发布的FLUX.1-dev-ControlNet-Union-Pro-2.0是一个统一的ControlNet模型&#xff0c;专为FLUX.1-dev模型设计。该模型在前一版本基础上进行了多项改进&#xff0c;包括移除模式嵌入以减小模型尺寸…...

Hadoop的三大结构及其作用?

Hadoop是一个分布式存储和计算框架&#xff0c;其三大核心组件是HDFS&#xff08;Hadoop Distributed File System&#xff09;、YARN&#xff08;Yet Another Resource Negotiator&#xff09;和MapReduce。它们各自有着重要的作用&#xff0c;共同构成了Hadoop生态系统的基础…...

langgraph框架之初识

1.什么是langgraph&#xff1f; LangGraph 是一个用于构建可控代理的底层编排框架。在AI中&#xff0c;代理也就是执行动作的智能体&#xff0c;也就是agent。使用这个框架可以构建一个可以自由控制的智能执行体&#xff0c;它可以帮我们做许多事情&#xff0c;如下&#xff1…...

3个实用的脚本

1. Linux 系统清理临时文件脚本 该脚本用于清理系统中 /tmp 目录下超过 7 天的临时文件。 #!/bin/bash# 清理 /tmp 目录下超过 7 天的文件 find /tmp -type f -atime 7 -exec rm -f {} \;# 清理 /var/tmp 目录下超过 7 天的文件 find /var/tmp -type f -atime 7 -exec rm -f {…...

Vue3 Composition API与十大组件开发案例详解

文章目录 一、Vue3核心API解析1.1 Composition API优势1.2 核心API 二、十大组件开发案例案例1&#xff1a;响应式表单组件案例2&#xff1a;动态模态框&#xff08;Teleport应用&#xff09;案例3&#xff1a;可复用列表组件案例4&#xff1a;全局状态通知组件案例5&#xff1…...

万用表判断MOS好坏

无论什么封装&#xff0c;D极一般在正面看的上面&#xff0c;或者焊盘面积最大的一面&#xff1a; 【零】烧个洞的那种&#xff0c;不用量了&#xff0c;一眼损坏 【一】万用表的二极管档位测量 检修&#xff1a;使用万用表的二极管档位&#xff0c;S极接红表笔&#xff0c;黑…...

算法驱动光场革命:SLM技术引领智能光学新时代

◀背景引入▶ 空间光调制器本质上是一种能够对光波的振幅、相位或偏振状态进行空间分布调制的动态光学器件&#xff0c;我司自主研发的SLM产品采用硅基液晶技术&#xff0c;通过电信号控制液晶分子的排列状态&#xff0c;实现对入射光波的精确调控。这种精确调控能力使得SLM成…...

webgl入门实例-11WebGL 视图矩阵 (View Matrix)基本概念

WebGL 视图矩阵 (View Matrix) 在WebGL中&#xff0c;视图矩阵(View Matrix)定义了观察者(相机)在世界空间中的位置和方向&#xff0c;它实现了从世界坐标系到相机坐标系的转换。 什么是视图矩阵&#xff1f; 视图矩阵是一个4x4的矩阵&#xff0c;用于&#xff1a; 将场景从…...

ESP32 搭建IDF+Vscode环境(详细教程)

1. IDF环境安装 1.1 ESP-IDF介绍​ ESP-IDF (Espressif IoT Development Framework) 是 Espressif( 乐鑫) 公司提供的面向ESP32 系列 的官方开源开发框架&#xff0c;用于开发物联网应用。ESP-IDF 的特点是高度的集成性和可移植性&#xff0c;提供了完整的 SDK&#xff0c;…...

精准计量+AI管控——安科瑞助力高校水电管理数字化转型

安科瑞顾强 传统管理痛点&#xff1a;效率低、隐患多、成本高 高校后勤水电管理长期面临多重挑战&#xff1a;人工抄表需宿管逐层逐户记录&#xff0c;耗时耗力且易出现漏抄、错抄&#xff0c;导致费用核算不公&#xff1b;老旧机械式电表误差率高达5%-10%&#xff0c;计量纠…...

PHP腾讯云人脸核身获取SIGN Ticket

参考腾讯云官方文档&#xff1a;人脸核身 获取 SIGN ticket_腾讯云 前提条件&#xff1a;已经获取了access_token。获取方法可参考&#xff1a; PHP腾讯云人脸核身获取Access Token-CSDN博客 public function getSignTicket(){$access_token file_get_contents(/data/confi…...