黛琳ghz
黛琳ghz

Vue 项目实战——如何在页面中展示 PDF 文件以及 PDFObject 插件实战

文章目录

  • 前言
  • 使用 HTML 标签
    • embed 标签
    • object标签
    • iframe标签
    • 完整代码
  • 使用 PDFObject 插件
    • 为什么使用 PDFObject 插件（AI翻译）
    • 浏览器支持
    • 在 Vue项目 使用 PDFObject 插件
      • 安装 PDFObject 插件
  • 最后

前言

在之前的两篇关于 Print.js 文章中，我们已经初步学习了打印插件 Print.js 的使用，既然涉及到 PDF 的打印，如果想要预览 PDF 后再进行打印应该怎么做呢，接下来通过这篇文章记录一下 Vue 项目实战中，在页面中展示 PDF 文件的一些例子。
Vue 项目实战——如何在页面中展示 PDF 文件以及 PDFObject 插件实战_第1张图片
其实把 PDF 展示到页面后，我们可以通过操作 PDF 展示窗口就行下载操作和分页预览操作等等。那么这样又会有出现一个问题，既然已经展示了 PDF，并且可以 PDF 预览窗口进行下载，那么还需要用到 Print.js 进行打印吗？其实可以分两种情况进行分析，第一种仅仅展示 PDF ，不使用其对应打印的功能（其实就是浏览器内置的调起打印窗口 Ctrl + p），我们也可以通过代码修改预览窗口的功能按钮；第二种则是反之，不使用 Print.js 进行打印，直接点击打印列表的对应打印项，然后预览 PDF，不再通过 Print.js 的打印功能按钮，通过预览窗口的下载按钮调起打印。
Vue 项目实战——如何在页面中展示 PDF 文件以及 PDFObject 插件实战_第2张图片

使用 HTML 标签

通过上面分析和应用场景介绍，我们一起来看看如何在网页中展示PDF文件这个需求。HTML 提供了一些原生标签，如 、 和