pdf.js 是个好东西 👍
简单说：它让浏览器“原生”显示 PDF，不用任何插件。下面我给你一份从原理 → 用法 → 本地部署 → 二次开发的完整实战说明。

一、pdf.js 是什么？

pdf.js 是 Mozilla（火狐）官方开源项目：

👉 用 JavaScript + HTML5 Canvas 在浏览器里解析和渲染 PDF
👉 不依赖 Flash / 插件
👉 支持 Chrome / Edge / Firefox / Safari

GitHub 项目：
https://github.com/mozilla/pdf.js

二、pdf.js 能干什么？

• 🌐 网页内嵌 PDF 预览
• 📄 在线阅读器（类似浏览器自带 PDF）
• 🔍 搜索 PDF 文本
• 🔎 缩放、分页、旋转
• 🖨 打印
• ✍️ 标注（部分版本）
• 📱 移动端支持

三、最简单的使用方式（3 分钟上手）

方法 1：直接用官方 Viewer（推荐新手）

<iframe
  src="https://mozilla.github.io/pdf.js/web/viewer.html?file=demo.pdf"
  width="100%"
  height="800">
</iframe>

只要把 demo.pdf 换成你的 PDF 路径即可。

方法 2：本地部署 pdf.js（最常用）

1️⃣ 下载

git clone https://github.com/mozilla/pdf.js.git

或下载 release 包。

2️⃣ 使用 web/viewer.html

pdfjs/
 ├─ web/
 │   ├─ viewer.html
 │   ├─ viewer.js
 │   └─ viewer.css
 ├─ build/

访问：

http://localhost/pdfjs/web/viewer.html?file=test.pdf

四、前端最小代码示例（核心 API）

<canvas id="pdf"></canvas>

<script src="pdf.min.js"></script>
<script>
pdfjsLib.getDocument('test.pdf').promise.then(pdf => {
  pdf.getPage(1).then(page => {
    const scale = 1.5;
    const viewport = page.getViewport({ scale });

    const canvas = document.getElementById('pdf');
    const ctx = canvas.getContext('2d');
    canvas.width = viewport.width;
    canvas.height = viewport.height;

    page.render({
      canvasContext: ctx,
      viewport: viewport
    });
  });
});
</script>

👉 适合二次开发、自定义 UI

五、常见功能怎么实现？

📄 翻页

pdf.getPage(pageNum)

🔍 文本搜索

page.getTextContent()

🔎 缩放

page.getViewport({ scale: 2 })

🖨 打印

• 使用 viewer 内置功能
• 或调用浏览器打印

六、pdf.js vs 其他方案

七、常见坑（你很可能会遇到）

❗ 1. 跨域问题

PDF 和网页必须同源
或服务器开启 CORS

❗ 2. 中文乱码？

pdf.js 没问题
👉 PDF 本身没嵌入字体才会乱码

❗ 3. 大文件慢

• 开启分页加载
• 降低 scale
• 用 Web Worker（默认已开）

八、适合哪些项目？

• 在线文档系统
• 教程 / 说明书
• 网盘 / CMS
• 合同预览
• 学习平台

九、你现在是想“用”还是“改” pdf.js？

你可以直接说：

• 👉「我只想网页预览 PDF」
• 👉「我要二次开发 PDF 阅读器」
• 👉「pdf.js + Vue / React」
• 👉「加水印 / 禁止下载」
• 👉「移动端适配」

我可以直接给你：

• 完整示例代码
• Vue / React 组件封装
• 性能优化方案
• 安全/防下载思路

一句话：
pdf.js 我可以带你从“能用”到“专业级”📄🚀