前端 两个PDF预览API

• pdfobject
  • 简介
  • 如何使用
  • 示例
• pdf.js
  • 简介
  • 如何使用
  • 示例

收藏两款可用的在线PDF预览神器，pdfobject、pdf.js。

pdfobject

简介

• 使用条件：
  • 该插件需要浏览器支持内嵌的PDF
• 官方网站：
  • https://pdfobject.com/
  • GitHub
• 开源许可：
  • Copyright (c) 2008-2018 Philip Hutchison MIT-style license: http://pipwerks.mit-license.org/

如何使用

• HTML

<div id="example1"></div>

• Javascript

<script src="/js/pdfobject.js"></script>
<script>PDFObject.embed("/pdf/sample-3pp.pdf", "#example1");</script>

• Css(可选)

<style>
.pdfobject-container { height: 30rem; border: 1rem solid rgba(0,0,0,.1); }
</style>

示例

本站示例: 链接
截图如下：

pdf.js

简介

• 使用条件：
  • 支持html5 canvas
• 官方网站：
  • https://mozilla.github.io/pdf.js/
  • GitHub
• 开源许可：
  • PDF.js is licensed under Apache, documentation is licensed under CC BY-SA 2.5

如何使用

• 详见mozilla官网，JavaScript/HTML/Result 挺详细的

示例

官方示例： https://mozilla.github.io/pdf.js/web/viewer.html
本地示例： 链接