记录一下pdfjs-dist折磨过我的大坑

最新推荐文章于 2025-11-26 10:54:56 发布
原创 最新推荐文章于 2025-11-26 10:54:56 发布 · 9.3k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #开发语言 #ecmascript

本文描述了一位开发者在使用PDF.js从2.0.943版本升级过程中遇到的问题及解决方案。由于同事离职，遗留代码变得难以维护，作者在尝试更新版本时遇到了意外的语法错误。通过调整依赖包的安装方式，成功解决了版本不匹配的问题，使项目恢复正常运行。

之前用的是pdfjs-dist 2.0.943 版本,但是没想到后面几次版本更新,原来的使用方法发生改变,而那个页面不是我写的,是之前一个同事写的但是他离职了,比较复杂,不好维护,琢磨了几天,一直报下面的两行错误.

promise
Uncaught SyntaxError: Unexpected token <

然后把包删了重下也有问题.一直不是我要的版本,
在这里插入图片描述
这里明明写的是2.0.943版本结果总下成2.4.456版本,非常让人苦恼,后来解决方法是
在这里插入图片描述

"pdfjs-dist": "2.0.943",

删掉前面一个小尖括号,就能安装指定的依赖包了.然后项目就能正常运行了.

vue3纯前端PDF预览插件：pdfjs-dist的使用教程 js解析pdf文件实现预览，并获取pdf文件中的内容
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
10-24 5694
pdfjs-dist 是 Mozilla 提供的一个 JavaScript 库，用于在浏览器中解析和渲染 PDF 文档。它基于 HTML5 和 Canvas 技术，可以高效地在网页上展示 PDF 文件。使用pdfjs-dist可以轻松实现纯前端的 PDF 预览功能。上述示例展示了如何加载和渲染 PDF 文件的基本步骤。你可以根据需要扩展功能，例如添加页码切换、缩放功能等。希望这篇教程能帮助你快速入门 PDF 文件的预览开发！
PDFJS 解析pdf
cai_ping_的博客
09-02 8942
文本复制有个问题：当pdf缩小时 scale < 1，显示的textLayer 不会进行缩小、回导致文本超出canvas显示的宽度。注：若针对pdf还有个性化的功能，不建议直接引入pdf.js 方法，里面的事件都是原生js的写法，而且有关pdf的配置也很多。有对应的示例git clone后，将viewer.html open whith live server。（1）安装 pdfjs-dist （版本2.0.943，其余版本都出现过问题）（2）引用 pdfjs-dist。
web前端pdf加载预览最佳实践
最新发布
零凌林的博客
11-26 1507
随着业务不断发展，用户对 PDF 下载前的预览需求日益增强，仅提供下载已难以满足实际使用场景。传统的 <embed> 和 <iframe> 标签在展示效果和交互体验上存在明显局限，无法满足设计与功能要求。为此，我们引入了 pdfjs-dist 库，在网页中精准还原 PDF 原貌，实现了高质量的在线预览效果。接下来，本文将带您深入了解这一实践方案的实现过程。
Vue 3 结合 pdfjs - dist 实现大文件预览
lkz
04-10 3602
pdfjs - dist 是一个用于在浏览器中渲染 PDF 文件的 JavaScript 库。它能够将 PDF 文件解析并渲染为 HTML5 的 canvas 元素，从而实现跨平台、无需插件的 PDF 预览。其核心优势在于对大文件的处理能力，通过分块加载和按需渲染等技术，有效提升了大 PDF 文件的加载速度和用户体验。
pdfjs-dist
DGplayweb的博客
06-17 1706
pdfjs-dist 版本过高会导致 项目编译启动失败！此为编译运行失败断点。
【VUE - 工具 - pdfjs-dist】04、vuecli3 + pdfjs-dist实现简单的pdf预览
热门推荐
汪同学丶的博客
08-30 2万+
vue + pdfjs-dist 1、安装依赖 npm install pdfjs-dist -S 2、项目使用 <template> <div class="pdf-container" v-if="showPdf"> <canvas v-for="page in pages" :id="'canvas' + page" :key="page">&lt...
精选资源
pdfjs-dist.rar
12-30
"pdfjs-dist.rar" 是一个包含 PDF.js 库的压缩包，供开发者下载和使用。 PDF.js 的核心功能包括： 1. **浏览器兼容性**：PDF.js 支持多种现代浏览器，包括 Chrome、Firefox、Safari、Edge 和 Internet Explorer 11...
精选资源
pdfjs-4.0.269-dist
01-26
"pdfjs-4.0.269-dist" 是该库的一个特定版本，版本号为 4.0.269，它包含了库的分发版文件。 在 "pdfjs-4.0.269-dist" 压缩包中，我们可以找到以下几个关键文件和目录： 1. **LICENSE**: 这个文件通常包含了库的...
pdfjs -3.4-dist
03-01
"pdfjs -3.4-dist" 是PDF.js的3.4.120版本的发布包，它包含了最新的更新和改进。 在这个压缩包中，我们可以看到以下几个关键文件： 1. **LICENSE**：这是PDF.js项目的许可文件，通常包含了该项目的授权协议信息。...
精选资源
高亮img、pdf重点部分（html2canvas、pdfjs-dist、react-pdf）demo
08-28
其次，`pdfjs-dist`是PDF.js项目的一部分，这是一个由Mozilla维护的开源库，用于在浏览器中查看PDF文档。PDF.js通过解析PDF文件，将其转换为可操作的HTML5 Canvas元素，从而提供了一种在浏览器中流畅展示PDF文档的...
pdfjs-2.0.943-dist
11-30
pdfjs-2.0.943-dist.zip 官网下载，原版无修改，上传一份备用。
pdfjs-1.4.20-dist
09-11
pdfjs-1.4.20-dist 最新版的pdfjs(截止到2016年9月11日22:24:10) 我费了好大劲从墙外下载下来的，为不方便出墙的童鞋有个能下载的地方
pdfjs-dist:PDF.js库的通用构建
04-28
PDF.js PDF.js是使用HTML5构建的可移植文档格式（PDF）库。 我们的目标是创建一个基于Web标准的通用平台，用于解析和呈现PDF。 这是PDF.js源代码的预构建版本。 它是由构建脚本自动生成的。 适用于较旧的浏览器或环境，不支持现代功能，例如async / await ， ReadableStream ，可选链接和无效合并； 请查看legacy文件夹。 有关学习和贡献，请参见 。
pdfjs-2.2.228-dist.zip
03-25
使用pdfjs-2.2.228-dist实现pdf文件在线预览，客户端无需下载任何插件即可在线预览pdf文件
pdfjs-2.0.943-dist+pdfjs-2.1.266-dist
05-06
pdfjs从官网下载了半天才下下来，放这里方便下载 pdfjs-2.0.943-dist pdfjs-2.1.266-dist
精选资源
pdfjs-3.4.120-legacy-dist
03-02
这个压缩包"pdfjs-3.4.120-legacy-dist"包含了PDF.js库的3.4.120版本，这是一个重要的里程碑，因为它提供了对PDF文档的高质量、跨平台的浏览支持。 首先，我们来看看`LICENSE`文件。它通常包含项目的许可信息，确认...
PDF预览 (pdfjs-dist)
m0_60373256的博客
06-03 1287
pdf预览、pdfjs
vue3中借助 pdfjs-dist 实现pdf文件展示、文本选中功能及使用过程中部分问题处理
qq_45897239的博客
02-06 2万+
一、文件预览 1、安装 `pdfjs-dist` ，此处指定版本为 `2.16.105` 2、`html` 结构内容 3、`js` 功能实现： 4、可能出现的问题 (1) 部分字体出现乱码或浏览器控制台出现警告 二、文本选中 1、功能实现 2、可能出现的问题： (1) 页面文字可选中，但文本不可见 (2) 浏览器控制台报错 `Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'dispatch
ERROR Failed to compile with 2 errors 14:31:10 These dependencies were not found: * pdfjs-dist in ./src/components/Editor/pdf.js * pdfjs-dist/build/pdf.worker.entry in ./src/components/Editor/pdf.js To install them, you can run: npm install --save pdfjs-dist pdfjs-dist/build/pdf.worker.entry
10-01
解决项目中依赖 `pdfjs-dist` 和 `pdfjs-dist/build/pdf.worker.entry` 未找到错误，可参考以下方法： - **安装依赖**：在项目根目录下，使用包管理工具安装 `pdfjs-dist` 依赖。 - 若使用 `npm`，命令为： ```bash npm install pdfjs-dist ``` - 若使用 `yarn`，命令为： ```bash yarn add pdfjs-dist ``` - **指定版本**：通过查阅 vue - pdf 的 github 项目的 issue，可在自己的项目引入 `pdfjs-dist` 依赖包，并指定该包的项目固定为 2.5.207，以此解决依赖未找到问题 [^2]。 - **正确引入**：根据 `pdfjs-dist` 不同版本，采用不同的引入方式。 - 1.2.8.335 版本之前： ```javascript import pdfJS from "pdfjs-dist"; import workerSrc from 'pdfjs-dist/build/pdf.worker.entry' pdfJS.workerSrc = workerSrc; ``` - 2.8.335 版本之后： ```javascript import * as PdfJs from 'pdfjs-dist/legacy/build/pdf.js' PdfJs.workerSrc = require('pdfjs-dist/build/pdf.worker.entry') ``` - **示例引用方式**：也可参考如下引用方式。 ```javascript const PDFJS = require("pdfjs-dist"); import { TextLayerBuilder, EventBus } from "pdfjs-dist/web/pdf_viewer"; import "pdfjs-dist/web/pdf_viewer.css"; const pdfjsWorker = import("pdfjs-dist/build/pdf.worker.entry"); PDFJS.GlobalWorkerOptions.workerSrc = pdfjsWorker; const eventBus = new EventBus(); ```
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值