docker13972684/pdfjs-viewer

PDF.js Docker镜像文档

镜像概述和主要用途

PDF.js是一个基于HTML5构建的可移植文档格式(PDF)查看器，由Mozilla主导并由社区驱动开发。本Docker镜像封装了PDF.js的核心功能，提供了便捷的部署方式，可快速集成到Web应用、本地开发环境或演示系统中，实现PDF文件的解析与渲染。

核心功能和特性

• Web标准兼容：基于HTML5技术栈开发，支持async/await、ReadableStream等现代JavaScript特性
• 多浏览器支持：提供现代浏览器版本和旧版浏览器兼容版本（legacy）
• 内置查看器：包含完整的Web Viewer界面，支持PDF文件的浏览、缩放、搜索等基础操作
• 浏览器扩展集成：已内置于Firefox 19+，并提供Chrome扩展版本
• 高度可定制：通过API可灵活集成到自定义Web应用中，支持自定义渲染逻辑
• 社区驱动：活跃的开发社区和完善的文档支持

使用场景和适用范围

• Web应用集成：为各类Web系统提供PDF文件在线预览功能
• 本地开发环境：快速搭建PDF.js开发和测试环境，无需手动配置依赖
• 演示系统：部署轻量级PDF查看器演示服务
• 浏览器扩展开发：作为Chrome/Firefox扩展开发的基础环境
• 教育/文档系统：集成到在线教育平台或文档管理系统中

详细的使用方法和配置说明

前提条件

• Docker Engine 19.03+
• Docker Compose 2.0+（可选）

镜像获取

bash
docker pull pdfjs-viewer:latest
# 或指定版本（如legacy版）
docker pull pdfjs-viewer:legacy

基本使用方法

使用docker run快速启动

现代浏览器版本：

bash
docker run -d \
  --name pdfjs-viewer \
  -p 8080:80 \
  -v /path/to/your/pdfs:/usr/share/nginx/html/pdfs \
  pdfjs-viewer:latest

访问 http://localhost:8080/web/viewer.html 即可打开查看器，通过URL参数加载PDF文件：
http://localhost:8080/web/viewer.html?file=/pdfs/your-document.pdf

旧版浏览器兼容版本：

bash
docker run -d \
  --name pdfjs-viewer-legacy \
  -p 8081:80 \
  pdfjs-viewer:legacy

访问 http://localhost:8081/legacy/web/viewer.html 使用旧版查看器。

Docker Compose配置示例

创建docker-compose.yml：

yaml
version: '3.8'

services:
  pdfjs:
    image: pdfjs-viewer:latest
    container_name: pdfjs-viewer
    ports:
      - "8080:80"
    volumes:
      - ./pdfs:/usr/share/nginx/html/pdfs  # 挂载本地PDF文件目录
      - ./custom-viewer:/usr/share/nginx/html/web  # 自定义查看器界面（可选）
    environment:
      - PORT=80
      - VIEWER_PATH=/web/viewer.html
    restart: unless-stopped

启动服务：

bash
docker-compose up -d

配置参数说明

环境变量

持久化存储

• PDF文件存储：通过 -v /local/path:/usr/share/nginx/html/pdfs 挂载本地目录，可在查看器中通过?file=/pdfs/filename.pdf访问
• 自定义查看器：挂载自定义的web目录（包含viewer.html等文件）到/usr/share/nginx/html/web，实现界面定制

高级使用：集成到Web应用

通过API在自定义Web应用中集成PDF.js（需在应用中引入容器内的pdf.js资源）：

html
<!-- 在你的Web页面中引入PDF.js -->
<script src="http://localhost:8080/build/pdf.js"></script>

<script>
  // 初始化PDF查看器
  async function renderPDF(url) {
    const pdfjsLib = window['pdfjs-dist/build/pdf'];
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'http://localhost:8080/build/pdf.worker.js';

    const pdfDoc = await pdfjsLib.getDocument(url).promise;
    console.log(`PDF加载完成，共${pdfDoc.numPages}页`);

    // 渲染第一页
    const page = await pdfDoc.getPage(1);
    const viewport = page.getViewport({ scale: 1.5 });
    const canvas = document.getElementById('pdfCanvas');
    const context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    await page.render({ canvasContext: context, viewport: viewport }).promise;
  }

  // 加载PDF文件
  renderPDF('/pdfs/sample.pdf');
</script>

<canvas id="pdfCanvas"></canvas>

构建自定义镜像（可选）

如需基于最新代码构建镜像，可按以下步骤操作：

1. 克隆代码仓库：

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

2. 创建Dockerfile：

dockerfile
FROM node:18-alpine AS builder
WORKDIR /app
COPY . .
RUN npm install -g gulp-cli && npm install && gulp generic

FROM nginx:alpine
COPY --from=builder /app/build/generic /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

3. 构建镜像：

bash
docker build -t custom-pdfjs-viewer .

常见问题

Q: 查看器无法加载本地PDF文件？

A: 确保PDF文件已挂载到容器的/usr/share/nginx/html/pdfs目录，并通过正确URL访问：viewer.html?file=/pdfs/filename.pdf

Q: 旧版浏览器无法正常运行？

A: 使用legacy标签镜像，并访问/legacy/web/viewer.html

Q: 如何自定义查看器界面？

A: 挂载包含自定义viewer.html和相关资源的目录到/usr/share/nginx/html/web

学习资源

• 官方演示：
  • 现代浏览器：http://<容器IP>:<端口>/web/viewer.html
  • 旧版浏览器：http://<容器IP>:<端口>/legacy/web/viewer.html
• API文档：https://mozilla.github.io/pdf.js/api/
• 交互式示例：https://mozilla.github.io/pdf.js/examples/index.html#interactive-examples
• 社区支持：Matrix房间 [***]