背景：本来只是淘宝上卖卖袜子，想着扩展一下业务，准备做同名“来家居”海外袜子馆外贸项目，碰到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>
标签：文件,插件,浏览器,预览,PDF,pdf From： https://www.cnblogs.com/futureba/p/18516058