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

vite：npm 安装 pdfjs-dist , PDF.js View 预览功能示例

article 2025/10/6 1:14:22

pdfjs-dist 是 Mozilla 的 PDF.js 库的预构建版本，能让你在项目里展示 PDF 文件。下面为你介绍如何用 npm 安装 pdfjs-dist 并应用 pdf.js 和 pdf.worker.js。

为了方便，我将使用 vite 搭建一个原生 js 项目。

1.创建项目
npm create vite@latest pdf-view
选：Vanilla
选：JavaScript

2.初始化项目
cd pdf-view
cnpm install

3.安装 pdfjs-dist
cnpm install pdfjs-dist@3.11.174 --save

编写 index1.html 如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>PDF.js View 示例</title><link rel="stylesheet" href="/pdf.css" />
</head>
<body><div class="container"><input type="file" id="fileInput" accept=".pdf"><div class="controls"><button id="prevPage">← 上一页</button><div class="page-control"><input type="number" id="pageInput" min="1" step="1" disabled><button id="goButton" disabled>跳转</button><span>/ <span id="totalPages">-</span></span></div><button id="nextPage">下一页 →</button><div class="scale-control"><button id="zoomOut">-</button><span id="scaleValue">100%</span><button id="zoomIn">+</button></div></div><div id="canvasContainer"><canvas id="pdfCanvas"></canvas></div></div><script type="module" src="/pdf-view.js"></script>
</body>
</html>

编写 pdf.css 如下

    .container {max-width: 1000px;margin: 10px auto;padding: 15px;}.controls {display: flex;gap: 10px;align-items: center;margin-bottom: 15px;}#canvasContainer {border: 1px solid #ddd;overflow: auto;max-height: 80vh;position: relative;}canvas {transition: transform 0.2s ease;}input[type="number"] {width: 60px;padding: 4px;text-align: center;}button {padding: 6px 12px;background: #007bff;color: white;border: none;border-radius: 4px;cursor: pointer;}button:disabled {background: #6c757d;cursor: not-allowed;}.scale-control {margin-left: auto;display: flex;align-items: center;gap: 5px;}

编写 pdf-view.js 如下

import * as pdfjsLib from 'pdfjs-dist';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.min.js';// 初始化配置
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;// 状态管理对象
const state = {currentPage: 1,totalPages: 0,scale: 1.0,pdfDoc: null,isRendering: false,MIN_SCALE: 0.5,MAX_SCALE: 3.0,ZOOM_STEP: 0.1
};// DOM 元素引用
const dom = {canvas: document.getElementById('pdfCanvas'),container: document.getElementById('canvasContainer'),prevBtn: document.getElementById('prevPage'),nextBtn: document.getElementById('nextPage'),pageInput: document.getElementById('pageInput'),goBtn: document.getElementById('goButton'),totalPages: document.getElementById('totalPages'),zoomIn: document.getElementById('zoomIn'),zoomOut: document.getElementById('zoomOut'),scaleValue: document.getElementById('scaleValue'),fileInput: document.getElementById('fileInput')
};// 初始化事件监听
function initEventListeners() {// 文件选择dom.fileInput.addEventListener('change', handleFileSelect);// 翻页控制dom.prevBtn.addEventListener('click', () => changePage(-1));dom.nextBtn.addEventListener('click', () => changePage(1));// 页面跳转dom.goBtn.addEventListener('click', handlePageJump);dom.pageInput.addEventListener('keypress', e => {if (e.key === 'Enter') handlePageJump();});// 缩放控制dom.zoomIn.addEventListener('click', () => changeScale(state.ZOOM_STEP));dom.zoomOut.addEventListener('click', () => changeScale(-state.ZOOM_STEP));// 鼠标滚轮缩放dom.container.addEventListener('wheel', handleWheelZoom, { passive: false });
}// 处理文件选择
async function handleFileSelect(e) {const file = e.target.files[0];if (!file) return;try {const arrayBuffer = await file.arrayBuffer();state.pdfDoc = await pdfjsLib.getDocument(arrayBuffer).promise;state.totalPages = state.pdfDoc.numPages;initUI();await renderPage();} catch (err) {console.error('文件加载失败:', err);}
}// 初始化界面状态
function initUI() {dom.totalPages.textContent = state.totalPages;dom.pageInput.max = state.totalPages;dom.pageInput.value = 1;dom.pageInput.disabled = false;dom.goBtn.disabled = false;dom.zoomIn.disabled = false;dom.zoomOut.disabled = false;
}// 核心渲染函数
async function renderPage() {if (!state.pdfDoc || state.isRendering) return;state.isRendering = true;try {const page = await state.pdfDoc.getPage(state.currentPage);const viewport = page.getViewport({ scale: state.scale });// 调整画布尺寸dom.canvas.width = viewport.width;dom.canvas.height = viewport.height;// 渲染页面await page.render({canvasContext: dom.canvas.getContext('2d'),viewport: viewport}).promise;updateUIState();} catch (err) {console.error('页面渲染失败:', err);} finally {state.isRendering = false;}
}// 更新界面状态
function updateUIState() {dom.pageInput.value = state.currentPage;dom.totalPages.textContent = state.totalPages;dom.scaleValue.textContent = `${Math.round(state.scale * 100)}%`;// 按钮状态dom.prevBtn.disabled = state.currentPage <= 1;dom.nextBtn.disabled = state.currentPage >= state.totalPages;dom.zoomIn.disabled = state.scale >= state.MAX_SCALE;dom.zoomOut.disabled = state.scale <= state.MIN_SCALE;
}// 翻页处理
function changePage(offset) {const newPage = state.currentPage + offset;if (newPage < 1 || newPage > state.totalPages) return;state.currentPage = newPage;renderPage();
}// 页面跳转处理
function handlePageJump() {const target = parseInt(dom.pageInput.value) || 1;const validPage = Math.max(1, Math.min(target, state.totalPages));if (validPage !== state.currentPage) {state.currentPage = validPage;renderPage();}
}// 缩放处理
function changeScale(delta) {state.scale = parseFloat(Math.max(state.MIN_SCALE, Math.min(state.scale + delta, state.MAX_SCALE)).toFixed(1));renderPage();
}// 鼠标滚轮缩放处理
function handleWheelZoom(e) {if (!e.ctrlKey) return;e.preventDefault();const delta = e.deltaY > 0 ? -state.ZOOM_STEP : state.ZOOM_STEP;changeScale(delta);
}// 启动应用
initEventListeners();

代码解释

导入 pdfjsLib 和 pdfjsWorker：借助 ES6 模块语法导入 pdfjs-dist 库和 pdf.worker.js。
设置 worker 源：把 pdfjsLib.GlobalWorkerOptions.workerSrc 设为 pdfjsWorker，从而让 PDF.js 能够正确使用 Web Worker。
加载 PDF 文件：利用 pdfjsLib.getDocument 方法加载指定的 PDF 文件。
渲染第一页：获取 PDF 的第一页，创建一个 canvas 元素，然后把页面渲染到 canvas 上。
错误处理：使用 .catch 方法捕获并处理加载 PDF 文件时可能出现的错误。

运行 npm run dev
VITE v6.3.5 ready in 1066 ms

访问 http://localhost:5173/index1.html

vite：npm 安装 pdfjs-dist , PDF.js View 预览功能示例

pdfjs-dist 是 Mozilla 的 PDF.js 库的预构建版本，能让你在项目里展示 PDF 文件。下面为你介绍如何用 npm 安装 pdfjs-dist 并应用 pdf.js 和 pdf.worker.js。为了方便，我将使用 vite 搭建一个原生 js 项目。 1.创建项目 npm create vitelatest pdf-v…...

编程日记 2025/9/18 11:54:56

【开源版】likeshop上门家政系统PHP版全开源+uniapp前端

一.系统介绍 likeshop_上门家政系统，PHP版本更新至2.1.1最新版，全开源，适用于上门家政场景，系统拥有用户端、师傅端、无论运营还是二开都是性价比极高的100%开源家政系统。二.搭建环境-教程系统环境：CentOS、运行…...

编程日记 2025/10/2 16:15:12

html object标签介绍（用于嵌入外部资源通用标签）（已不推荐使用deprecated，建议使用img、video、audio标签）

文章目录 HTML <object> 标签详解基本语法与核心属性关键属性解析1. **data**2. **type**3. **width & height**4. **name** 嵌入不同类型的资源1. **嵌入图像**2. **嵌入音频**3. **嵌入视频**4. **嵌入 PDF** 参数传递与回退内容**参数（<param>&a…...

编程日记 2025/6/9 8:58:22

MySQL 8.0 OCP 英文题库解析（一）

Oracle 为庆祝 MySQL 30 周年，从 2025.04.20 ~ 2025.07.31 之间，所有人均可以免费考取 MySQL OCP 认证。从今天开始，将英文题库免费公布出来，并进行解析，帮助大家在一个月之内轻松通过OCP认证，省1700多RMB&…...

编程日记 2025/9/17 6:13:27

路由器断流排查终极指南：从Ping测试到Wireshark抓包5步定位法

测试路由器是否出现“断流”（网络连接间歇性中断），需通过多维度排查硬件、软件及外部干扰因素。以下是详细步骤指南： 一、基础环境准备设备连接有线测试：用网线将电脑直接连接路由器LAN口，排除WiFi干扰。…...

编程日记 2025/9/20 7:06:34

【Python零基础入门系列】第1篇：Python 是什么？怎么装环境？推荐哪些 IDE？

各位网友们，欢迎来到我的 Python 学习专栏！前两天看到新闻英伟达为 CUDA 添加原生 Python 支持，意味着开发者可直接用 Python 操作 GPU，加速 AI 和高性能计算，降低门槛，让 Python 的应用范围更广、能力更强。一直想写一系列文章教知友们从零开始学会 Python 编程，目…...

编程日记 2025/9/17 5:36:18

Spring Boot3 实现定时任务每10分钟执行一次，同时要解决分布式的问题区分不同场景

在Spring Boot 3中实现分布式定时任务，确保多实例环境下任务仅执行一次，可以采用以下方案： 方案一：Redis分布式锁（推荐） import org.springframework.data.redis.core.StringRedisTemplate; import org.sp…...

编程日记 2025/6/15 22:27:09

04 基于 STM32 的时钟展示程序

前言我们经常会看到各个场合下面有基于数码管的时钟程序比如在车站, 教室, 办公室等等各个场合都有然后这里就是做一个简单的时钟程序展示程序测试用例每一秒钟更新时间, 然后迭代更新天, 时, 分等等然后主流程基于天, 时分秒渲染数码管 #incl…...

编程日记 2025/10/5 12:29:56

n8n工作流自动化平台：生成图文并茂的分析报告之Merge节点详细说明

1.成果展示 1.1工作流示意图 1.2成果数据都是造得 2Merge节点 2.1Mode 通过选择模式指定合并节点应如何组合来自不同数据流的数据 2.1.1Append 保存所有输入的数据。选择一个输入数量，逐一输出每个输入的项目。节点等待所有连接的输入的执行。 2.1.2Combine 2.1.2.1Co…...

编程日记 2025/10/5 19:09:56

华为设备MSTP

一、MSTP核心理论 1. 基本概念 MSTP定义：MSTP（Multiple Spanning Tree Protocol）是一种基于实例的生成树协议，支持多个生成树实例（MSTI），每个实例对应一组VLAN，实现不同VLAN流量的负…...

编程日记 2025/10/5 12:08:16

华为银河麒麟 V10（ARM）系统软件部署全攻略：Redis、RabbitMQ、MySQL 等集群搭建指南

一、Redis 集群部署（主从哨兵模式） 1. 环境准备系统：华为银河麒麟 V10（ARM64）节点：3 台服务器（1 主 2 从 3 哨兵） 2. 安装包下载 bash # 华为镜像站 wget https://update.c…...

编程日记 2025/8/10 16:34:19

Loly: 1靶场渗透

Loly: 1 来自 <Loly: 1 ~ VulnHub> 1，将两台虚拟机网络连接都改为NAT模式 2，攻击机上做namp局域网扫描发现靶机 nmap -sn 192.168.23.0/24 那么攻击机IP为192.168.23.182，靶场IP192.168.23.241 3，对靶机进行端口服务探测 n…...

编程日记 2025/10/3 0:39:01

Linux系统入门第十一章 --Shell编程之函数与数组

一、Shell函数 1、函数的用法 Shell函数可用于存放一系列的指令。在Shell脚本执行的过程中，函数被置于内存中，每次调用函数时不需要从硬盘读取，因此运行的速度比较快。在Shell编程中函数并非是必须的元素，但使用函数可以对程序进…...

编程日记 2025/9/20 5:33:04

AWS VPC架构师指南：从零设计企业级云网络隔离方案

一、VPC核心概念解析 1.1 核心组件 VPC：逻辑隔离的虚拟网络，可自定义IPv4/IPv6地址范围（CIDR块） 子网（Subnet）： 公有子网：绑定Internet Gateway（IGW）&#…...

编程日记 2025/6/7 8:12:31

聊聊自动化办公未来趋势

1. 自动化办公未来趋势 1.1 智能化与AI融合加深随着人工智能技术的不断成熟，其在自动化办公中的应用将更加广泛和深入。未来，办公软件将具备更强的智能交互能力，能够理解自然语言指令，自动完成复杂的任务，如文档编辑…...

编程日记 2025/10/4 4:00:57

Flutter 异步原理-Zone

前言 Zone 是 Dart 异步模型中的核心机制，主要用于： 隔离异步上下文，形成逻辑上的执行环境。捕获未处理的异步异常，保证系统稳定。自定义异步任务的调度行为（比如微任务、Timer）。什么是 Zone&#xff1…...

编程日记 2025/5/28 3:00:53

HarmonyOS学习——ArkTS语法介绍之基本知识

ArkTS是一种为构建高性能应用而设计的编程语言。ArkTS在继承TypeScript语法的基础上进行了优化，以提供更高的性能和开发效率。目前流行的编程语言TypeScript是在JavaScript基础上通过添加类型定义扩展而来的，而ArkTS则是TypeScript的进一步扩展。TypeS…...

编程日记 2025/10/3 0:36:40

电子电器架构 --- 网关转发时延解析

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师：钝感力的“钝”，不是木讷、迟钝，而是直面困境的韧劲和耐力，是面对外界噪音的通透淡然。生活中有两种人，一种人格外在意别人的眼光;另一种人无论…...

编程日记 2025/9/19 23:27:30

minio数据迁移(两台服务器没法相互通信)

场景描述: A服务器无法访问 B服务器，B服务器也无法访问 A（即双方都不能通过公网或内网直连对方） MinIO 官方提供了 mc（MinIO Client）命令行工具，可以直接实现 Bucket 之间的数据迁移： 安装 …...

编程日记 2025/9/11 0:36:33

笔记，麦克风的灵敏度

麦克风的“灵敏度（Sensitivity）”决定了它捕捉声音细节的能力。想象麦克风是一只有耳朵的生物。高灵敏度麦克风像长着“超级顺风耳”的精灵，能听见花瓣飘落的声音、远处树叶的沙沙声，甚至你心跳的微弱震动。适合录音棚里捕捉歌手的…...

编程日记 2025/6/9 15:09:43

特殊配合力（SCA）作为全基因组关联分析（GWAS）的表型，其生物学意义和应用价值

生物学意义解析非加性遗传效应特殊配合力（SCA）主要反映特定亲本组合的杂交优势，由非加性遗传效应（如显性、超显性、上位性）驱动。显性效应涉及等位基因间的显性互作，上位性效应则涉及不同位点间的基因互作。通过SCA-GWAS，可以定位调控这些非加性效应的关键基因组区域…...

编程日记 2025/10/5 22:09:48

2025年全新 AI 编程工具 Cursor 安装使用教程

一、Cursor 软件下载首选，登录Cursor官网，进行软件下载，官网下载地址如下： Cursor AI IDE 下载二、Cursor软件安装配置此处以Windows10系统安装为例，下载完成之后，右键安装包，以管理员身份…...

编程日记 2025/10/5 14:57:51

HarmonyOS 鸿蒙操作物联网设备蓝牙模块、扫描蓝牙、连接蓝牙和蓝牙通信

01【HarmonyOS 蓝牙】物联网无线传输方案、HarmonyOS蓝牙数据通信之前的准备工作 02【HarmonyOS 蓝牙】配置蓝牙权限检测打开关闭蓝牙扫描蓝牙显示蓝牙设备 03【HarmonyOS 蓝牙】连接蓝牙发现服务获取特征值读取信息写入信息和蓝牙模块交互 04【物联网 Wifi模块…...

编程日记 2025/10/2 14:38:58

MVC是什么？分别对应SpringBoot哪些层？

作为Java开发者，理解MVC在SpringBoot中的实现方式直接影响我们构建可维护的Web应用能力。本文将用生产级代码示例揭示各层对应关系，并分享分层设计中的实用技巧。一、MVC本质：解耦的艺术（SpringBoot视角） 1. 经典MVC三元组组件职责SpringBoot对应层典型代码注解Model数…...

编程日记 2025/8/19 17:11:24

【质量管理】TRIZ因果链分析：解码质量问题的“多米诺效应“

为什么要使用因果链分析没有发现问题并不等于没有问题。爱因斯坦曾说，如果我只有一个小时的时间来拯救世界，我将花45分钟时间分析问题，10分钟的时间来检查问题，最后5分钟的时间来解决问题。可见问题分析的重要性。在质量管理实践…...

编程日记 2025/10/3 0:36:53

解决librechat 前端界面没有google gemini 2.5模型的选项

问题概述根据librechat 的更新清单，是支持了google gemini的模型，但是却找不到界面上较新的 2.5模型的配置选项。通过查阅项目的文档（GitHub）， 看到： 由于目前还不支持获取模型列表，因此您应…...

编程日记 2025/10/5 12:17:42

STM32实现simpleFOC控制无刷电机

一、FOC基础知识学习使用simpleFOC控制无刷电机前，需要大概了解一下相关知识，包括力矩控制、速度控制、位置控制的原理和它们之间的联系。推荐学习资料： 教你写一个比SimpleFOC更好的电机库_哔哩哔哩_bilibili 《灯哥手把手教你写FOC算…...

编程日记 2025/9/18 10:06:23

Redis-数据一致性问题与解决方案

Redis-数据一致性问题与解决方案引言 Redis 是一个高性能的内存数据库，广泛应用于缓存、会话存储、实时分析等场景。作为一个 NoSQL 数据库，它的高性能和丰富的数据结构使其成为现代微服务架构中不可或缺的组件。然而，在高并发的环境下&am…...

编程日记 2025/6/5 16:59:22

项目实战-基于信号处理与SVM机器学习的声音情感识别系统

目录一.背景描述二.理论部分三.程序设计编程思路流程图 1.信号部分创建数据 generate_samples.py 头文件生成函数 generate_emotion_sample 传入参数存储路径生成参数创建基础正弦波信号调制基础正弦波对于愤怒可以增加噪声归一化信号存储主函…...

编程日记 2025/10/5 8:18:42

二、【LLaMA-Factory实战】数据工程全流程：从格式规范到高质量数据集构建

一、引言在大模型微调中，数据质量直接决定模型性能。LLaMA-Factory提供了完整的数据工程工具链，支持从数据格式规范到清洗增强、注册验证的全流程管理。本文结合结构图、实战代码和生产级经验，带您掌握构建高质量数据集的核心技术。二、数…...

编程日记 2025/8/25 18:49:05

代码解释

相关文章：