PDF.js Viewer Rails 引擎使用教程

PDF.js Viewer Rails 引擎使用教程

1. 项目介绍

pdfjs_viewer-rails 是一个将 PDF.js 查看器打包为 Rails 引擎的开源项目。PDF.js 是一个由 Mozilla 开发的用于在网页上显示 PDF 文件的 JavaScript 库。pdfjs_viewer-rails 项目使得在 Rails 应用中集成 PDF.js 查看器变得非常简单。

该项目提供了三种查看器样式：

• Full: 完整样式，包含所有功能。
• Reduced: 简化样式，去除了一些功能。
• Minimal: 最小化样式，仅保留基本功能。

2. 项目快速启动

2.1 安装

首先，在你的 Rails 应用的 Gemfile 中添加以下行：

gem 'pdfjs_viewer-rails'

然后运行 bundle install 来安装 gem。

2.2 配置路由

在你的 config/routes.rb 文件中添加以下代码来挂载 PDF.js 查看器引擎：

mount PdfjsViewer::Rails::Engine => "/pdfjs", as: 'pdfjs'

2.3 使用查看器

在你的视图模板中，可以使用以下代码来显示 PDF 文件：

<%= link_to "显示完整查看器", pdfjs_full_path(file: "/sample.pdf") %>
<%= link_to "显示最小化查看器", pdfjs_minimal_path(file: "/sample.pdf") %>

或者使用 pdfjs_viewer 助手来嵌入查看器：

<%= pdfjs_viewer pdf_url: "/sample.pdf", style: :full %>
<%= pdfjs_viewer pdf_url: "/sample.pdf", style: :minimal %>

3. 应用案例和最佳实践

3.1 应用案例

• 文档管理系统: 在文档管理系统中，用户可以在线查看 PDF 文件，无需下载。
• 在线教育平台: 教师可以上传课件 PDF，学生可以直接在网页上查看。
• 电子书阅读器: 用户可以在线阅读电子书，支持翻页、缩放等功能。

3.2 最佳实践

• 自定义样式: 如果默认的三种样式不能满足需求，可以通过创建 app/views/pdfjs_viewer/viewer/_extra_head.html.erb 文件来自定义查看器的样式。
• 设置 CORS: 如果 PDF 文件存储在其他域名下（如 Amazon S3），需要设置 CORS 策略以允许 PDF.js 查看器读取文件。

4. 典型生态项目

• PDF.js: 这是 pdfjs_viewer-rails 的基础项目，提供了 PDF 渲染的核心功能。
• CarrierWave: 用于文件上传和存储，常与 pdfjs_viewer-rails 结合使用，将 PDF 文件存储在云端（如 Amazon S3）。
• Rails: 作为 pdfjs_viewer-rails 的宿主框架，提供了强大的 Web 应用开发能力。

通过以上步骤，你可以快速在 Rails 应用中集成 PDF.js 查看器，并根据实际需求进行定制和扩展。