vue3中使用vue3-pdf-app和使用浏览器内置的PDF插件浏览器PDF文件

news2024/12/24 9:25:51

文章目录

  • 先准备一个PDF
  • 使用浏览器内置的PDF插件预览PDF
    • 在HTML中使用浏览器插件预览PDF
    • Vscode使用插件发布服务后直接通过URL地址访问PDF
    • 可使用的浏览器
  • 在vue3项目中预览PDF文件
    • vue3项目也是可以通过URL地址访问文件的
    • vue3中使用浏览器内置的PDF插件预览PDF
      • 代码如下所示:App.vue
  • 在vue3中使用组件vue3-pdf-app预览PDF
      • 下载安装组件
      • vue3-pdf-app预览PDF结果如下图所示
      • 修改组件主题
      • 修改配置
      • 将英文改成中文显示(国际化)

如果想直接看vue3的内容,就点击对应的目录去看就行了

先准备一个PDF

没有的可以使用,WPS直接建立一个,或者建立一个word文档,随便输入一个内容,另存为PDF,就有了。
在这里插入图片描述

使用浏览器内置的PDF插件预览PDF

在这里插入图片描述

在HTML中使用浏览器插件预览PDF

然后我在代码中通过iframe的形式,打开PDF文件,也可以正常预览PDF文件,代码在截图后面
在这里插入图片描述
代码如下所示

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>这是PDF测试</title>
</head>
<style>
  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
</style>

<body>
  <div style="width: 100%; height: 100%;">
    <!-- <iframe src="./这是PDF测试.pdf" style="width: 100vw; height: 100vh;"></iframe> -->
    <iframe src="./这是PDF测试.pdf" style="width: 100%; height: 100vh;"></iframe>
  </div>
</body>

</html>

结果如下所示:
在这里插入图片描述
在这里插入图片描述
注意了使用插件发布服务之后,千万别关闭Vscode!千万别关闭Vscode!千万别关闭Vscode!千万别关闭Vscode!千万别关闭Vscode!千万别关闭Vscode! 否则,访问不到文件,因为关闭了Vscode就相当于关闭服务了。
在这里插入图片描述

Vscode使用插件发布服务后直接通过URL地址访问PDF

通过上面Vscode的插件,发布为服务之后,将对应pdftest.html所在目录都变成了URL可以访问的内容了,输入端口号和文件名称,就可以实现通过URL地址访问对应的文件了。如下图所示:其中,图中黑色为在Vscode的目录,因为右键发布服务是以上面截图中所示的pdftest.html发布的,所以这里的(这是PDF测试.pdf)跟pdftest.html是同级目录,如果这里有多一层目录,则需要加上这一层目录,看后面截图
在这里插入图片描述
在这里插入图片描述
图片也是可以通过这种方式访问的
在这里插入图片描述
所以上述的代码还可以改成这样

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>这是PDF测试</title>
</head>
<style>
  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
</style>

<body>
  <div style="width: 100%; height: 100%;">
    <!-- <iframe src="./这是PDF测试.pdf" style="width: 100vw; height: 100vh;"></iframe> -->
    <!-- <iframe src="./这是PDF测试.pdf" style="width: 100%; height: 100vh;"></iframe> -->
    <iframe src="http://127.0.0.1:5500/这是PDF测试.pdf" style="width: 100%; height: 100vh;"></iframe>
  </div>
</body>

</html>

结果如下所示
在这里插入图片描述
其他的以此类推,有兴趣的可以去试一试,所有的URL地址访问,是以使用Vscode对应的插件发布服务的目位置决定的。我为什么要记录这个呢!是因为我发现如果我想试着找一个在线的PDF进行测试,还要自己找可以访问的PDF。还不如这样来得简单,又不用花时间找。除了使用Vscode发布为服务这种方式通过URL访问文件,还可以通过nginx、SpringBoot设置静态资源映射等多种方式,但Vscode这种方式无疑是最简单的。
以后如果需要访问一些在线的地址测试之类的(如:图片,PDF等),直接使用Vscode使用相应的插件发布为服务即可。无需特意找在线的文件,直接通过这种方式使用URL访问本地文件,方便多了。

可使用的浏览器

通过上面的那种方式,我使用edge、Google Chrome、360浏览器,这些都是可以的。火狐因为平时用不到,电脑也没安装有,就不测试了。IE就更不用说了,都2023年了,这个用的应该挺少了的吧,这已经不在我的考虑范围之内了,这里只是提一下而已。有兴趣的可以自行测试一下。

在vue3项目中预览PDF文件

vue3项目也是可以通过URL地址访问文件的

这个前提是,运行起来了,这个需要知道一下,可能后面需要用到,目录结构如下所示

在这里插入图片描述

运行项目,通过给的例子,f12查看可知

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

通过上面的两种方式,我们可以把PDF放到对应的目录下,然后运行项目,通过URL地址访问对应的目录文件就可以了。这里我把PDF放在public目录和src的pdf目录下。然后分别使用URL地址访问。对应的目录结构,如下所示

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
都是可以通过URL正常访问的

vue3中使用浏览器内置的PDF插件预览PDF

目录结构
在这里插入图片描述
在这里插入图片描述
一样的警告

在这里插入图片描述

代码如下所示:App.vue

<template>
  <div style="width: 100%; height: 100%; background-color: pink;">
    <!-- 注意了,iframe需要指定宽高,如果不指定也可显示,就是有点小,具体去掉试试就知道了 -->
    <!-- public目录 -->
     <!-- <iframe :src="publicPdfUrl" style="width: 100%; height: 100%;"></iframe> -->
     <!-- <iframe src="/public/publicmulu.pdf" style="width: 100%; height: 100%;"></iframe> -->
     <!-- <iframe src="/publicmulu.pdf" style="width: 100%; height: 100%;"></iframe> -->

     <!-- src目录 -->
    <!-- <iframe :src="srcPdfUrl" style="width: 100%; height: 100%;"></iframe> -->
    <iframe src="/src/assets/pdf/srcassetspdfmulu.pdf" style="width: 100%; height: 100%;"></iframe>

    <!-- 在线URL -->
    <!-- <iframe src="http://localhost:7777/src/assets/pdf/srcassetspdfmulu.pdf" style="width: 100%; height: 100%;"></iframe> -->
    <!-- 或者是访问文章上面发布的那个5500端口的地址也可以 -->
    <!-- <iframe src="http://127.0.0.1:5500/这是PDF测试.pdf.pdf" style="width: 100%; height: 100%;"></iframe> -->
  </div>
</template>

<script setup lang="ts">
// import {ref} from 'vue'
// 在vue3中下面的第一个/代表的就是public,使用这个反而有警告
// const publicPdfUrl = ref('/public/publicmulu.pdf')
// const publicPdfUrl = ref('/publicmulu.pdf')

// src目录
// const srcPdfUrl = ref("/src/assets/pdf/srcassetspdfmulu.pdf")

</script>

<style scoped>
</style>

在这里插入图片描述

在vue3中使用组件vue3-pdf-app预览PDF

这个组件我是无意中发现的,vue3-pdf-app - npm (npmjs.com),这个是对应的官网,这里面有对对应的详细的使用案例,这里简单说明一下。

下载安装组件

npm install vue3-pdf-app

App.vue代码

<template>
  <div style="width: 100%; height: 100%;">

    <!-- 下面这几种方式都是可以的,正常访问PDF的 -->

    <!-- <vue-pdf-app style="height: 100vh;" pdf="/publicmulu.pdf"></vue-pdf-app> -->
    <!-- <vue-pdf-app style="height: 100vh;" pdf="/src/assets/pdf/srcassetspdfmulu.pdf"></vue-pdf-app> -->
    <!-- <vue-pdf-app style="height: 100vh;" :pdf="pdfUrl"></vue-pdf-app> -->
    <vue-pdf-app style="height: 100vh;" pdf="http://localhost:7777/src/assets/pdf/srcassetspdfmulu.pdf"></vue-pdf-app>
  </div>
</template>

<script setup lang="ts">
import VuePdfApp from "vue3-pdf-app";
// import this to use default icons for buttons
import "vue3-pdf-app/dist/icons/main.css";

// import {ref} from 'vue'

// const pdfUrl = ref('publicmulu.pdf')
// const pdfUrl = ref('/src/assets/pdf/srcassetspdfmulu.pdf')

</script>

<style scoped>
</style>


vue3-pdf-app预览PDF结果如下图所示

在这里插入图片描述

修改组件主题

官网都有对应的说明,vue3-pdf-app - npm (npmjs.com) 这里有说明,如我这里改成dark
在这里插入图片描述
代码如下所示:App.vue

<template>
  <div style="width: 100%; height: 100%;">

    <!-- 下面这几种方式都是可以的,正常访问PDF的 -->

    <!-- <vue-pdf-app theme="dark"  style="height: 100vh;" pdf="/publicmulu.pdf"></vue-pdf-app> -->
    <vue-pdf-app theme="dark"  style="height: 100vh;" pdf="/src/assets/pdf/srcassetspdfmulu.pdf"></vue-pdf-app>
    <!-- <vue-pdf-app theme="dark"  style="height: 100vh;" :pdf="pdfUrl"></vue-pdf-app> -->
    <!-- <vue-pdf-app theme="dark"  style="height: 100vh;" pdf="http://localhost:7777/src/assets/pdf/srcassetspdfmulu.pdf"></vue-pdf-app> -->
  </div>
</template>

<script setup lang="ts">
import VuePdfApp from "vue3-pdf-app";
// import this to use default icons for buttons
import "vue3-pdf-app/dist/icons/main.css";

// import {ref} from 'vue'

// const pdfUrl = ref('publicmulu.pdf')
// const pdfUrl = ref('/src/assets/pdf/srcassetspdfmulu.pdf')

</script>

<style scoped>
</style>

结果如下图所示
在这里插入图片描述

修改配置

官网截图如下所示,vue3-pdf-app - npm (npmjs.com),详情看官网,因为这里的配置是在是太多了,这里建议封装成一个组件方便后面复用,具体看后面的代码
在这里插入图片描述
目录结构如图所示,代码在截图后面
在这里插入图片描述
PDFPreview.vue

<template>
  <div style="width: 100%; height: 100%;">
    <vue-pdf-app theme="dark"  style="height: 100vh;" :pdf="pdfUrl"></vue-pdf-app>
  </div>
</template>

<script setup lang="ts">
import VuePdfApp from "vue3-pdf-app";
// import this to use default icons for buttons
import "vue3-pdf-app/dist/icons/main.css";

// 宏
defineProps<{
  pdfUrl: string | undefined
}>()
</script>

<style scoped>
</style>

App.vue

<template>
  <div style="width: 100%; height: 100%;">
    <PDFPreview style="width: 100%; height: 100%;" :pdf-url="pdfUrl"></PDFPreview>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import PDFPreview from './components/PDFPreview.vue';
const pdfUrl = ref('/src/assets/pdf/srcassetspdfmulu.pdf')
</script>

<style scoped>
</style>

结果如下所示
在这里插入图片描述
进行配置,根据官网来。vue3-pdf-app - npm (npmjs.com)
PDFPreview.vue

<template>
  <div style="width: 100%; height: 100%;">
    <vue-pdf-app :config="config" theme="dark" style="height: 100vh;" :pdf="pdfUrl"></vue-pdf-app>
  </div>
</template>

<script setup lang="ts">
import VuePdfApp from "vue3-pdf-app";
// import this to use default icons for buttons
import "vue3-pdf-app/dist/icons/main.css";

// 宏
defineProps<{
  pdfUrl: string | undefined
}>()

// 想不显示那一项,就将对应的true改成false就行了
const config = {
  sidebar: {
    // viewThumbnail: true, 原来的配置
    viewThumbnail: false,
    // viewOutline: true, 原来的配置
    viewOutline: false,
    // viewAttachments: true, 原来的配置
    viewAttachments: false,
  },
  secondaryToolbar: {
    secondaryPresentationMode: true,
    secondaryOpenFile: true,
    secondaryPrint: true,
    secondaryDownload: true,
    secondaryViewBookmark: true,
    firstPage: true,
    lastPage: true,
    pageRotateCw: true,
    pageRotateCcw: true,
    cursorSelectTool: true,
    cursorHandTool: true,
    scrollVertical: true,
    scrollHorizontal: true,
    scrollWrapped: true,
    spreadNone: true,
    spreadOdd: true,
    spreadEven: true,
    documentProperties: true,
  },
  toolbar: {
    toolbarViewerLeft: {
      findbar: true,
      previous: true,
      next: true,
      pageNumber: true,
    },
    toolbarViewerRight: {
      presentationMode: true,
      openFile: true,
      print: true,
      download: true,
      viewBookmark: true,
    },
    toolbarViewerMiddle: {
      zoomOut: true,
      zoomIn: true,
      scaleSelectContainer: true,
    },
  },
  errorWrapper: true,
};

</script>

<style scoped></style>

App.vue

<template>
  <div style="width: 100%; height: 100%;">
    <PDFPreview style="width: 100%; height: 100%;" :pdf-url="pdfUrl"></PDFPreview>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import PDFPreview from './components/PDFPreview.vue';
const pdfUrl = ref('/src/assets/pdf/srcassetspdfmulu.pdf')
</script>

<style scoped>
</style>

结果如下所示
这个是没有将选项设置为false的情况
在这里插入图片描述
这个是将一些选项设置为false的情况
在这里插入图片描述
超级简化版配置
PDFPreview.vue

<template>
  <div style="width: 100%; height: 100%;">
    <vue-pdf-app :config="config" theme="dark" style="height: 100vh;" :pdf="pdfUrl"></vue-pdf-app>
  </div>
</template>

<script setup lang="ts">
import VuePdfApp from "vue3-pdf-app";
// import this to use default icons for buttons
import "vue3-pdf-app/dist/icons/main.css";

// 宏
defineProps<{
  pdfUrl: string | undefined
}>()

// 来一个超级简化版配置,详细配置往后看
const config = {
  sidebar: false,
  secondaryToolbar: false,
  toolbar: false,
  errorWrapper: false,
};


/**

// 想不显示那一项,就将对应的true改成false就行了
const config = {
  sidebar: {
    // viewThumbnail: true, 原来的配置
    viewThumbnail: false,
    // viewOutline: true, 原来的配置
    viewOutline: false,
    // viewAttachments: true, 原来的配置
    viewAttachments: false,
  },
  secondaryToolbar: {
    secondaryPresentationMode: true,
    secondaryOpenFile: true,
    secondaryPrint: true,
    secondaryDownload: true,
    secondaryViewBookmark: true,
    firstPage: true,
    lastPage: true,
    pageRotateCw: true,
    pageRotateCcw: true,
    cursorSelectTool: true,
    cursorHandTool: true,
    scrollVertical: true,
    scrollHorizontal: true,
    scrollWrapped: true,
    spreadNone: true,
    spreadOdd: true,
    spreadEven: true,
    documentProperties: true,
  },
  toolbar: {
    toolbarViewerLeft: {
      findbar: true,
      previous: true,
      next: true,
      pageNumber: true,
    },
    toolbarViewerRight: {
      presentationMode: true,
      openFile: true,
      print: true,
      download: true,
      viewBookmark: true,
    },
    toolbarViewerMiddle: {
      zoomOut: true,
      zoomIn: true,
      scaleSelectContainer: true,
    },
  },
  errorWrapper: true,
};

// 从官网知道,这里有多种配置方法
// disable whole page navigation panel
const config2 = {
  toolbar: {
    toolbarViewerLeft: false
  }
}

// disable whole panel
const config3 = {
  toolbar: false
}
*/

</script>

<style scoped></style>


App.vue

<template>
  <div style="width: 100%; height: 100%;">
    <PDFPreview style="width: 100%; height: 100%;" :pdf-url="pdfUrl"></PDFPreview>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import PDFPreview from './components/PDFPreview.vue';
const pdfUrl = ref('/src/assets/pdf/srcassetspdfmulu.pdf')
</script>

<style scoped>
</style>

结果如下所示

在这里插入图片描述

将英文改成中文显示(国际化)

需要下载国际化的语言配置,https://github.com/mozilla/pdf.js,这是对应的GitHub官网,需要到这里下载对应的国际化语言配置,记住是先下载好对应的文件,至于怎么下载,往后看。有详细的截图说明。
在这里插入图片描述
在这里插入图片描述
上面的viewer.properties文件下载。如果下载失败,就直接自己新建一个文件(同样的名称和后缀名。viewer.properties。就可以了),然后复制一下里面的代码,粘贴,就可以了。

viewer.properties这个文件来自于https://github.com/mozilla/pdf.js这里,需要自己去下载。
viewer.properties这个文件来自于https://github.com/mozilla/pdf.js这里,需要自己去下载。
viewer.properties这个文件来自于https://github.com/mozilla/pdf.js这里,需要自己去下载。
viewer.properties这个文件来自于https://github.com/mozilla/pdf.js这里,需要自己去下载。

下载好之后,通过

 <link rel="resource" type="application/l10n" href="/src/assets/properites/viewer.properties">

的形式,进行国际化语言配置,变成中文。
把下载好的viewer.properties文件放到项目的某个目录下,目录结构如下所示
在这里插入图片描述
PDFPreview.vue的代码如下

<template>
  <div style="width: 100%; height: 100%;">
    <link rel="resource" type="application/l10n" href="/src/assets/properites/viewer.properties">
    <vue-pdf-app theme="dark" style="height: 100vh;" :pdf="pdfUrl"></vue-pdf-app>
  </div>
</template>

<script setup lang="ts">
import VuePdfApp from "vue3-pdf-app";
// import this to use default icons for buttons
import "vue3-pdf-app/dist/icons/main.css";

// 宏
defineProps<{
  pdfUrl: string | undefined
}>()

</script>

<style scoped></style>

App.vue

<template>
  <div style="width: 100%; height: 100%;">
    <PDFPreview style="width: 100%; height: 100%;" :pdf-url="pdfUrl"></PDFPreview>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import PDFPreview from './components/PDFPreview.vue';
const pdfUrl = ref('/src/assets/pdf/srcassetspdfmulu.pdf')
</script>

<style scoped>
</style>

结果如下所示
在这里插入图片描述

不过,最后我还是选择使用iframe的形式展示PDF,感觉浏览器内置的PDF插件已经足够强大了,已经符合我要求了。我写这篇文章是因为,我既然了解到了,就顺便记录一下呗!

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

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

相关文章

单窗口单IP适合炉石传说游戏么?

游戏道具制作在炉石传说中是一个很有挑战的任务&#xff0c;但与此同时&#xff0c;它也是一个充满机遇的领域。在这篇文章中&#xff0c;我们将向您展示如何在炉石传说游戏中使用动态包机、多窗口IP工具和动态IP进行游戏道具制作。 作者与主题的关系&#xff1a;作为一名热爱炉…

【分布式】大模型分布式训练入门与实践 - 04

大模型分布式训练 数据并行-Distributed Data Parallel1.1 背景1.2 PyTorch DDP1&#xff09; DDP训练流程2&#xff09;DistributedSampler3&#xff09;DataLoader: Parallelizing data loading4&#xff09;Data-parallel&#xff08;DP&#xff09;5&#xff09;DDP原理解析…

nodejs+vue 视频网站的设计与实现

该设计划分为七大模块&#xff0c;包括用户的系统管理、其他管理和视频管理三部分&#xff0c; 和管理管理员的视频、其他管理、系统管理和用户管理四部分。目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关…

【虚幻引擎UE】UE4/UE5 基于2D屏幕坐标获取场景3D坐标 射线检测(蓝图/C++)

UE4/UE5 基于2D屏幕坐标获取场景3D坐标 一、射线检测1&#xff09;定义1&#xff09;射线与3D场景中的物体交互的流程2&#xff09;射线检测蓝图函数3&#xff09;蓝图实现根据鼠标点击位置获取场景中的坐标值4&#xff09;根据相机中心点获取场景中的坐标值5&#xff09;射线检…

迅为RK3588开发板Android12双摄同时显示

要支持双摄同时显示需对源码做如下修改&#xff0c;修改文件 hardware/rockchip/camera/Camera3HALModule.cpp 注释掉下面函数中的部分代码即可。 测试 双摄同时显示需要双摄 app&#xff0c;在网盘资料下载测试 APK&#xff0c;然后使用 adb 安装测试 APK&#xff0c; 启动…

hive窗口函数记录

记录工作中和学习中的窗口函数&#xff0c;方便以后使用&#xff0c;本记持续更新和完善&#xff0c;版本&#xff1a;231019 文章目录 1.什么是窗口函数2.窗口函数的表达式3.窗口函数的类型1&#xff09; 排名函数2&#xff09; 聚合函数3&#xff09; 跨行取值函数 4.[frame…

中英文双语言海外微盘交易源码 微盘交易源码 虚拟币微盘交易系统源码 支持产品数据

Rockefeller微交易源码/双语言海外微盘完整源码/带单控 测试环境&#xff1a;宝塔、Linux、PHP7.3、MySQL5.6 根目录 public&#xff0c;伪静态 larvael5&#xff0c;默认文档&#xff1a;index.html修改为第一个&#xff0c;不然会报404 k线对接的是蜜蜂查&#xff1a;http…

平衡二叉树(AVL)【java实现+图解】

目录 一、平衡二叉树(AVL) 二、平衡二叉树的四种旋转 1.右旋转 2.左旋转 3. 左右旋转 4. 右左旋转 三、基于二叉搜索树之平衡二叉树的代码实现 1.具体方法思路 2.java代码实现 一、平衡二叉树(AVL) 一种自平衡二叉搜索树&#xff0c;它是在每个节点上增加一个平衡因子…

Day 1 Vue 页面框架

现在前端框架越来越像后端了&#xff0c;特别是TypeScript这样的语言出现后&#xff0c;开发前端的体验跟后端渐渐接近了。当然&#xff0c;作为一个后端&#xff0c;直接上手前端&#xff0c;还是有很多坑要填的。 本次开发&#xff0c;前端页面框架直接选择Vue。原因很简单&…

HTML中文本框\单选框\按钮\多选框

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title> </head> <body> <h1>登录注册</h1> <form action"第一个网页.html" method"post&quo…

字节码进阶之java反射的底层实现原理

文章目录 1. 前言1. 类加载机制2. 字节码操作 2. 反射方法源码分析反射的inflation机制 3. 为什么反射性能差4. 反射的限制与安全性考虑1. **性能开销**2. **安全限制**3. **破坏抽象**4. **版本兼容性问题** 参考文档 java 反射的底层实现原理 1. 前言 Java反射的底层实现原理…

Windows下Eclipse C/C++开发环境配置教程

1.下载安装Eclipse 官网下载eclipse-installer&#xff08;eclipse下载器&#xff09;&#xff0c;或者官方下载对应版本zip。 本文示例&#xff1a; Eclipse IDE for C/C Developers Eclipse Packages | The Eclipse Foundation - home to a global community, the Eclipse ID…

模式识别——高斯分类器

模式识别——高斯分类器 需知定义特殊情况&#xff08;方差一致&#xff09;Sigmoid 需知 所有问题定义在分类问题下&#xff0c;基于贝叶斯决策 定义 条件概率为多元高斯分布&#xff0c;此时观测为向量 X X 1 , X 2 , . . . , X n X{X_1,X_2,...,X_n} XX1​,X2​,...,Xn​…

IP地址在网络安全中的关键作用

IP地址&#xff08;Internet Protocol Address&#xff09;是互联网世界中的重要标识符&#xff0c;它在网络安全领域发挥着至关重要的作用。这些地址不仅帮助设备在网络上找到彼此&#xff0c;还在多个方面有助于维护网络的完整性、机密性和可用性。本文将探讨IP地址在网络安全…

nodejs使用es-batis

使用方法 创建连接 因为它只支持非连接池所以每次都要创建连接 let dao new MySqlDaoContext({charset: "utf8",host: "localhost",user: "root",password: "root",database: "test",});await dao.initialize();dao in…

H3C AC通过Web平台进行AC软件的升级?

软件升级的流程 1、获取软件版本 登录新华三官网&#xff08;首页>产品支持与服务>文档与软件>软件下载&#xff09;&#xff0c;将指定的软件版本下载至本地。 无线路由器-无线接入点-无线控制器-新华三集团-H3C 官网软件下载公共账号密码&#xff1a;账号&#x…

Selenium中WebDriver最新Chrome驱动安装教程

&#x1f60f;作者简介&#xff1a;博主是一位测试管理者&#xff0c;同时也是一名对外企业兼职讲师。 &#x1f4e1;主页地址&#xff1a;【Austin_zhai】 &#x1f646;目的与景愿&#xff1a;旨在于能帮助更多的测试行业人员提升软硬技能&#xff0c;分享行业相关最新信息。…

网络规划设计

文章目录 一、网络架构设计1.1 单核心双核心1.1.1 单核心1.1.2 双核心端口聚合 链路聚合网关冗余VRRP堆叠技术生成树STPPOE以太网供电服务器冗余&负载均衡服务器双机热备 1.2 环网架构设计1.3 层次化架构设计1.3.2 三层网络架构设计1.3.3 园区大二层网络架构1.3.4 数据中心…

【前段基础入门之】=>CSS3新增渐变颜色属性

导语&#xff1a; CSS3 新增了&#xff0c;渐变色 的解决方案&#xff0c;这使得我们可以绘制出更加生动的炫酷的的配色效果 线性渐变 多个颜色之间的渐变&#xff0c; 默认从上到下渐变 background-image: linear-gradient(red,yellow,green); /*默认从上到下渐变*/默认从上…

CVE-2022-41082:Microsoft Exchange 反序列化类型混淆 RCE 漏洞简单分析

简介 漏洞编号&#xff1a;CVE-2022-41082漏洞类型&#xff1a;类型混淆软件名称&#xff1a;Microsoft Exchange模块名称&#xff1a;Exchange 服务 powershell 接口模块历史漏洞&#xff1a;易受攻击的流行软件影响的版本&#xff1a;Microsoft Exchange Server 2019 2016 2…