记录一次项目中使用pdf预览过程以及遇到问题以及如何解决
背景
项目中现有的pdf浏览解析不能正确解析展示一些pdf文件,要么内容一直在加载中展示不出来,要么展示的格式很凌乱
解决
方式一:(优点:比较无脑,缺点:不能解决遇到的一些特殊问题)
使用ai工具、google、百度等咨询,将现有情况描述送过去,等待解答,根据解答修改自己的代码
方式二:
1、寻找开源项目,找当前市面上现有解决方案,推荐github上这个项目
2、 找到后就开始研究怎么使用,首先看readme,根据readme基本可以解决99%的问题
- 根据文档一步步操作,想研究源码可以clone下来仔细看看
- 如果只是想项目中使用,则可以快速直接到项目中使用文档
- 根据文档步骤一步一步操作即可
下面我说下我使用过程中遇到的问题以及怎么解决的
- 我在使用后无法兼容老版本浏览器,导致老版本浏览器无法正常预览,
- 官网也有说明,需要注意下图中,根据自己需求,看看自己pdf预览场景下面两个链接是否都可以正常展示,如果正常浏览器的链接无法正常展示,则需要使用兼容老版本方式
- 使用方式,按下图命令执行
git clone https://github.com/mozilla/pdf.js.git
cd pdf.js
npm install
npx gulp server #可选,如果需要本地预览效果可以执行,然后访问看效果并进行调试
npx gulp generic # 正常版本执行
npx gulp generic-legacy #兼容老版本执行
- 执行完后,项目会生成如下目录,核心有用文件pdf.mjs、pdf.worker.mjs、viewer.mjs、viewer.html
- 将上面目录中文件拷贝到你的项目中,如下图
坑一:
- 大家可以看见我复制过来里面会比生成的多了pdf.js、和将viewer.mjs改为了viewer.js
- 不修改时,在安卓手机老版本浏览器访问viewer.html会不加载你的pdf文件
- 原因说明:
简而言之:• .mjs=强制 ES Module;• .js=默认 CommonJS(或由 package.json 决定)+浏览器端可通过 <script type="module"> 指定为 ESM。
了解了这点,就能根据项目需求和兼容性,灵活选用或配置扩展名和加载方式。浏览器与服务器支持• MIME 类型:• 服务器要正确返回 application/javascript(或 text/javascript)给浏览器,才能正常加载模块。• 如果你把一个 .mjs 当成普通脚本返回了错误的 MIME,或者老浏览器不认识 <script type="module" src="*.mjs">,就会报错 “Failed to fetch dynamically imported module” 等。• 兼容性:• 现代浏览器普遍支持 <script type="module">,但老旧浏览器可能连模块都不认识,更别说 .mjs 这种“新”扩展名。通常需要打包(webpack、Rollup、esbuild)并做兼容处理。实践建议• 新项目:可统一用 ES Module,推荐:• 在 Node.js 项目根目录 package.json 里设置 "type": "module",全用 .js。• 对于需要兼容 CJS 的第三方,或者特殊场景再用 .cjs(CommonJS 专用扩展)。• 混用场景:如果需要同时用 CJS + ESM,可以:• .js → CJS,.mjs → ESM;• 或者:.cjs → CJS,.js → ESM(反过来配置 package.json)。
坑二:
- 还是mjs和js引用的问题,导致ios和pc浏览都正常,但是安卓老版本浏览器会报如下错误,并不能正常预览pdf文件
解决:贴上能在各个端正常加载的viewer.html中的js引用供大家参考,注意pdf.worker.js的引用,不能是pdf.worker.mjs,也不能加type=module,要不然安卓老版本浏览器会加载不出来对应的pdf文件
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta name="google" content="notranslate"><title>在线预览</title><!-- This snippet is used in production (included from viewer.html) --><link rel="resource" type="application/l10n" href="locale/locale.json"><script src="../build/pdf.js" type="module"></script><script src="pdf.worker.js" ></script><script>import { GlobalWorkerOptions } from '../build/pdf.js';// 用 URL 构造器根据当前页面自动拼好路径GlobalWorkerOptions.workerSrc = new URL('../build/pdf.worker.js',window.location.href).href;</script><link rel="stylesheet" href="viewer.css"><script src="viewer.js" type="module"></script>
下面附加我动态加载pdf的代码改动,改动点在viewer.js中,找到代码中的下面这段替换掉,动态pdf怎么配置看下图
async run(config) {await this.initialize(config);const { appConfig, eventBus } = this;// 从 URL query 里取 file 参数const queryString = document.location.search.substring(1);const params = parseQueryString(queryString);const file = params.get("file") ?? AppOptions.get("defaultUrl");console.log(file,"file init")validateFileURL(file);// —— 保留文件拖拽和 input 选择功能 —— //const fileInput = this._openFileInput = document.createElement("input");fileInput.id = "fileInput";fileInput.hidden = true;fileInput.type = "file";document.body.append(fileInput);fileInput.addEventListener("change", (evt) => {const files = evt.target.files;if (!files || files.length === 0) return;eventBus.dispatch("fileinputchange", {source: this,fileInput: evt.target});});appConfig.mainContainer.addEventListener("dragover", (evt) => {for (const item of evt.dataTransfer.items) {if (item.type === "application/pdf") {evt.dataTransfer.dropEffect =evt.dataTransfer.effectAllowed === "copy" ? "copy" : "move";stopEvent(evt);return;}}});appConfig.mainContainer.addEventListener("drop", (evt) => {if (evt.dataTransfer.files?.[0].type !== "application/pdf") {return;}stopEvent(evt);eventBus.dispatch("fileinputchange", {source: this,fileInput: evt.dataTransfer});});// —— 可选功能拆分,不再赘述 —— //if (!AppOptions.get("supportsDocumentFonts")) {AppOptions.set("disableFontFace", true);this.l10n.get("pdfjs-web-fonts-disabled").then(msg => console.warn(msg));}if (!this.supportsPrinting) {appConfig.toolbar?.print?.classList.add("hidden");appConfig.secondaryToolbar?.printButton.classList.add("hidden");}if (!this.supportsFullscreen) {appConfig.secondaryToolbar?.presentationModeButton.classList.add("hidden");}if (this.supportsIntegratedFind) {appConfig.findBar?.toggleButton?.classList.add("hidden");}// —— 核心修改 —— //console.log(file, "file")if (file) {// 监听 PDF.js 真正的加载错误eventBus.on("documenterror", ({ error }) =>console.error("PDF.js 文档加载失败:", error));try {const apiUrl = '/file/read?bosName=' + file + '&_from=hi';console.log(apiUrl,"apiUrl")const resp = await fetch(apiUrl, {headers: { "Accept": "application/pdf" },});if (!resp.ok) {throw new Error(`HTTP 错误 ${resp.status}`);}const buffer = await resp.arrayBuffer();// 转成 Blob 并生成临时 URLconst blob = new Blob([buffer], { type: "application/pdf" });const blobUrl = URL.createObjectURL(blob);// 用 URL 加载 PDFthis.open({ url: blobUrl });// (可选)待下一次加载前或页面卸载时,释放 URL// URL.revokeObjectURL(blobUrl);} catch (err) {console.error("Error loading PDF via HTTP:", err);this._hideViewBookmark();}} else {this._hideViewBookmark();}}
上图中接口改成你自己的即可
相关文章:
记录一次项目中使用pdf预览过程以及遇到问题以及如何解决
背景 项目中现有的pdf浏览解析不能正确解析展示一些pdf文件,要么内容一直在加载中展示不出来,要么展示的格式很凌乱 解决 方式一:(优点:比较无脑,缺点:不能解决遇到的一些特殊问题࿰…...
致远OA——自定义开发rest接口
文章目录 :apple: 业务流程 🍎 业务流程 代码案例: https://pan.quark.cn/s/57fa808c823f 官方文档: https://open.seeyoncloud.com/seeyonapi/781/https://open.seeyoncloud.com/v5devCTP/39/783.html 登录系统 —— 后台管理 —— 切换系…...
STL之vector基本操作
写在前面 我使用的编译器版本是 g 11.4.0 (Ubuntu 22.04 默认版本),支持C17的全部特性,支持C20的部分特性。 vector的作用 我们知道vector是动态数组(同时在堆上存储数组元素),我们在不确定数…...
dac直通线还是aoc直通线? sfp使用
"DAC直通线" 和 "AOC直通线" 都是高速互连线缆,用于数据中心、服务器、交换机等设备之间的高速互连。它们的选择主要取决于以下几个方面: 🔌 DAC(Direct Attach Cable,直连铜缆) 材质&…...
【Linux篇】探索进程间通信:如何使用匿名管道构建高效的进程池
从零开始:通过匿名管道实现进程池的基本原理 一. 进程间通信1.1 基本概念1.2 通信目的1.3 通信种类1.3.1 同步通信1.3.2 异步通信 1.4 如何通信 二. 管道2.1 什么是管道2.2 匿名管道2.2.1 pipe()2.2.2 示例代码:使用 pipe() 进行父子进程通信2.2.3 管道容…...
Mixture-of-Experts with Expert Choice Routing:专家混合模型与专家选择路由
摘要 稀疏激活的专家混合模型(MoE)允许在保持每个token或每个样本计算量不变的情况下,大幅增加参数数量。然而,糟糕的专家路由策略可能导致某些专家未被充分训练,从而使得专家在特定任务上过度或不足专业化。先前的研究通过使用top-k函数为每个token分配固定数量的专家,…...
ai学习中收藏网址【1】
https://github.com/xuwenhao/geektime-ai-course课程⾥所有的代码部分,通过 Jupyter Notebook 的形式放在了 GitHub 上 https://github.com/xuwenhao/geektime-ai-course 图片创作 https://www.midjourney.com/explore?tabtop 创建填⾊本 How to Create Midjour…...
【滑动窗口】最⼤连续 1 的个数 III(medium)
⼤连续 1 的个数 III(medium) 题⽬描述:解法(滑动窗⼝):算法思路:算法流程: C 算法代码:Java 算法代码: 题⽬链接:1004. 最⼤连续 1 的个数 III …...
ClawCloud的免费空间(github用户登录可以获得$5元/月的免费额度)
免费的空间 Welcome to ClawCloud Lets create your workspace 官网:ClawCloud | Cloud Infrastructure And Platform for Developers 区域选择新加坡 然后这个页面会变成新加坡区域,再按一次确定,就创建好了工作台。 初始界面࿰…...
sql之DML(insert、delete、truncate、update、replace))
🎯 本文专栏:MySQL深入浅出 🚀 作者主页:小度爱学习 数据库使用时,大多数情况下,开发者只会操作数据,也是就增删改查(CRUD)。 增删改查四条语句,最重要的是查…...
Spring Boot常用注解全解析:从入门到实战
🌱 Spring Boot常用注解全解析:从入门到实战 #SpringBoot核心 #注解详解 #开发技巧 #高效编程 一、核心启动与配置注解 1. SpringBootApplication 作用:标记主启动类,整合了Configuration、EnableAutoConfiguration和Component…...
Python 赋能区块链教育:打造去中心化学习平台
Python 赋能区块链教育:打造去中心化学习平台 引言 区块链技术正在重塑全球多个行业,而教育领域也不例外。传统的在线学习平台往往依赖中心化存储和管理模式,导致数据安全、用户隐私、资源共享等问题难以解决。而随着 Web 3.0 的发展,区块链在教育场景中的应用逐渐受到关…...
verilog float mult
module pipe_float_mul(input wire clk ,// 时钟信号input wire en ,// 使能信号input wire rst_n ,// 复位信号input wire round_cfg ,// 决…...
Android开发四大组件和生命周期及setFlags
文章目录 Android开发四大组件1. Activity(活动)2. Service(服务)3. BroadcastReceiver(广播接收器)4. ContentProvider(内容提供者)共同特点 Activity 生命周期详解完整的生命周期方…...
mysql的函数(第二期)
九、窗口函数(MySQL 8.0) 适用于对结果集的子集(窗口)进行计算,常用于数据分析场景。 ROW_NUMBER() 作用:为每一行生成唯一的序号。示例:按分数降序排名 SELECT n…...
MATLAB 控制系统设计与仿真 - 39
多变量系统控制器设计实例2 假如原系统对象中有位于虚轴上的极点,则不能直接应用鲁棒控制设计来设计控制器。 在这样的情况下,需引入一个新的变量p,使得 即可在对象模型中用p变量取代s变量,这样的变换称为双线性变换,…...
深入理解C++ 中的vector容器
一、引言 在C 的标准模板库(STL)中, vector 是一个极为常用且功能强大的序列容器。它就像是一个动态数组,既能享受数组随机访问元素的高效性,又能灵活地动态调整大小。在本文中,我们将深入探讨 vector …...
ESP-ADF外设子系统深度解析:esp_peripherals组件架构与核心设计(显示输出类外设之LED)
目录 ESP-ADF外设子系统深度解析:esp_peripherals组件架构与核心设计(显示输出类外设之LED)简介模块概述功能定义架构位置核心特性 LED外设分析LED外设概述LED外设功能特点常见应用场景LED外设架构图 LED外设API和数据结构公共API事件类型配置…...
[特殊字符] Kotlin与C的类型别名终极对决:typealias vs typedef,如何让代码脱胎换骨?
在 Kotlin 中,typealias 是一个非常实用的关键字,它可以为已有的类型定义一个新的名称,起到简化代码和提升可读性的作用。比如: // 定义一个复杂函数类型的别名 typealias ClickListener (View, Int) -> Unitfun setOnClickL…...
第9期:文本条件生成(CLIP + Diffusion)详解
“让我们用一句话,让模型画出一幅画。” 在前几期中我们学习了 Denoising Diffusion Probabilistic Models(DDPM)如何在无条件情况下生成图像。而在本期,我们将跨入更具挑战性但也更酷的领域 —— 文本条件图像生成(Te…...
8 编程笔记全攻略:Markdown 语法精讲、Typora 编辑器全指南(含安装激活、基础配置、快捷键详解、使用技巧)
1 妙笔在手,编程无忧! 1.1 编程为啥要做笔记?这答案绝了! 嘿,各位键盘魔法师!学编程不记笔记,就像吃火锅不配冰可乐 —— 爽到一半直接噎住!你以为自己脑子是顶配 SSD,结…...
C#测试linq中的左连接的基本用法
使用linq联表或者连接两个对象集合查询时一般使用的是join关键字,返回结果中包含两个表或两个对象集合中连接字段相等的数据记录,如果要实现sql语句中的左连接效果,并没有现成的left join关键字,此时可以使用DefaultIfEmpty 实现左…...
【Android面试八股文】Android系统架构【一】
Android系统架构图 1.1 安卓系统启动 1.设备加电后执行第一段代码:Bootloader 系统引导分三种模式:fastboot,recovery,normal: fastboot模式:用于工厂模式的刷机。在关机状态下,按返回开机 键进…...
什么是 Stream
Stream 是对集合对象功能的增强,它不是集合,也不存储数据,而是从集合中抽象出一条数据通道,让你可以用链式方式一步步处理数据。 🔧 常见操作分类 类型方法举例创建stream(), Stream.of(), Arrays.stream()中间操作fi…...
网络编程 - 4 ( TCP )
目录 TCP 流套接字编程 API 介绍 SeverSocket Socket 用 TCP 实现一个回显服务器 服务端 客户端 运行调试 第一个问题:PrintWriter 内置的缓冲区 - flush 刷新解决 第二个问题:上述代码中,需要进行 close 操作吗? 第三…...
在STM32的定时器外设中,选择使用哪个外部时钟配置函数
在STM32的定时器外设中,选择使用哪个外部时钟配置函数主要取决于以下几个因素: 时钟源类型: TIM_ITRxExternalClockConfig:使用内部触发输入(ITRx),即来自其他定时器的时钟信号 TIM_TIxExternalClockConfig࿱…...
【Tauri2】026——Tauri+Webassembly
前言 不多废话 直言的说,笔者看到这篇文章大佬的文章 【04】Tauri 入门篇 - 集成 WebAssembly - 知乎https://zhuanlan.zhihu.com/p/533025312尝试集成一下WebAssembly,直接开始 正文 准备工作 新建一个项目 安装 vite的rsw插件和rsw pnpm instal…...
jenkins尾随命令
在访问jenkins的网址后面可以追加命令,比如访问地址是 http://10.20.0.124:8080/,常用的有以下几种方式: 1.关闭Jenkins 只要浏览器输入http://10.20.0.124:8080/exit即可退出,或者http://localhost:8080/exit 2.重启Jenkins …...
基于机器学习 LSTM 算法的豆瓣评论情感分析系统
基于机器学习 LSTM 算法的豆瓣评论情感分析系统 博主介绍:✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 ὄ…...
腾讯云对象存储m3u8文件使用腾讯播放器播放
参考腾讯云官方文档: 播放器 SDK Demo 体验_腾讯云 重要的一步来了: 登录腾讯云控制台,找到对象存储的存储桶。 此时,再去刷新刚才创建的播放器html文件,即可看到播放画面了。...
基于chatgpt和deepseek解答显卡的回答
当然可以!了解显卡特别是英伟达(NVIDIA)的系列,对于选购、升级或者了解游戏和创作性能都很重要。下面我帮你系统整理一下 NVIDIA 显卡的各个系列,并加点选购建议,方便你快速上手。 chatgpt 🧠 …...
2025年渗透测试面试题总结-拷打题库06(题目+回答)
网络安全领域各种资源,学习文档,以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具,欢迎关注。 目录 1. Sleep被禁用后的SQL注入 2. XSS属性控制利用 3. CSRF防护 4. 危险请求头 5. XXE高发场景 6. Ja…...
【一起学Rust】使用Thunk工具链实现Rust应用对Windows XP/7的兼容性适配实战
前言 在Rust语言快速发展的今天,开发者经常面临将现代语言特性与遗留系统兼容的挑战。特别是在工业控制、嵌入式设备等场景中,Windows XP/7等经典操作系统仍占据重要地位。本文深入解析如何通过Thunk工具链突破Rust编译器对旧版Windows系统的兼容性限制…...
leetcode 674. Longest Continuous Increasing Subsequence
目录 题目描述 第一步,明确并理解dp数组及下标的含义 第二步,分析明确并理解递推公式 第三步,理解dp数组如何初始化 第四步,理解遍历顺序 代码 题目描述 这是动态规划解决子序列问题的例子。与第300题的唯一区别就是&#…...
在VMware Workstation 17 Pro上实现Windows与UOS虚拟机之间复制粘贴文本及文件
在VMware Workstation 17 Pro上实现Windows与UOS虚拟机之间复制粘贴文本及文件 在本教程中,我们将介绍如何在VMware Workstation 17 Pro中安装UOS虚拟机,并通过安装open-vm-tools-desktop软件来实现Windows和UOS系统之间的文本和文件复制粘贴功能。 1.…...
十一、数据库day03--SQL语句02
文章目录 一、查询语句1. 基本查询2. 条件查询2.1 ⽐较运算符&逻辑运算符2.2 模糊查询2.3 范围查询2.4 判断空 3. 其他复杂查询3.1 排序3.2 聚合函数3.3 分组3.4 分页查询 二、回顾1. 使⽤ Navicat ⼯具中的命令列2.命令⾏基本操作步骤 提示:以下是本篇文章正文…...
第6章 类文件结构《深入理解Java虚拟机:JVM高级特性与最佳实践(第3版)》
第6章 类文件结构 代码编译的结果从本地机器码转变为字节码,是存储格式发展的一小步,却是编程语言发展的一大步。 6.1 概述 老师说过,计算机只认识0和1,所以我们写的程序需要被编译器翻译成由0和1构成的二进制格式才能被计算机…...
【Vue】模板语法与指令
个人主页:Guiat 归属专栏:Vue 文章目录 1. Vue 模板语法基础1.1 文本插值1.2 原始 HTML1.3 属性绑定 2. Vue 指令系统2.1 条件渲染2.2 列表渲染2.3 事件处理2.4 表单输入绑定 3. 计算属性与侦听器3.1 计算属性3.2 侦听器 4. 类与样式绑定4.1 绑定 HTML 类…...
Python语法系列博客 · 第5期[特殊字符] 模块与包的导入:构建更大的程序结构
上一期小练习解答(第4期回顾) ✅ 练习1:判断偶数函数 def is_even(num):return num % 2 0print(is_even(4)) # True print(is_even(5)) # False✅ 练习2:求平均值 def avg(*scores):return sum(scores) / len(scores)print(…...
HashMap 初步理解 put 操作流程 HashMap 的线程安全问题
一、HashMap 核心原理 HashMap 是 Java 中最常用的哈希表实现,基于 数组 链表/红黑树 的复合结构,核心特性如下: 哈希函数 键的哈希值通过 hashCode() 计算,并通过扰动函数优化分布:static final int hash(Object ke…...
服务治理-服务发现和负载均衡
第一步:引入依赖 第二步:配置地址 改写购物车服务的代码 负载均衡成功实现。 假如有一个服务挂了,比如说8081,cart-service能不能正常访问,感知到。 再重新启动8081端口。 不管服务宕机也好,还是服务刚启动…...
GNU,GDB,GCC,G++是什么?与其他编译器又有什么关系?
文章目录 前言1. GNU和他的工具1.1 gcc与g1.2 gdb 2.Windows的Mingw/MSVC3.LLVM的clang/clang4.Make/CMake 前言 在开始之前我们先放一段Hello World:hello.c #include <stdio.h>int main() {printf("Hello World");return 0; }然后就是一段老生常…...
定制一款国密浏览器(9):SM4 对称加密算法
上一章介绍了 SM3 算法的移植要点,本章介绍对称加密算法 SM4 的移植要点。 SM4 算法相对 SM3 算法来说复杂一些,但还是比较简单的算法,详细算法说明参考《GMT 0002-2012 SM4分组密码算法》这份文档。铜锁开源项目的实现代码在 sm4.c 文件中,直接拿过来编译就可以。 但需要…...
kafka集群认证
1、安装Kerberos(10.10.10.168) yum install krb5-server krb5-workstation krb5-libs -y 查看版本 klist -V Kerberos 5 version 1.20.1 编辑/etc/hosts 10.10.10.168 ms1 10.10.10.150 ms2 10.10.10.110 ms3 vim /etc/krb5.conf # Configuration snippets ma…...
Mermaid 是什么,为什么适合AI模型和markdown
什么是 Mermaid? Mermaid 是一个基于 JavaScript 的开源绘图和图表工具,允许用户通过简单的文本语法创建图表。它支持生成流程图、时序图、类图、甘特图等多种类型的可视化内容,并直接从类似 Markdown 的代码中渲染。Mermaid 因其与 Markdow…...
为什么信号完整性对于高速连接器设计至关重要?
外部连接器通过在各种电子元件和系统之间可靠地传输数据而不损失保真度来保持信号完整性。在本文中,我们将讨论信号完整性的重要性,回顾高速部署挑战,并重点介绍各种连接器设计策略,以防止失真和降级。 了解连接器信号完整性挑战…...
【FFmpeg从入门到精通】第三章-FFmpeg转封装
1 音视频文件转MP4格式 在互联网常见的格式中,跨平台最好的应该是MP4文件,因为MP4文件既可以在PC平台的 Flashplayer 中播放,又可以在移动平台的 Android、ios 等平台中进行播放,而且使用系统默认的播放器即可播放,因…...
PG数据库推进医疗AI向量搜索优化路径研究(2025年3月修订版)
PG数据库推进医疗AI向量搜索优化路径研究 一、医疗 AI 向量搜索的发展现状与挑战 1.1 医疗数据特征与检索需求 医疗数据作为推动医疗领域进步与创新的关键要素,具有鲜明且复杂的特征。从多模态角度看,医疗数据涵盖了结构化数据,如患者基本信息、检验检查报告中的数值结果;…...
Android 下拉栏中的禁用摄像头和麦克风隐藏
Android 下拉栏中的禁用摄像头和麦克风隐藏 文章目录 Android 下拉栏中的禁用摄像头和麦克风隐藏一、前言二、下拉框中的禁用摄像头和麦克风隐藏实现1、设置支持属性为false2、修改代码 三、其他1、下拉栏中的禁用摄像头和麦克风隐藏小结2、 Android SensorPrivacyService ps&a…...
阿里云Clickhouse 冷热数据分层存储 实战记录
一、 背景 某业务Clickhouse库月数据增长超过2.5T,云上Clickhouse容量并不是无限的,单节点有32T上限,而业务已使用一半以上,依此速度,半年内就将达到上限。 与业务讨论,大致有以下几种解决思路:…...