前端 PDF 预览技巧：标签 vs 插件，如何优雅地展示 PDF 文件

news2024/11/14 18:39:56

前言

pdf 作为一种常用的文档格式，相信很多同学都在项目中遇到过需要预览 pdf 文件的情况。其实实现的方式有很多，包括传统的标签 iframe 或 embed 方式，也可以运用一些插件，例如 pdf.js、vue-pdf 等等，本文将带大家一起探索不同方式的优劣势以及实现方式和应用场景，帮助你更好地选择适合自己项目的方案，让你在项目中轻松展示 pdf 文件。

一、iframe 标签

<iframe> 标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

1.1 属性

属性描述
src在 iframe 中显示的文档的 URL。
heightiframe 的高度。
widthiframe 的宽度。
nameiframe 的名称。
seamlessiframe 看起来像是父文档中的一部分。
srcdoc规定页面中的 HTML 内容显示在 iframe 中。
sandbox对 iframe 的内容定义一系列额外的限制。allow-forms（允许在iframe中提交表单）、allow-same-origin（允许iframe与包含它的页面具有相同的源，这意味着它可以访问与包含页面相同的资源）、allow-scripts（允许在iframe中执行脚本）、allow-top-navigation（允许iframe导航到顶级浏览上下文，即顶级窗口）
scrollingHTML5 不支持。规定是否在 iframe 中显示滚动条。yes、no、auto
alignHTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的元素来对齐iframe。left、right、top、middle、bottom
frameborder-HTML5 不支持。规定是否显示 iframe 周围的边框。
longdescHTML5 不支持。规定一个页面，该页面包含了有关 iframe 的较长描述。
marginheightHTML5 不支持。规定 iframe 的顶部和底部的边距
marginwidthHTML5 不支持。规定 iframe 的左侧和右侧的边距。

1.2 代码实现

<template>
  <div>
    <iframe
      src="https://s4.aconvert.com/convert/p3r68-cdx67/agb6w-9i4xt.pdf"
      width="100%"
      height="700"
    />
  </div>
</template>

实现效果

在这里插入图片描述

二、embed 标签

<embed> 标签定义了一个容器，用来嵌入外部应用或者互动程序（插件）。

2.1 属性

属性描述
height规定嵌入内容的高度。
src规定被嵌入内容的 URL。
type规定嵌入内容的 MIME 类型。注：MIME = Multipurpose Internet Mail Extensions。
width规定嵌入内容的宽度。

2.2 代码实现

<template>
  <div>
    <embed
      src="https://s4.aconvert.com/convert/p3r68-cdx67/abeub-nb503.pdf"
      type="application/pdf"
      width="100%"
      height="700"
    />
  </div>
</template>

实现效果

在这里插入图片描述

小结

使用 <embed> 或 <iframe> 标签浏览器会自动调用内置的PDF阅读器插件来显示 pdf 内容。相对于使用插件来显示 pdf 文件有各自的优劣势。

优势：

  • 简单易用： 使用 <embed> 或 <iframe> 标签可以很容易地嵌入 pdf 文件，而且不需要额外的插件或库；
  • 跨平台兼容性： <embed> 或 <iframe> 标签通常具有很好的跨平台兼容性，可以在各种浏览器和设备上正常显示 pdf 文件；
  • 快速集成： 直接使用标签嵌入 pdf 文件可以快速集成到现有的网页中，不需要额外的学习成本。

劣势：

  • 定制性差： 使用 <embed> 或 <iframe> 标签显示 pdf文件的定制性相对较差，无法轻松实现一些高级功能，如自定义样式、交互等；
  • 功能受限： <embed> 或 <iframe> 标签提供的功能有限，无法实现一些复杂的 pdf 显示需求，如搜索、缩略图预览、无法禁止打印等；
  • 样式控制困难： 使用 <embed> 或 <iframe> 标签嵌入的 pdf文件样式控制相对困难，难以实现与网页样式的统一。

三、vue-pdf 插件

vue-pdf 是一个基于 pdf.js 实现用于在 vue 应用程序中显示 pdf 文件的库。它提供了一个 vue 组件，可以轻松地将 pdf 文件嵌入到你的应用程序中，以便用户可以查看和与 pdf 文件交互。

3.1 安装

npm install --save vue-pdf

如果有版本问题可以降低版本，推荐安装以下版本：

npm install --save vue-pdf@4.2.0

3.2 引入注册

  • 局部

    import pdf from "vue-pdf";
export default {
  components: {
    pdf,
  },
};

  • 全局

    import pdf from 'vue-pdf';
Vue.component('pdf', pdf);

3.3 常用的属性及事件

  • Props 属性

    属性描述
    :srcPDF 文件的 URL。
    :page要显示的页码。
    :rotate页面旋转的角度，仅限90度的倍数。 例如：90, 180, 270, 360, …

  • Events 事件

    事件描述
    @password (updatePassword, reason)updatePassword: 调用以输入 PDF 密码的函数。reason: 函数调用的原因，可能是 ‘NEED_PASSWORD’ 或 ‘INCORRECT_PASSWORD’
    @progress Number文档加载进度，范围从 0 到 1。
    @loaded文档加载完成时触发。
    @page-loaded Number页面加载完成后触发。
    @num-pages NumberPDF 的总页数。
    @error Object发生错误时触发。
    @link-clicked Number点击内部链接时触发。

3.4 基础使用（单页）

<template>
  <pdf src="https://s4.aconvert.com/convert/p3r68-cdx67/a0jo0-a0e3v.pdf"></pdf>
</template>
<script>
import pdf from "vue-pdf";
export default {
  components: {
    pdf,
  },
};
</script>

实现效果

在这里插入图片描述

3.5 加载本地pdf文件

如果直接将 pdf 文件放在任意一个文件夹中因为路径问题会加载不出来。所以需要将 pdf 放在 public > static 下（如下图），并用 /static/xxx.pdf 的路径方式进行引用（ / 即已经代表 public）。

在这里插入图片描述

代码示例

<template>
  <pdf src="../../../static/ceshi.pdf"></pdf>
</template>
<script>
import pdf from "vue-pdf";
export default {
  components: {
    pdf,
  },
};
</script>

实现效果

在这里插入图片描述

3.6 分页预览（多页）

<template>
  <div id="document">
    <!-- 分页组件 -->
    <div class="component" v-show="schedule === 1">
      <div @click="pageWay('first')" class="headTail">首页</div>
      <div @click="rotateWay('obey')" class="headTail">
        <el-tooltip
          class="item"
          effect="dark"
          content="顺时针旋转"
          placement="top"
        >
          <i style="font-size: 18px" class="el-icon-refresh-right"></i>
        </el-tooltip>
      </div>
      <div
        @click="pageWay('pre')"
        class="fluctuatePage"
        :style="pageNumber === 1 ? 'cursor: not-allowed;' : ''"
      >
        上一页
      </div>
      <div class="pagination">
        <input
          v-model.number="pageNumber"
          type="number"
          class="inputNumber"
          @input="inputEvent()"
        />
        <span> / {{ pageValue }}</span>
      </div>
      <div
        @click="pageWay('next')"
        class="fluctuatePage"
        :style="pageNumber === pageValue ? 'cursor: not-allowed;' : ''"
      >
        下一页
      </div>
      <div @click="rotateWay('contrary')" class="headTail">
        <el-tooltip
          class="item"
          effect="dark"
          content="顺时针旋转"
          placement="top"
        >
          <i style="font-size: 18px" class="el-icon-refresh-left"></i>
        </el-tooltip>
      </div>
      <div @click="pageWay('last')" class="headTail">尾页</div>
    </div>
    <!-- pdf 组件 -->
    <div class="pdfContent">
      <pdf
        :src="pdfUrl"
        ref="pdf"
        v-show="schedule === 1"
        :rotate="pageRotate"
        :page="pageNumber"
        @num-pages="pageValue = $event"
        @progress="schedule = $event"
        @page-loaded="pageNumber = $event"
        @loaded="loadPdfHandler"
        @link-clicked="pageNumber = $event"
        id="pdfID"
      ></pdf>
    </div>
    <!-- loading 组件 -->
    <div class="progress" v-show="schedule !== 1">
      <el-progress
        type="circle"
        :width="60"
        color="#53a7ff"
        :percentage="Math.floor(schedule * 100)"
      ></el-progress>
      <p>{{ loadingTxt }}</p>
    </div>
  </div>
</template>

<script>
import pdf from "vue-pdf";
export default {
  components: {
    pdf,
  },
  data() {
    const loadingText = "加载文件中，文件较大请耐心等待...";
    return {
      remindText: {
        loading: loadingText, // 加载中提示语
        refresh: "若卡住不动，可刷新页面重新加载...", // 刷新提示语
      },
      loadingTxt: loadingText, // 初始加载提示语
      pageRotate: 0, //旋转角度
      pageNumber: 0, // 当前页数
      pageValue: 0, // 总页数
      schedule: 0, // 加载进度
      timerId: "", // 定时器 ID
      pdfUrl: "https://s4.aconvert.com/convert/p3r68-cdx67/a2mdb-i5v70.pdf", // pdf 文件路径
    };
  },
  // 在组件销毁时清除定时器
  destroyed() {
    clearInterval(this.timerId);
  },
  mounted() {
    this.prohibit();
    this.timerId = setInterval(() => {
      // 设置定时器，每隔一段时间切换加载提示语
      this.loadingTxt === this.remindText.refresh
        ? (this.loadingTxt = this.remindText.loading)
        : (this.loadingTxt = this.remindText.refresh);
    }, 4000);
    this.listenerFunction(); // 调用监听滚动条事件的方法
  },
  methods: {
    // 监听输入事件
    inputEvent() {
      // 输入页数大于总页数时，设置为总页数，输入页数小于 1 时，设置为 1
      this.pageNumber = Math.max(1, Math.min(this.pageNumber, this.pageValue));
    },
    // 上一页、下一页、首页、尾页事件
    pageWay(val) {
      if (val === "pre" && this.pageNumber > 1) {
        this.pageNumber--; // 上一页
      } else if (val === "next" && this.pageNumber < this.pageValue) {
        this.pageNumber++; // 下一页
      } else if (val === "first") {
        this.pageNumber = 1; // 首页
      } else if (val === "last" && this.pageNumber < this.pageValue) {
        this.pageNumber = this.pageValue; // 尾页
      }
      this.toTop(); // 滚动到顶部
    },
    // 顺/逆旋转
    rotateWay(val) {
      this.pageRotate += val === "obey" ? 90 : -90;
    },
    // 滚动顶部
    toTop() {
      const container = document.getElementById("document").parentElement;
      container.scrollIntoView({ behavior: "smooth", block: "start" });
    },
    // 监听 pdf 加载完成事件
    loadPdfHandler() {
      this.pageNumber = 1; // 加载 pdf 时，设置当前页数为 1
    },
    // 禁止特定的操作
    prohibit() {
      // 禁用右键菜单
      document.oncontextmenu = function () {
        return false;
      };
      // 禁用按键
      document.onkeydown = function (e) {
        // 定义需要禁用的按键码数组
        const forbiddenKeys = [65, 67, 73, 74, 80, 83, 85, 86, 117, 18, 123];
        // 判断按下的按键是否在禁用数组中，如果是则返回 false 禁用按键
        if (e.ctrlKey && forbiddenKeys.includes(e.keyCode)) {
          return false;
        }
      };
    },
    // 监听滚动条事件
    listenerFunction(e) {
      document
        .getElementById("document")
        .addEventListener("scroll", function (event) {
          // 监听滚动事件
          console.log(event);
        });
    },
  },
};
</script>
<style scoped lang="less">
#document {
  overflow: auto;
  height: 100vh;
  width: 100%;
  display: flex;
  position: relative;
  .component {
    user-select: none;
    color: #ffffff;
    position: fixed;
    bottom: 5%;
    left: 50%;
    margin-left: -250px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 30px;
    width: 420px;
    padding: 15px 40px;
    z-index: 99;
    .pagination {
      position: relative;
      top: 1px;
      .inputNumber {
        border-radius: 5px;
        border: 1px solid #8b8b8b;
        width: 36px;
        height: 16px;
        text-align: center;
        background: transparent;
      }
      .inputNumber:focus {
        border: 1px solid #00aeff;
        background: rgba(18, 163, 230, 0.1);
        outline: none;
        transition: 0.2s;
      }
    }
    .headTail {
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .fluctuatePage {
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .fluctuatePage:hover,
    .headTail:hover {
      transition: 0.3s;
      color: #409eff;
      cursor: pointer;
    }
  }
  .pdfContent {
    width: 100%;
  }
  .progress {
    width: 222px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -111px;
    text-align: center;
  }
  .progress p {
    color: #199edb;
    font-size: 14px;
  }
}
/*在谷歌下移除input[number]的上下箭头*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}
/*在firefox下移除input[number]的上下箭头*/
input[type="number"] {
  -moz-appearance: textfield;
}
</style>

实现效果

在这里插入图片描述

3.7 打印文件

在 vue-pdf 中，print(dpi, pageList) 方法用于触发打印 pdf 文件的功能。

  • dpi：

    表示打印的分辨率（每英寸的点数）。这个参数用于设置打印时的图像质量，通常可以设置为一个整数值，例如 150、300 等。较高的 dpi 值会产生更清晰的打印效果，但也会增加打印文件的大小。

  • pageList：

    表示要打印的页面列表。这个参数是一个数组，用于指定要打印的页面序号。例如，如果你想打印第 1 页和第 3 页，可以将 pageList 设置为 [1, 3]。如果想打印所有页面，可以使用类似于 [1, 2, 3, ...] 的方式来表示所有页面。

// 设置打印分辨率为 150dpi，打印第1页和第3页
this.$refs.myPdfComponent.print(150, [1, 3]);

<template>
  <div>
    <button @click="printPdf">打印 pdf</button>
    <pdf ref="myPdfComponent" :src="pdfSrc"></pdf>
  </div>
</template>

<script>
import pdf from "vue-pdf";
export default {
  components: {
    pdf,
  },
  data() {
    return {
      pdfSrc: "https://s4.aconvert.com/convert/p3r68-cdx67/a1eqq-4rahm.pdf",
    };
  },
};
</script>

实现效果

在这里插入图片描述

3.8 加密文件

如果你的 pdf 文件是加密的，那么就可以调用 password 方法。

  • updatePassword

    这个函数用于更新 pdf 文件的密码。当用户输入了正确的密码后，可以调用 updatePassword 函数来更新 pdf 文件的密码。

  • reason

    这是一个字符串，表示需要密码的原因。通常会包含一些提示信息，告诉用户为什么需要输入密码才能查看 pdf 文件。

<template>
  <pdf :src="pdfUrl" @password="handlePassword" />
</template>

<script>
import pdf from "vue-pdf";
export default {
  components: {
    pdf,
  },
  data() {
    return {
      pdfUrl: "https://s4.aconvert.com/convert/p3r68-cdx67/a9tag-qf2jw.pdf",
    };
  },
  methods: {
    handlePassword(updatePassword, reason) {
      if (reason === "NEED_PASSWORD") {
        // 这里可以提示用户输入密码，然后使用输入的密码来更新PDF文档
        let password = prompt("请输入PDF文档的密码:", "");
        updatePassword(password);
      }
    },
  },
};
</script>

实现效果

在这里插入图片描述

3.9 无法显示中文内容

一般情况下，是不会出现显示不了中文的问题。但不排除一些特殊的文档，例如票据、合同这类。

<template>
  <pdf :src="pdfUrl" />
</template>

<script>
import pdf from "vue-pdf";
export default {
  components: {
    pdf,
  },
  data() {
    return {
      pdfUrl: "",
    };
  },
  methods: {
    getPdfPort() {
      // 解析 PDF
      const taskData = pdf.createLoadingTask({
        url: res.data,
        cMapUrl: "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.5.207/cmaps/",
        cMapPacked: true,
      });
      // 把解析后的地址进行赋值
      this.pdfUrl = taskData;
    },
  },
};
</script>

上面代码通过 pdf.createLoadingTask() 方法创建一个任务，该任务负责加载和解析指定的 pdf 文件。通过这个方法，可以异步地加载 pdf 文件并获取解析后的数据，以便在页面中显示 pdf 内容。

  • pdf.createLoadingTask() 方法参数

    参数描述
    url要加载的 pdf 文件的 url。
    cMapUrl字符映射文件的 url，用于将 pdf 文件中的字符编码映射到可显示的字符。
    cMapPacked布尔值，指示是否使用压缩的字符映射文件。

拓展

后台返回文档流

很多时候，考虑到安全性、实时性，后台可能不一定会直接返回一个 url 链接，而是会返回一个流文件（如下图所示），这个时候就需要对原始的流文件进行处理后再进行赋值。

在这里插入图片描述

实现代码

<template>
  <div>
    <button @click="pdfWay">预览pdf</button>
    <iframe :src="item.iframeUrl" width="100%" height="550" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      iframeUrl: "",
    };
  },
  methods: {
    pdfWay() {
      previewPort().then((res) => {// 接口方法
        var binaryData = [];
        binaryData.push(res);
        this.iframeUrl = window.URL.createObjectURL(
          new Blob(binaryData, { type: "application/pdf" })
        );
      });
    },
  },
};
</script>

在上面的代码中，new Blob(binaryData, { type: "application/pdf" }) 会创建了一个 Blob 二进制对象，binaryData 是一个包含 pdf 文件二进制数据的数组，{ type: "application/pdf" } 指定了这个 Blob 对象的类型为 pdf 文件类型。然后我们调用了 createObjectURL() 方法，该方法接受一个 Blob 对象作为参数，并返回一个包含该 Blob 对象数据的 url。这个 url 是一个临时的、唯一的 url，可以用于在浏览器中直接访问和展示 Blob 对象的内容。通过这个 url，我们就可以直接在页面上展示 pdf 文件的内容。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

FastJson、Jackson、Gson、Hutool，JSON解析哪家强？JMH基准测试来排行

FastJson、Jackson、Gson、Hutool，JSON解析哪家强？JMH基准测试来排行

首发公众号:【赵侠客】 引言 在前面《释放你九成的带宽和内存&#xff1a;GZIP在解决Redis大Key方面的应用》一文中我使用GZIP算法对JSON格式数据进行了压缩&#xff0c;可以减小88%的空间&#xff0c;文中也提到了目前JSON格式在我们项目中应用的非常广泛几乎无处不在。压缩J…
阅读更多...
整合Redis和RedisCacheManger

整合Redis和RedisCacheManger

整合redis springboot在现在的版本中操作Redis数据库用到了lettuce&#xff0c;而不是Jedis&#xff0c;他们各有各的特点。Jedis以Redis命令作为方法名称&#xff0c;学习成本低&#xff0c;简单实用。但是Jedis实例是线程不安全的&#xff0c;多线程环境下需要基于连接池来使…
阅读更多...
Java实现一个简单的本地群聊。可以多开Client。

Java实现一个简单的本地群聊。可以多开Client。

网络编程也有趣的&#xff0c;Java中有对系统网络IO操作的封装包&#xff1a;Socket。现在我们在本地电脑&#xff08;网络&#xff09;用它来模拟一个简单的群聊功能&#xff0c;以便能更好地对网络编程进行深刻的理解。 "Client"去连接"Host",可同时多有…
阅读更多...
JavaEE 第23节 TCP的流量控制与阻塞控制详解

JavaEE 第23节 TCP的流量控制与阻塞控制详解

目录 前言&#xff08;必读&#xff09;1、滑动窗口背景运行机制 2. 流量控制作用实现机制关键目标 3. 拥塞控制作用实现机制作用 4. 流量控制和拥塞控制的区别作用对象不同触发条件不同控制方式不同 5.总结 前言&#xff08;必读&#xff09; 流量控制&#xff08;Flow Contr…
阅读更多...
中科院院士薛其坤：通用量子计算机还得10-20年

中科院院士薛其坤：通用量子计算机还得10-20年

说到量子计算机&#xff0c;很多人都抱有不切实际的幻想&#xff0c;甚至认为它无所不能&#xff0c;很快就能取代现有的电子计算机&#xff0c;但事实上&#xff0c;目前的量子计算机只能高效解决特定问题&#xff0c;不具备通用性。在2024年浦江创新论坛上&#xff0c;2023年…
阅读更多...
linux日志备份

linux日志备份

什么是日志文件?为什么要设立日志文件? 1、日志文件是用来记录事务对数据库的更新操作的文件。2、设立日志文件的目的是: 进行事务故障恢复;进行系统故障恢复;协助后备副本进行介质故障恢复。 但是&#xff0c;随着时间&#xff0c;日志文件内存过于增加&#xff0c;将会导…
阅读更多...
creating chat agent with langchain and openai getting no attribute error

creating chat agent with langchain and openai getting no attribute error

题意&#xff1a; 使用 LangChain 和 OpenAI 创建聊天代理时遇到“没有属性错误”&#xff08;Getting "no attribute" error when creating a chat agent with LangChain and OpenAI&#xff09; 问题背景&#xff1a; Im trying to test a chat agent using the …
阅读更多...
基于springboot+vue的工作量统计系统(全套)

基于springboot+vue的工作量统计系统(全套)

传统办法管理信息首先需要花费的时间比较多&#xff0c;其次数据出错率比较高&#xff0c;而且对错误的数据进行更改也比较困难&#xff0c;最后&#xff0c;检索数据费事费力。因此&#xff0c;在计算机上安装工作量统计系统软件来发挥其高效地信息处理的作用&#xff0c;可以…
阅读更多...
java后端开发的DO、DTO、BO、AO、VO、POJO定义

java后端开发的DO、DTO、BO、AO、VO、POJO定义

1.常用文件夹命名规则 pojo&#xff1a; &#xff08;1&#xff09;vo &#xff08;与前端交互的所有对象&#xff0c;包括接参和返回&#xff09; &#xff08;2&#xff09;query &#xff08;查询的筛选条件&#xff0c;前端传参和后端内部传参通用&#xff09; &#x…
阅读更多...
[计算机基础四大件学习笔记]计算机组成原理

[计算机基础四大件学习笔记]计算机组成原理

文章总览&#xff1a;YuanDaiMa2048博客文章总览 计算机基础四大件学习笔记 说明&#xff1a;虽然学习过计算机组成与系统结构、操作系统、计算机网络以及数据结构这四门课程&#xff0c;但是对于这四门课的结合和实际中的应用还是模糊的&#xff0c;因此x想通过网上的一些视频…
阅读更多...
Rust语言初探：WebAssembly 入门

Rust语言初探：WebAssembly 入门

Rust语言初探&#xff1a;WebAssembly 入门 前言 在我的印象中&#xff0c;Rust 一直是比较底层的语言&#xff0c;例如在操作系统底层、高性能中间件等底层场景才会看到它的身影。 然而&#xff0c;随着技术的发展&#xff0c;Rust 也开始在前端场景如 WebAssembly 中崭露头…
阅读更多...
大数据Flink（一百一十五）：Flink SQL的基本概念

大数据Flink（一百一十五）：Flink SQL的基本概念

文章目录 Flink SQL的基本概念 一、​​​​​​​SQL 中表的概念 二、​​​​​​​​​​​​​​SQL 临时表、永久表 三、​​​​​​​​​​​​​​SQL表类型的定义 四、​​​​​​​​​​​​​​常见的连接器 五、​​​​​​SQL数据视图 1、​​​​​​…
阅读更多...
校园气膜馆助力青少年体质发展：少年强则国强—轻空间

校园气膜馆助力青少年体质发展：少年强则国强—轻空间

青少年是国家的未来&#xff0c;体质的强健与否&#xff0c;直接关系到国家的竞争力和可持续发展。在现代社会&#xff0c;学习和压力并存&#xff0c;青少年的体育锻炼时间不断被压缩&#xff0c;如何提供更为优质的体育设施&#xff0c;帮助他们增强体质&#xff0c;成为学校…
阅读更多...
【C/C++】“秒懂”学C/C++不可错过的“经典编程题” — 日期类的经典运用 (含题链接)

【C/C++】“秒懂”学C/C++不可错过的“经典编程题” — 日期类的经典运用 (含题链接)

“秒懂”学C/C不可错过的“经典编程题” — 日期类的经典运用 (含题链接&#xff09; 1. 计算日期到天数转换(1). 解题思路&#xff1a;(2). 代码实现&#xff1a; 2. 打印日期(1). 解题思路&#xff1a;(2). 代码实现&#xff1a; 3. 日期累加(1). 解题思路&#xff1a;(2). 代…
阅读更多...
Java 设计模式-状态模式

Java 设计模式-状态模式

目录 一. 概述 二. 主要角色 三. 代码示例 四. 优缺点 优点&#xff1a; 缺点&#xff1a; 五. 常见应用场景 一. 概述 状态模式是一种行为设计模式&#xff0c;它允许一个对象在其内部状态改变时改变它的行为。对象看起来好像修改了它的类。状态模式把所有的与一个特定…
阅读更多...
AES算法与接口解密

AES算法与接口解密

文章目录 AES算法基本介绍加密模式模式与IV 接口响应AES解密 AES算法 基本介绍 高级加密标准(AES,Advanced Encryption Standard)为最常见的对称加密算法。 对称加密算法中加解密密钥都是一样的。 AES 的主要特性&#xff1a; 块加密&#xff1a;AES 是一种分组加密算法&…
阅读更多...
Vue day-04

Vue day-04

目录 一. vue组件 1.1 为什么用组件 1.2 vue组件 1.3 基础使用 1.4 全局 - 注册使用 1.5 局部 - 注册使用 1.4 用less写的样式 二. Vue组件之间传值(重点) 2.1 父组件向子组件传值 2.2 子组件向父组件传值 2.3 兄弟之间的传递 三. vue生命周期 3.1 含义 3.2 钩子…
阅读更多...
phpmyadmin报错mysqli::real_connect(): (HY000/1045): Access denied for user ‘

phpmyadmin报错mysqli::real_connect(): (HY000/1045): Access denied for user ‘

问题分析 这是因为本身还安装了MySQL&#xff0c;导致发生冲突&#xff0c;只需要找到自己安装的进行关闭即可 方法 在任务管理器(快捷键&#xff1a;ctrlaltdelete)-服务中&#xff0c;找到对应的MySQL进行关闭
阅读更多...
JavaFX应用更新检测功能（在线自动更新方案）

JavaFX应用更新检测功能（在线自动更新方案）

JavaFX开发的桌面应用属于C端&#xff0c;一般来说需要版本检测和自动更新功能&#xff0c;这里记录一下一种版本检测和自动更新的方法。 1. 整体方案 JavaFX.应用版本检测、自动更新主要涉及一下步骤&#xff1a; 读取本地应用版本拉取远程版本并比较两个版本如果需要升级&…
阅读更多...
数字化转型的战略规划应该怎么做？（附IBM-IT战略规划方法论PPT下载）

数字化转型的战略规划应该怎么做？（附IBM-IT战略规划方法论PPT下载）

IBM-IT战略规划方法论PPT-下载链接见文末~ 数字化转型的战略规划是一个系统而复杂的过程&#xff0c;需要从多个维度进行考虑和规划。以下是一些关键步骤和建议&#xff0c;以帮助企业制定有效的数字化转型战略规划&#xff1a; 1. 明确数字化转型愿景和目标 设定愿景&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023