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

文章目录

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

在这里插入图片描述

📋前言

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

🎯使用 HTML 标签

通过上面分析和应用场景介绍，我们一起来看看如何在网页中展示PDF文件这个需求。HTML 提供了一些原生标签，如 <embed>、<object> 和 <iframe>，可以直接嵌入PDF文件，并在网页中展示。接下来先介绍一下这些原生的 HTML 标签，以及它们的使用方法和属性设置，来实现在网页中展示 PDF 文件。

🧩 embed 标签

embed 标签可以用于嵌入各种类型的媒体文件，包括 PDF。使用 embed 标签展示PDF文件时，可以将 PDF 文件的 URL 作为 src 属性的值，如下所示。

<embed src="path/to/your/pdf.pdf" type="application/pdf" width="100%" height="600px" />

src 属性指定了 PDF 文件的 URL，type 属性指定了媒体类型为 PDF，width 和 height 属性可以设置展示的宽度和高度。

🧩 object标签

object 标签也可用于嵌入 PDF 文件，它提供了更多的灵活性和功能。使用 object 标签展示 PDF 文件的示例如下。

<object data="path/to/your/pdf.pdf" type="application/pdf" width="100%" height="600px">
  <p>此浏览器不支持 PDF 预览，请点击<a href="path/to/your/pdf.pdf">这里</a>下载 PDF。</p>
</object>

在 object 标签内部，可以添加一段备用内容，用于在不支持PDF预览的浏览器上显示。用户可以通过备用内容中的链接下载PDF文件。

🧩 iframe标签

iframe 标签可以用于在网页中嵌入其他网页或文档，包括PDF文件。使用 iframe 标签展示PDF文件的示例如下。

<iframe src="path/to/your/pdf.pdf" width="100%" height="600px"></iframe>

src 属性指定了 PDF 文件的 URL，width 和 height 属性可以设置展示的宽度和高度。

🧩完整代码

<template>
  <h1>PDFObject Test</h1>
  <div class="pdf-box">
    <h2>embed 标签</h2>
    <embed :src="pdflink" type="application/pdf" width="600px" height="600px" />
  </div>
  <div class="pdf-box">
    <h2>object 标签</h2>
    <object :data="pdflink" type="application/pdf" width="600px" height="600px">
      <p>
        此浏览器不支持 PDF 预览，请点击<a :href="pdflink">这里</a>下载 PDF。
      </p>
    </object>
  </div>
  <div class="pdf-box">
    <h2>iframe 标签</h2>
    <iframe :src="pdflink" width="600px" height="600px"></iframe>
  </div>
</template>

<script setup>
import { ref } from "vue";
// 不使用 setup 语法糖
// export default {
//   setup() {
//     // 在setup函数中编写逻辑
//     const pdflink = ref("https://pdfobject.com/pdf/sample-3pp.pdf");
//     return {
//       pdflink,
//     };
//   },
// };
const pdflink = ref("https://pdfobject.com/pdf/sample-3pp.pdf");
</script>

<style lang="scss">
h1,
h2 {
  text-align: center;
}

.pdf-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>

效果图（局部）
在这里插入图片描述
这三个标签都可以用来展示PDF文件，具体选择哪个标签取决于具体的需求和兼容性要求。建议在使用时测试不同的标签，并根据实际情况进行选择。

🎯使用 PDFObject 插件

官方文档地址：https://pdfobject.com/#the-why

🧩为什么使用 PDFObject 插件（AI翻译）

官方是这样解释道的，PDFObject 是一个实用工具，可以检测浏览器是否支持内嵌式/嵌入式 PDF 文档。如果您正在处理动态 HTML，比如单页 Web 应用程序，可能需要动态插入 PDF 文档。然而，某些浏览器不支持 PDF 内嵌，如果您没有先检查 PDF 支持情况就插入标记，则可能会导致缺少内容或破碎的用户界面。

PDFObject 通过检测浏览器对 PDF 内嵌的支持来帮助您避免这些情况。如果浏览器支持内嵌，则 PDF 将被内嵌。如果浏览器不支持内嵌，则 PDF 不会被内嵌。

默认情况下，当浏览器不支持内嵌 PDF 文档时，PDFObject 会插入一个备用链接到PDF文档。这确保您的用户始终可以访问您的 PDF 文档，并旨在帮助您编写更少的代码。备用链接可以自定义，或者如果您喜欢，也可以禁用该选项。

PDFObject 已经准备好使用 npm。现代 Web 应用程序使用 npm 来管理包和依赖项。PDFObject 2.x 已在 Node Package Manager (npm) 中注册，并可以动态加载。

PDFObject 还使得方便指定 Adobe 专有的“ PDF 打开参数”。请注意，这些参数仅受 Adobe Reader 支持，大多数 PDF 阅读器将忽略这些参数，包括 Chrome、Edge、Internet Explorer 和 Safari 内置的 PDF 阅读器。

🧩浏览器支持

PDFObject 2.x 是为现代浏览器设计的，并在 Chrome、Firefox、Safari、IE 11 和 MS Edge 中进行了成功测试。移动浏览器不支持 PDF 内嵌！对于移动浏览器（Android、iOS、iPadOS），PDFObject 将加载您指定的备用内容。

重要提示：浏览器对 PDFObject 的支持并不意味着浏览器支持 PDF 内嵌！PDFObject 存在的原因是在浏览器支持 PDF 时帮助您嵌入 PDF 文档，并在浏览器不支持 PDF 时显示替代的非 PDF 内容。虽然大多数现代桌面浏览器都支持 PDF 内嵌，但有些浏览器不支持。尤其需要注意的是，Internet Explorer 11 需要像 Adobe Acrobat 这样的第三方工具来显示 PDF 文档。

因此我们在选择使用 PDFObject 插件的时候要注意兼容性和浏览器支持，划重点！浏览器对 PDFObject 的支持并不意味着浏览器支持 PDF 内嵌！如果是要在移动端展示为主的需求，不建议使用 PDFObject 插件，因为 PDFObject 在手机 webview 使用兼容性不太好。

🧩在 Vue项目 使用 PDFObject 插件

🔗安装 PDFObject 插件

在 Vue 项目中使用 PDFObject 插件，需要在 Vue 组件中引入 PDFObject 并在适当的生命周期钩子中调用它来嵌入 PDF 文件。首先通过 npm 安装 PDFObject 插件。

npm install pdfobject

在这里插入图片描述
然后通过 import PDFObject from 'pdfobject'; 将 PDFObject 导入到页面。下面是一个使用例子。

<template>
  <div>
    <div ref="pdfContainer"></div>
  </div>
</template>

<script>
import PDFObject from 'pdfobject';

export default {
  mounted() {
    this.embedPDF();
  },
  methods: {
    embedPDF() {
      const options = {
        width: "100%",
        height: "500px"
      };
      // replace 'example.pdf' with your actual PDF file path
      PDFObject.embed("example.pdf", this.$refs.pdfContainer, options);
    }
  }
}
</script>

在上面的例子中，我们先在 mounted 生命周期钩子中调用了 embedPDF 方法，该方法使用 PDFObject 将 PDF 文件嵌入到组件的 pdfContainer 中。其中 example.pdf 替换实际的 PDF 文件路径即可（这里可以用到文章前面用到的 https://pdfobject.com/pdf/sample-3pp.pdf 这个文件路径）。注意这里的案例使用的是组件作为 target参数，除此之外这个参数可以是一个 DOM 元素、DOM 元素的 ID 字符串，或者一个 jQuery 对象。

关于 PDFObject.embed(url [string], target [mixed], options [object]) 我们做一个简单的解析，该方法是 PDFObject 插件提供的一个方法，用于将 PDF 文件嵌入到网页中。这个方法接受三个参数如下。

  • url （字符串）：表示要嵌入的 PDF 文件的 URL 或文件路径。
  • target （混合类型）：表示要将 PDF 文件嵌入到的目标元素。这个参数可以是一个 DOM 元素、DOM 元素的 ID 字符串，或者一个 jQuery 对象。
  • options （对象）： 一个包含定制化选项的对象，用于设置嵌入的 PDF 的行为和外观。

通过调用这个方法，你可以在网页中动态地将 PDF 文件嵌入到指定的位置，并且可以通过传入不同的选项来控制嵌入的方式，比如设置 PDF 的宽度、高度等参数。

例如，你可以这样调用这个方法来将一个名为 “example.pdf” 的 PDF 文件嵌入到 ID 为 “pdf-container” 的 div 元素中，并设置嵌入的宽度为 “100%”，高度为 “500px”。

PDFObject.embed("example.pdf", "#pdf-container", { width: "100%", height: "500px" });

在 Vue3 中实际写法如下。

<template>
  <h1>PDFObject Test</h1>
  <div class="pdf-box">
    <h2>PDFObject 插件</h2>
    <div ref="pdfContainer"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import PDFObject from "pdfobject";
// 不使用 setup 语法糖
// export default {
//   setup() {
//     // 在setup函数中编写逻辑
//     const pdflink = ref("https://pdfobject.com/pdf/sample-3pp.pdf");
//     return {
//       pdflink,
//     };
//   },
// };
const pdfContainer = ref(null);
onMounted(() => {
  embedPDF();
});
const embedPDF = () => {
  const options = {
    width: "600px",
    height: "500px",
  };
  PDFObject.embed(
    "https://pdfobject.com/pdf/sample-3pp.pdf",
    pdfContainer.value,
    options
  );
};
</script>

<style lang="scss">
h1,
h2 {
  text-align: center;
}

.pdf-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>

在这里插入图片描述

📝最后

通过本文的介绍，我们了解到使用原生的HTML标签 embed、object 和 iframe 来展示PDF文件是一种简单而有效的方式。根据具体的需求，可以选择适合的标签和属性来实现定制化的展示效果。同时，还有一些 JavaScript 插件和库，如 PDFObject 插件，可以进一步实现 PDF 文件的展示和操作。无论是使用原生标签还是插件和库，展示 PDF 文件在网页中为用户提供了更好的阅读体验，同时也可以丰富网页的内容和交互性。

到此就是在页面中展示 PDF 文件以及 PDFObject 插件实战的全部内容了，我们通过分析不同情况使用不同的展示方法吗，以及展示的需求，结合文章的案例和实战内容，进一步了解和学习了在页面中展示 PDF 文件的技术。
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/174526.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

cc linux用root用户执行chmod 777 -R ./提示 Operation not permitted怎么办？

cc linux用root用户执行chmod 777 -R ./提示 Operation not permitted怎么办？

如果你作为 root 用户执行 chmod 777 -R ./ 命令时收到 “Operation not permitted” 错误&#xff0c;可能有几个原因&#xff1a; 不可更改 (Immutable) 文件属性&#xff1a; 文件可能被设置为不可更改。即使是 root 用户也不能修改这些文件的权限。使用 lsattr 命令查看文件…
阅读更多...
shell条件语句

shell条件语句

一.条件测试 1.三种测试方法 ①test命令测试 ②[ ]测试&#xff08;注意前后需要有空格&#xff09; ③[[ ]]&#xff1a;加强版[ ]&#xff0c;测试支持通配符&#xff08;匹配字符串&#xff09;和正则表达式 二.条件语句 2.1 test命令 测试特定的表达式是否成立…
阅读更多...
vue2使用el-tag自定义菜单导航标签

vue2使用el-tag自定义菜单导航标签

需求&#xff1a;使用el-tag写个菜单导航栏&#xff0c;点击路由的时候就添加 功能&#xff1a; 设置鼠标横向滚动并且不展示滚动条添加关闭其他、关闭左侧、关闭右侧、全部关闭标签功能单个标签删除功能添加&#xff0c;固定标签不可删除右键点击展开操作菜单栏设置个默认固定…
阅读更多...
【Django使用】4大模块50页md文档,第4篇：Django请求与响应和cookie与session

【Django使用】4大模块50页md文档,第4篇：Django请求与响应和cookie与session

当你考虑开发现代化、高效且可扩展的网站和Web应用时&#xff0c;Django是一个强大的选择。Django是一个流行的开源Python Web框架&#xff0c;它提供了一个坚实的基础&#xff0c;帮助开发者快速构建功能丰富且高度定制的Web应用 Django全套笔记地址&#xff1a; 请移步这里 …
阅读更多...
【性能测试】稳定性/并发压力测试的TPS计算+5W并发场景设计...

【性能测试】稳定性/并发压力测试的TPS计算+5W并发场景设计...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、稳定性测试TPS…
阅读更多...
Spring实例化对象

Spring实例化对象

默认proxyBeanMethods true&#xff0c;这种方法是用的代理模式创建对象&#xff0c;每次创建都是同一个对象&#xff0c;如果改为false每次都是不同的对象 FactoryBean的使用 定义的类A&#xff0c;造出来一个类B&#xff0c;可以在创造bean之前做一些自己的个性化操作
阅读更多...
时序预测 | Matlab实现HPO-ELM猎食者算法优化极限学习机的时间序列预测

时序预测 | Matlab实现HPO-ELM猎食者算法优化极限学习机的时间序列预测

时序预测 | Matlab实现HPO-ELM猎食者算法优化极限学习机的时间序列预测 目录 时序预测 | Matlab实现HPO-ELM猎食者算法优化极限学习机的时间序列预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 Matlab实现HPO-ELM猎食者算法优化极限学习机时间序列预测 1.data为数据集…
阅读更多...
MySQL 日志管理、备份与恢复

MySQL 日志管理、备份与恢复

一、MySQL 日志管理 MySQL 的日志默认保存位置为 /usr/local/mysql/data vim /etc/my.cnf [mysqld] ##错误日志&#xff0c;用来记录当MySQL启动、停止或运行时发生的错误信息&#xff0c;默认已开启 log-error/usr/local/mysql/data/mysql_error.log #指定日志的保存位置…
阅读更多...
交替最小二乘法

交替最小二乘法

前置概念导入 协同过滤&#xff08;Collaborative Filtering&#xff09;&#xff1a;这是一种推荐系统的方法&#xff0c;依据用户之间或物品之间的相似性来进行推荐。协同过滤通常分为两种主要类型&#xff1a;用户基于&#xff08;user-based&#xff09;和物品基于&#xf…
阅读更多...
大数据Doris（二十七）：Routine Load数据导入演示

大数据Doris（二十七）：Routine Load数据导入演示

文章目录 Routine Load数据导入演示 一、启动kafka集群（三台节点都启动） 二、创建topic
阅读更多...
x shell 用作串口调试助手

x shell 用作串口调试助手

x shell 用作串口调试助手 Xshell 介绍 是一个强大的安全终端模拟软件&#xff0c;它支持SSH1, SSH2, 以及Microsoft Windows 平台的TELNET 协议。Xshell 通过互联网到远程主机的安全连接以及它创新性的设计和特色帮助用户在复杂的网络环境中享受他们的工作。 Xshell可以在Wi…
阅读更多...
【云原生】Spring Cloud Alibaba 之 Gateway 服务网关实战开发

【云原生】Spring Cloud Alibaba 之 Gateway 服务网关实战开发

目录 一、什么是网关 ⛅网关的实现原理 二、Gateway 与 Zuul 的区别&#xff1f; 三、Gateway 服务网关 快速入门 ⛄需求 ⏳项目搭建 ✅启动测试 四、Gateway 断言工厂 五、Gateway 过滤器 ⛽过滤器工厂 ♨️全局过滤器 六、源码地址 ⛵小结 一、什么是网关 Spri…
阅读更多...
vue3组件外使用route

vue3组件外使用route

1.vue3组件外使用route 在写vue3项目时&#xff0c;有时候我们会把组件内部分逻辑代码分离到外部js中&#xff0c;然后在组件里通过import导入。此时如果我们要在组件外使用route对象&#xff0c;方式与组件内不同&#xff1a; 组件内&#xff1a; import { useRoute } from…
阅读更多...
Pytorch从零开始实战10

Pytorch从零开始实战10

Pytorch从零开始实战——ResNet-50算法实战 本系列来源于365天深度学习训练营 原作者K同学 文章目录 Pytorch从零开始实战——ResNet-50算法实战环境准备数据集模型选择开始训练可视化模型预测总结 环境准备 本文基于Jupyter notebook&#xff0c;使用Python3.8&#xff0c…
阅读更多...
可视化大屏时代的到来：智慧城市管理的新思路

可视化大屏时代的到来：智慧城市管理的新思路

随着科技的不断发展&#xff0c;智能芯片作为一种新型的电子元件&#xff0c;被广泛应用于各个领域&#xff0c;其中智慧芯片可视化大屏是一种重要的应用形式。 一、智慧芯片可视化大屏的优势 智慧芯片可视化大屏是一种将智能芯片与大屏幕显示技术相结合的产品&#xff0c;山海…
阅读更多...
Cannot read properties of undefined (reading ‘resetFields‘)“ 报错解决

Cannot read properties of undefined (reading ‘resetFields‘)“ 报错解决

遇到这种报错 先去相关页面搜索关键字 定位到具体的报错代码 Cannot read properties of undefined (reading ‘resetFields’)" 关键字&#xff1a;resetFields 此方法作用&#xff1a;对整个表单进行重置 将所有字段值重置为初始值并移除校验结果 报错场景&#xff1a;…
阅读更多...
森林之子/Sons Of The Forest V42457 资源分享

森林之子/Sons Of The Forest V42457 资源分享

游戏介绍&#xff1a; 视频介绍&#xff1a; 森林之子 资源分享 这里是引用 你被派到了一座孤岛上&#xff0c;寻找一位失踪的亿万富翁&#xff0c;结果却发现自己深陷被食人生物占领的炼狱之地。你需要制作工具和武器、建造房屋&#xff0c;倾尽全力生存下去&#xff0c;无论…
阅读更多...
idea开发jface、swt环境搭建

idea开发jface、swt环境搭建

背景 jface、swt很难找到合适的maven仓库来下载配套的版本idea对eclipse套件不友好eclipse的windowbuilder固然很好&#xff0c; 但本人更喜欢idea编程&#xff0c; 互相取长补短 下载套件 进入swt下载界面 以当前最新的4.29为例&#xff0c; 点击&#xff1a; 找到全部并…
阅读更多...
spring boot零配置

spring boot零配置

spring boot是如何选择tomcat还是Jett作为底层服务器的呢&#xff1f; springboot通过ServletWebServerApplicationContext的onRefresh()方法&#xff0c;会创建web服务 protected void onRefresh() {super.onRefresh();try {// 创建web服务createWebServer();}catch (Throwab…
阅读更多...
【Spring Boot】如何在Linux系统中快速启动Spring Boot的jar包

【Spring Boot】如何在Linux系统中快速启动Spring Boot的jar包

在Linux系统中先安装java的JDK 然后编写下列service.sh脚本&#xff0c;并根据自己的需求只需要修改export的log_path、exec_cmd参数即可 # 配置运行日志输出的路径 export log_path/usr/local/project/study-pro/logs # 当前服务运行的脚本命令 export exec_cmd"nohup /u…
阅读更多...
最新文章

Copyright @ 2022~2023