PDF.js使用小结(js读取pdf文件内容)
前言
PDF（全称Portable Document Format）便携式文档格式，是一种独立于应用程序、硬件、操作系统的方式呈现文档的文件格式。
也就是，PDF 具有显示一致性。不像 Word ，在不同的操作系统和 Word 应用软件的展示都不同，且却经常遇到字体缺失的情况。每个PDF文件包含固定布局的平面文档的完整描述，包括文本、字形、图形及其他需要显示的信息，用以保证显示一致性。
因此 PDF 非常适合用来展示和打印，而 Word 则时编写和修改文档的首选。如果需要修改 PDF ，可以先转为 Word，再转回PDF。
在网页中浏览器PDF是非常常见的需求，主要分为两种：
在网页中直接打开 PDF 文件进行浏览
在网页中嵌入 PDF 文件作为页面的一部分
在网页中直接打开 PDF 文件进行浏览：现在主流现代浏览器如 Chrome、Sarafi 基本都内置了支持 PDF 浏览的插件，可以直接打开 PDF 文件，而IE等可能还需要安装插件才能打开 PDF 文件。
在网页中嵌入 PDF 文件作为页面的一部分：可以通过嵌入 iframe 的方式实现，但由于浏览器的同源策略限制，想自定义 PDF 的显示样式让其和页面更和谐，如背景色、默认文字大小，或者禁止打印下载等几乎是不可能的任务。
而PDF.js 的出现，就是为了统一浏览器中 PDF 的显示（免插件），以及提供更多自定义的功能给web开发者。
什么是 PDF.js ？
PDF.js 由 Mozilla 官方出品，是基于 HTML5 技术构建的用于展示 PDF 的 js 库 ，它可以在现代浏览器中使用且无需安装任何第三方插件。
PDF.js官网地址
PDF.js 主要分为三层：
core层：主要负责解析二进制 pdf，也是所有层的基础。开发者一般不会直接使用这一层的 API，因为它们可能会变化；
display层：主要是在core层的基础上，暴露给开发者一些 API 接口来渲染 PDF 以及获取一些文件信息。PDF.js 的版本号也是基于这一层的 API 进行迭代的；
viewer层：主要是在display层的基础上，提供了UI界面的展示。如果你想建一个自己的viewer，这会是一个很好的起点，你可以基于它来做一些修改，然后引入到项目中。
如何引入 PDF.js ？
PDF.js 的官网写的很精简，主要提供了两种方式：
通过cdn引入
通过下载dist文件引入
其实还可以通过 npm 引入：
npm install pdfjs-dist
这里我们只使用到 viewer 层，因此使用下载dist文件的方式引入：
下载稳定版dist：
复制到项目中：
在页面中引用：
<iframe class="iframe1" :src="'../../../static/pdfjs-2.10.377-dist/web/viewer.html?file=xxxxxxx'" frameborder="0" width="100%" height="100%"></iframe> 复制代码
通过以上三步，就可以在页面中展示 PDF 了。
效果可以参考官网提供的 demo ：
如何自定义PDF展示样式
由于我们拥有dist中的文件权限，因此理论上，我们拥有100%的自主能力。
比如我们想要去掉 PDF页中的边框特效
可以修改 view.css 文件：
.pdfViewer .page { direction: ltr; width: 816px; height: 1056px; margin: var(--page-margin); position: relative; overflow: visible; border: var(--page-border); background-clip: content-box; /* -o-border-image: url(images/shadow.png) 9 9 repeat; border-image: url(images/shadow.png) 9 9 repeat; */ /* background-color: rgba(255, 255, 255, 1); */ } 复制代码修改后的效果：
或者我们想隐藏工具栏：
则可以修改 view.css ：
.toolbar { position: relative; left: 0; right: 0; z-index: 9999; cursor: default; /*隐藏工具栏*/ display: none; } 复制代码以上只是通过两个简单的举例，来说明如何自定义PDF样式，还有更多可能性等待开发者持续探索。
总结
本文主要介绍了：
PDF 格式是具有显示一致性的文件格式，适合用做展示，而Word则是编辑文件的首选；
PDF 文件的展示问题：部分浏览器中展示PDF文件需要安装插件；不能自定义PDF展示样式；
PDF.js 是由Mozilla出品的基于HTML标准的库，主要用来提供了免插件、自定义等功能，解决了上面的问题；
PDF.js 的引入有 cdn、npm、dist包三种方案，主要介绍如何在项目中引入dist包的方式，以及如何自定义样式。
谢谢您的阅读，希望文本的介绍能对你有所帮助，欢迎点赞、评论交流~
作者：前端AK君
链接：https://juejin.cn/post/7034038838998204429