浏览器中在线预览pdf文件，pdf.mjs插件实现web预览pdf

背景：本来只是淘宝上卖卖袜子，想着扩展一下业务，准备做同名“来家居”海外袜子馆外贸项目，碰到pdf在线预览的需求，就找了pdf.js插件进行实践后把此方法记录下来，可以通过多种方法来实现，每种方法都有其优缺点和适用场景。

简单一点的可以使用<iframe>或<embed>标签，这两种方法都是通过浏览器内置的PDF阅读器来预览PDF文件。使用<iframe>或<embed>标签可以很容易地嵌入PDF文件，不需要额外的插件或库，且具有较好的跨平台兼容性。然而，这种方法在定制性和用户体验上可能不如使用专门的PDF阅读器‌，特别是ie浏览器下会变为下载pdf。

现代浏览器如Chrome和Firefox内置了PDF查看器，可以直接在浏览器中打开和预览PDF文件。这种方法简单快捷，只需将PDF文件的URL设置为<a>标签的href属性，或者使用window.open方法在新标签页中打开PDF文件。然而，这种方法受限于浏览器内置的PDF阅读器，用户体验还是不如专门的PDF阅读器‌

本次着重介绍pdf.js插件，这是一个由Mozilla开发的开源库，使用HTML5 Canvas来渲染PDF文件。它支持丰富的API，可以实现PDF的加载、渲染、缩放、打印等功能。使用pdf.js需要在项目中引入库文件，并通过API加载和渲染PDF文件。这种方法提供了较高的自定义和交互功能，但需要一定的学习和配置成本‌。本文只涉及简单使用，如有流展示需求另行查找其它方案。

一、PDFjs版本下载

本文基于版本

https://github.com/mozilla/pdf.js/releases/tag/v4.7.76

下载后把文件夹pdfjs-4.7.76-dist拷贝到项目中

二、PDFjs使用

插件使用很简单，结合给的案例，直接viewer.html传路径参数即可。

1、下载 https://github.com/mozilla/pdf.js/releases

2、解压后得到 build 和 web 两个文件夹

3、将其放入网站目录下

4、使用 web 中的 viewer.html 即可在线预览 pdf 文件

方式：viewer.html?file=xxx.pdf

如：

<iframe src='/pdfjs-4.7.76-dist/web/viewer.html?file=pdf路径' width="1097" height="500"></iframe>

三、关于pdfjs工具栏汉化的问题，菜单栏如果显示中文

不同版本菜单栏调整可能略有不同。这里是4.7.76版本找到文件viewer.html，查找web/locale/locale.json这个文件，把里面不需要的语言删掉，调整排序即可，根据需要保留。en-US尽量保留，笔者只要中文保留如下。Locale文件夹中根据实际需要保留语言包。

{"zh-cn":"zh-CN/viewer.ftl","zh-tw":"zh-TW/viewer.ftl"}

四、踩坑记录

无法加载或未能加载中文语言请检查是否有相应的 mime 配置（mjs、ftl）

PDF.js更新设置MIME 类型:
　　.mjs application/javascript
　　.ftl application/x-freemarker

Asp.net iis web.config配置如下：

<system.webServer>
<staticContent>
  <remove fileExtension=".mjs"/>
  <remove fileExtension=".ftl"/>
  <mimeMap fileExtension=".mjs" mimeType="text/javascript"/>
  <mimeMap fileExtension=".ftl" mimeType="application/x-freemarker" />
 </staticContent>
</system.webServer>