PDF.js使用小结

·  阅读 3571

前言

PDF(全称Portable Document Format)便携式文档格式,是一种独立于应用程序、硬件、操作系统的方式呈现文档的文件格式。

也就是,PDF 具有显示一致性。不像 Word ,在不同的操作系统和 Word 应用软件的展示都不同,且却经常遇到字体缺失的情况。每个PDF文件包含固定布局的平面文档的完整描述,包括文本、字形、图形及其他需要显示的信息,用以保证显示一致性。

因此 PDF 非常适合用来展示和打印,而 Word 则时编写和修改文档的首选。如果需要修改 PDF ,可以先转为 Word,再转回PDF。

在网页中浏览器PDF是非常常见的需求,主要分为两种:

  1. 在网页中直接打开 PDF 文件进行浏览
  2. 在网页中嵌入 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文件的方式引入:

  1. 下载稳定版dist:

image.png

PS:如果遇到 Android 手机无法显示 PDF,可以尝试下载中间的这个(for older browsers) 解决。

  1. 复制到项目中:

image.png

  1. 在页面中引用:
<iframe class="iframe1" :src="'../../../static/pdfjs-2.10.377-dist/web/viewer.html?file=xxxxxxx'" frameborder="0" width="100%" height="100%"></iframe>
复制代码

通过以上三步,就可以在页面中展示 PDF 了。

效果可以参考官网提供的 demo

image.png

如何自定义PDF展示样式

由于我们拥有dist中的文件权限,因此理论上,我们拥有100%的自主能力。

  1. 比如我们想要去掉 PDF页中的边框特效

image.png

可以修改 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); */
}

复制代码

修改后的效果:

image.png

  1. 或者我们想隐藏工具栏:

image.png

则可以修改 view.css

.toolbar {
  position: relative;
  left: 0;
  right: 0;
  z-index: 9999;
  cursor: default;
  /*隐藏工具栏*/
  display: none;
}
复制代码

image.png

以上只是通过两个简单的举例,来说明如何自定义PDF样式,还有更多可能性等待开发者持续探索。

总结

本文主要介绍了:

  • PDF 格式是具有显示一致性的文件格式,适合用做展示,而Word则是编辑文件的首选;
  • PDF 文件的展示问题:部分浏览器中展示PDF文件需要安装插件;不能自定义PDF展示样式;
  • PDF.js 是由Mozilla出品的基于HTML标准的库,主要用来提供了免插件、自定义等功能,解决了上面的问题;
  • PDF.js 的引入有 cdn、npm、dist包三种方案,主要介绍如何在项目中引入dist包的方式,以及如何自定义样式。

谢谢您的阅读,希望文本的介绍能对你有所帮助,欢迎点赞、评论交流~

参考资料

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改