PDF文件在线浏览【PDFjs】

今天在项目中遇到PDF文件内容不全，各种找原因，最后是字体不支持，因为是2021年左右完成的项目，PDFjs也一直没有更新，今天碰上了就去下载最新版本的，借此记录一下。

浏览器报错：Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

PDFjs官方地址

PDF.js简介

PDF.js 是一个使用 HTML5 构建的便携式文档格式查看器。 pdf.js 是社区驱动的，并由 Mozilla 支持。我们的目标是为解析和呈现 PDF 创建一个通用的、基于 Web 标准的平台。

贡献

pdf.js 是一个开源项目，并且一直在寻找更多的贡献者。要参与其中，请访问：

• 发行报告指南
• 代码贡献指南
• 常见问题
• 好的初学者错误
• Projects

开始

在线演示

请注意，“现代浏览器”版本假定原生支持诸如 async/“await”、ReadableStream、可选链接、空合并和私有 class 字段 / 方法等特性。

• 现代浏览器：https://mozilla.github.io/pdf.js/web/viewer.html

• 旧版浏览器：https://mozilla.github.io/pdf.js/legacy/web/viewer.html

 浏览器扩展

火狐

pdf.js 内置在 Firefox 的 19+ 版本中。

Chrome

• Chrome 的官方扩展可以从 Chrome Web Store 安装。此扩展由 @Rob--W 维护。
• 构建自己的代码-获取下面解释的代码，并发布 gulp chromium。然后打开 Chrome ，转到 Tools > Extension 并从目录 build/chromium 加载（未打包的）扩展。

获取代码 

要获得当前代码的本地副本，请使用 Git 复制它：

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

接下来，通过 官方套餐 或通过以下方式安装 node.js nvm。你需要安装 GUP 软件包。 在全球范围内（另见 gulp's getting started）：

$ npm install -g gulp-cli

如果一切顺利，请安装 pdf.js 的所有依赖项：

$ npm install

最后，你需要启动一个本地 Web 服务器，因为有些浏览器不允许使用 file://URL 打开 PDF 文件。运行：

$ gulp server

然后你可以打开:

• http://localhost:8888/web/viewer.html

请记住，这需要一个现代化和完全最新的浏览器；对于 pdf.js 库的非开发使用，请参考 编译 pdf.js 。

还可以通过打开以下内容查看右侧的所有测试 PDF 文件:

• http://localhost:8888/test/pdfs/?frame

pdf.js 托管在几个免费的 CDN 上:

• https://www.jsdelivr.com/package/npm/pdfjs-dist
• https://cdnjs.com/libraries/pdf.js
• https://unpkg.com/pdfjs-dist/

文件布局概述

请注意，我们只提到了最相关的文件和文件夹。

预建

├── build/
│   ├── pdf.js                             - display layer
│   ├── pdf.js.map                         - display layer's source map
│   ├── pdf.worker.js                      - core layer
│   └── pdf.worker.js.map                  - core layer's source map
├── web/
│   ├── cmaps/                             - character maps (required by core)
│   ├── compressed.tracemonkey-pldi-09.pdf - PDF file for testing purposes
│   ├── debugger.js                        - helpful debugging features
│   ├── images/                            - images for the viewer and annotation icons
│   ├── locale/                            - translation files
│   ├── viewer.css                         - viewer style sheet
│   ├── viewer.html                        - viewer layout
│   ├── viewer.js                          - viewer layer
│   └── viewer.js.map                      - viewer layer's source map
└── LICENSE
 

来源

├── docs/                                  - website source code
├── examples/                              - simple usage examples
├── extensions/                            - browser extension source code
├── external/                              - third party code
├── l10n/                                  - translation files
├── src/
│   ├── core/                              - core layer
│   ├── display/                           - display layer
│   ├── shared/                            - shared code between the core and display layers
│   ├── interfaces.js                      - interface definitions for the core/display layers
│   ├── pdf.*.js                           - wrapper files for bundling
│   └── worker_loader.js                   - used for developer builds to load worker files
├── test/                                  - unit, font and reference tests
├── web/                                   - viewer layer
├── LICENSE
├── README.md
├── gulpfile.js                            - build scripts/logic
├── package-lock.json                      - pinned dependency versions
└── package.json                           - package definition and dependencies
 

上述文章来源： GitHub - mozilla/pdf.js: PDF Reader in JavaScript以及开始 - PDF.js 中文文档。

遇到的问题

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

解决方案：

Apache环境

1. 编辑 Apache 配置文件:

   • 打开 Apache 配置文件，通常位于 /etc/apache2/apache2.conf 或 /etc/httpd/conf/httpd.conf。

   • 搜索 <IfModule mime_module> 区域。

   • 添加以下行：

   AddType application/javascript .mjs
   

   • 保存并关闭配置文件。

2. 重启 Apache 服务:

   • 使用以下命令之一重启 Apache 服务：

   sudo service apache2 restart
   

   • 或

   sudo systemctl restart apache2.service
   

3. 测试 .mjs 文件:

   • 访问您的 .mjs 文件，确保可以正常加载并执行。

其他注意事项:

• 确保您使用的是最新版本的 Apache 软件。

• 如果您使用的是虚拟主机，则需要在虚拟主机配置中添加上述配置。

• 某些情况下，可能需要设置 Content-Encoding 头部，例如：

  Header set Content-Encoding gzip
  

• 如果您仍然遇到问题，请查看 Apache 文档或相关社区寻求帮助。

参考资料：

• Apache 官方文档: Documentation: Apache HTTP Server - The Apache HTTP Server Project
• .mjs 文件 MIME 类型: actual MIME type and .mjs extension of JavaScript modules ? · Issue #7549 · google/WebFundamentals · GitHub

Nginx 环境

错误原因:

Nginx 默认将 .mjs 文件视为二进制流，而浏览器需要将其视为 JavaScript 模块才能正常加载。

解决方案:

修改 Nginx 配置文件，添加 .mjs 文件的 MIME 类型映射:

1. 打开 Nginx 配置文件，通常位于 /etc/nginx/conf.d/mime.types。
2. 添加以下行:

application/javascript;    *.mjs;

1. 保存并重启 Nginx:

sudo service nginx restart

其他注意事项:

• 确保您使用的是最新版本的 Nginx 软件。
• 如果您使用的是虚拟主机，则需要在虚拟主机配置中添加上述配置。
• 某些情况下，可能需要设置 Content-Encoding 头部，例如:

add_header Content-Encoding gzip;

• 如果您仍然遇到问题，请查看 Nginx 文档或相关社区寻求帮助。