当前位置: 首页 > news >正文

html转PDF文件最完美的方案(wkhtmltopdf)

目录

需求

一、方案调研

二、wkhtmltopdf使用

如何使用

文档简要说明

三、后端服务

四、前端服务

往期回顾


需求

最近在做报表类的统计项目,其中有很多指标需要汇总,网页内容有大量的echart图表,做成一个网页去浏览,同时需要转成PDF格式下载浏览,更重要的是pdf格式再打开后,需要自定义页眉、页脚,页码,支持文本的选中、复制、粘贴,同时左侧也要有正常的页签导航,点击哪里到哪里。

一、方案调研

经过调研主要有以下几种方式生成pdf,但是每个方案都有缺陷,跟我们的需求相差。

方案优点缺点
window.print()1、兼容性最好
2、可以将任意内容导出成 pdf 文档, 甚至是非改页面上的内容

1、调用方法时部分条件下导出pdf需要用户手动选择

2、生成的pdf不支持生成页签导航

3、页眉页脚不适合自定义

 jspdf + html2canvas1、在jspdf上将生成效果不佳的部分可以转成图片,适用于对样式有要求的场景
2、将乱码部分转为了图片,解决了中文乱码问题
3、没有预览点击即可保存

1、如果内容包含echart图表或者其它图表,该内容需要转图片
2、生成的pdf实际为图片,不支持复制
3、不同浏览器生成可能会有略微差异(页面周边留白部分差异)
 4、由于整体效果为图片,导致pdf文件较大(两页2.5MB左右)

5、pdf分页不好处理

6、不支持生成页签导航

wkhtmltopdf

1、支持自定义页眉页脚页码

2、支持文本选中粘贴复制

3、支持将html的h标签自动生成pdf

1、需要结合后端去实现生成接口返回给前端下载

2、wkhtmltopdf 使用 WebKit 渲染引擎,这意味着它在某些情况下可能无法完全支持所有现代 CSS 和 JavaScript 特性,特别是那些依赖于最新浏览器特性的功能

3、wkhtmltopdf 对 JavaScript 的支持有限。虽然它可以在某些情况下执行简单的 JavaScript,但复杂的交互式内容可能无法正确渲染。

前两种是纯前端去实现的方案,一是用浏览器打印功能实现,这种方案简单粗暴,但是需要手动触发,不支持自定义页眉页脚页码,浏览器也不支持生成页签导航。第二种把整个页面生成图片,完整还原了样式但是,跟我们的要求差太远。第三种是wkhtmltopdf,底层是C++去实现的,能够高效地将 HTML 内容转换为高质量的 PDF 文件。下面主要介绍下wkhtmltopdf使用。

二、wkhtmltopdf使用

官网入口:wkhtmltopdf

如何使用

  1. 下载预编译的二进制文件或从源代码构建

下载链接:wkhtmltopdf

以下是适配所有操作系统的包,我们根据自己的系统不同的下载包

以centeros7为例

1.首先我们下载我们需要的包

 我的是x86_64的,下载完成后将包传到服务器

 运行命令安装

rpm -Uvh wkhtmltox-0.12.6-1.centos7.x86_64.rpm

 报错!!!

原因是缺少依赖,我们来安装下依赖

yum install fontconfig libX11 libXext libXrender libjpeg libpng  xorg-x11-fonts-Type1

yum install -y xorg-x11-fonts-75dpi

 再次运行安装命令

查看版本

wkhtmltopdf --version

 

大功告成!  YYDS! 

安装完成后我们来使用它

  1. 创建要转换为PDF或者图像的HTML文档
  2. 通过命令运行工具生成PDF

比如我要将Google网页保存为pdf,则可以直接运行命令

wkhtmltopdf http://google.com google.pdf

文档简要说明

官方文档说明:https://wkhtmltopdf.org/usage/wkhtmltopdf.txt

强烈建议查看官方文档,以下(基于0.12.6的版本)

1. 基本命令

wkhtmltopdf [选项] <输入文件或URL> <输出PDF文件>

示例:

wkhtmltopdf input.html output.pdf

2.大纲(必要实现)

大纲就是PDF阅读器中,用于显示导航跳转的部分,不属于PDF文档中的一部分,主要是方便阅读器浏览导航使用。

Wkhtmltopdf 用 patched qt 支持PDF大纲(也称为书签),可以通过设置--outline (默认选项)选项实现。

大纲是根据 <h?>(h1–h6) 标签生成的,有关如何实现的详细说明,请参见目录部分。

如果 <h?> 标签在HTML文档中嵌套的层级非常深,那么大纲树的层级也会变得非常深。可以通过--outline-depth选项来设置大纲的层级深度。

详细使用参考这篇文章哈哈哈

wkhtmltopdf 0.12.6 中文文档(精心整理)-CSDN博客

原理是:wkhtmltopdf将整个带css的html文档转为了pdf,因此想要 将我们前端画的好看的页面生成pdf,需要将html文档传给wkhtmltopdf。

三、后端服务

 我们需要写一个后端服务,通过接口将前端绘制的漂亮页面整个以api的方式传给后端,后端将文档内容整理后,调用wkhtmltopdf的命令来生成pdf,然后返回文件流给前端提供下载。

npm为我们提供了调用wkhtmltopdf服务的插件

wkhtmltopdf - npm

以下是简单用法,以官方最新为准

var wkhtmltopdf = require('wkhtmltopdf');// URL
wkhtmltopdf('http://google.com/', { pageSize: 'letter' }).pipe(fs.createWriteStream('out.pdf'));// HTML
wkhtmltopdf('<h1>Test</h1><p>Hello world</p>').pipe(res);// Stream input and output
var stream = wkhtmltopdf(fs.createReadStream('file.html'));// output to a file directly
wkhtmltopdf('http://apple.com/', { output: 'out.pdf' });// Optional callback
wkhtmltopdf('http://google.com/', { pageSize: 'letter' }, function (err, stream) {// do whatever with the stream
});// Repeatable options
wkhtmltopdf('http://google.com/', {allow : ['path1', 'path2'],customHeader : [['name1', 'value1'],['name2', 'value2']]
});// Ignore warning strings
wkhtmltopdf('http://apple.com/', { output: 'out.pdf',ignore: ['QFont::setPixelSize: Pixel size <= 0 (0)']
});
// RegExp also acceptable
wkhtmltopdf('http://apple.com/', { output: 'out.pdf',ignore: [/QFont::setPixelSize/]
});

以下是我写的一个简单的node server.js调用案列

const express = require('express');
const path = require('path');
const app = express();
const port = 3002;// 引入 cors 中间件
const cors = require('cors');// 使用 cors 中间件
app.use(cors());const fs = require('fs');// 解析 JSON 请求体,设置最大限制为 50MB
app.use(express.json({ limit: '50mb' }));// 解析 application/x-www-form-urlencoded 请求体,设置最大限制为 50MB
app.use(express.urlencoded({ extended: true, limit: '50mb' }));// PDF生成高并发处理
function getPdfHeavyTask(html) {const wkhtmltopdf = require('wkhtmltopdf');const options = {output: `./pdfs/demo.pdf`,pageSize: 'letter',orientation: 'portrait',marginTop: '1.8cm',marginBottom: '1.2cm',marginLeft: '1cm',marginRight: '1cm',encoding: 'UTF-8',dpi: 300,zoom: 1,title: 'pdf生成demo',enableSmartShrinking: true,javascriptDelay: 1000,noStopSlowScripts: true,headerHtml: './template/header.html', // 设置页眉模板footerHtml: './template/footer.html' // 设置页脚模板};return new Promise((resolve) => {wkhtmltopdf(html, options, (err, stream) => {if (err) {resolve({ status: 500, data: err });return;}resolve({ status: 200, data: stream });});});
}app.post('/generate-pdf', async (req, res) => {const { content, css } = req.body;let html = `<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>pdf生成demo</title><style>body { font-family: "Microsoft YaHei", "SimSun", sans-serif; }${css}</style></head><body>${content}</body></html>`;// 高并发生成异步任务处理const { status, data } = await getPdfHeavyTask(html);// PDF生成失败if (status === 500) {res.status(500).send(data);return;}// PDF生成成功读取const filePath = path.resolve(__dirname, './pdfs/demo.pdf');const fileStream = fs.createReadStream(filePath);const stat = fs.statSync(filePath);res.setHeader('Content-Length', stat.size);res.setHeader('Content-Type', 'application/pdf');res.setHeader('Content-Disposition', 'attachment; filename=demo.pdf');fileStream.pipe(res);
});app.listen(port, () => {console.log(`Server running at http://localhost:${port}`);
});

页眉页脚代码根据自己的需求添加即可

案例:header.html 自定义页码

 <!DOCTYPE html><html><head><script>function subst() {var vars = {};var query_strings_from_url = document.location.search.substring(1).split('&');for (var query_string in query_strings_from_url) {if (query_strings_from_url.hasOwnProperty(query_string)) {var temp_var = query_strings_from_url[query_string].split('=', 2);vars[temp_var[0]] = decodeURI(temp_var[1]);}}var css_selector_classes = ['page', 'frompage', 'topage', 'webpage', 'section', 'subsection', 'date', 'isodate', 'time', 'title', 'doctitle', 'sitepage', 'sitepages'];for (var css_class in css_selector_classes) {if (css_selector_classes.hasOwnProperty(css_class)) {var element = document.getElementsByClassName(css_selector_classes[css_class]);for (var j = 0; j < element.length; ++j) {element[j].textContent = vars[css_selector_classes[css_class]];}}}}</script></head><body style="border:0; margin: 0;" onload="subst()"><table style="border-bottom: 1px solid black; width: 100%"><tr><td class="section"></td><td style="text-align:right">Page <span class="page"></span> of <span class="topage"></span></td></tr></table></body></html>

四、前端服务

前端只需要将我们的html和css通过接口传给后端即可

try {const htmlContent = document.getElementById('report-content').outerHTML// 使用fetch API获取CSS文件const response = await fetch('../../assets/core-report.css')const css = await response.text()this.http.post('/generate-pdf',{content: htmlContent, // 网址或者HTML文档css,},undefined,{responseType: 'arraybuffer',observe: 'response',}).subscribe((response: any) => {if (!response) {this.dloading = falsethrow new Error('生成 PDF 失败')}this.downloadProgress = 100// 将 ArrayBuffer 转换为 Blob 对象const blob = new Blob([response.body], { type: 'application/pdf' })// 创建一个 URL 对象const url = URL.createObjectURL(blob)// 下载 PDF 文件const a = document.createElement('a')a.href = urla.download = `demo.pdf`document.body.appendChild(a)a.click()document.body.removeChild(a)URL.revokeObjectURL(url)},(error) => {console.error('PDF生成失败:', error)})} catch (error) {console.error('PDF生成失败:', error)}

我们通过脚本获取到html文档,通过fetch直接将文件内容获取,然后通过接口将两个参数传给后端,后端通过将两个内容组装成完整html,调用wkhtmltopdf,生成pdf,在通过文件流返回前端下载。这样生成的pdf,支持文本选中、复制、搜索,同时它会根据H标签识别页签导航内容,实现页签点击导航,YYDS!

注意点:

1:如果内容中存在canvas或者图片需要转base64传给后端,或者使用cdn链接

2:css3中的样式不支持,比如:阴影,以及flex布局不支持

3:内容被切分

在每个章节的标题或者其他地方我们往往不希望标题被切成两半,分别出现在两个页面当中。因此,我们需要添加如下样式:

.title {page-break-before: always;page-break-after: always;page-break-inside: avoid;
}

4: 表格切分

文档中会出现大量的表格。如果希望放置表格被切分也是同样的处理方式 

table tr {word-break: break-all;page-break-before: always;page-break-after: always;page-break-inside: avoid;
}

欢迎在评论区交流。

如果文章对你有所帮助,❤️关注+点赞❤️鼓励一下!博主会持续更新。。。。

往期回顾

 CSS多栏布局-两栏布局和三栏布局

 border边框影响布局解决方案

 css 设置字体渐变色和阴影

css 重置样式表(Normalize.css)

 css实现元素居中的6种方法 

Angular8升级至Angular13遇到的问题

前端vscode必备插件(强烈推荐)

Webpack性能优化

vite构建如何兼容低版本浏览器

前端性能优化9大策略(面试一网打尽)!

vue3.x使用prerender-spa-plugin预渲染达到SEO优化

 vite构建打包性能优化

 vue3.x使用prerender-spa-plugin预渲染达到SEO优化

 ES6实用的技巧和方法有哪些?

 css超出部分显示省略号

vue3使用i18n 实现国际化

vue3中使用prismjs或者highlight.js实现代码高亮

什么是 XSS 攻击?什么是 CSRF?什么是点击劫持?如何防御

相关文章:

html转PDF文件最完美的方案(wkhtmltopdf)

目录 需求 一、方案调研 二、wkhtmltopdf使用 如何使用 文档简要说明 三、后端服务 四、前端服务 往期回顾 需求 最近在做报表类的统计项目&#xff0c;其中有很多指标需要汇总&#xff0c;网页内容有大量的echart图表&#xff0c;做成一个网页去浏览&#xff0c;同时…...

漏洞挖掘 | 基于mssql数据库的sql注入

视频教程在我主页简介或专栏里 目录&#xff1a; 前记 0x1 判断网站数据库类型 0x2 了解mssql数据库的主要三大系统表 0x3 了解mssql的主要函数 0x4 判断注入点及其注入类型 0x5 联合查询之判断列数 0x6 联合查询之获取数据库相关信息 0x7 mssql之时间盲注 0x8 mssql之报错注…...

.Net Core笔记知识点(跨域、缓存)

设置前端跨域配置示例&#xff1a; builder.Services.AddCors(option > {option.AddDefaultPolicy(policy > {policy.WithOrigins(originUrls).AllowAnyMethod().AllowAnyHeader().AllowCredentials();});});var app builder.Build();app.UseCors(); 【客户端缓存】接…...

JS实现一个通用的循环填充数组的方法

function createFilledArray(length, pattern) {return Array.from({ length }, (_, i) > pattern[i % pattern.length]); }// 示例 const result createFilledArray(8, [1, 2, 3]);console.log(result); // [1, 2, 3, 1, 2, 3, 1, 2]解析&#xff1a; createFilledArray(…...

Java项目: 基于SpringBoot+mybatis+maven+mysql实现的智能学习平台管理系(含源码+数据库+毕业论文)

一、项目简介 本项目是一套基于SpringBootmybatismavenmysql实现的智能学习平台管理系统 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 该系统功能完善、…...

Rust HashMap :当储物袋遇上物品清单

开场白&#xff1a;哈希映射的魔法本质 在Rust的奇幻世界里&#xff0c;HashMap就像魔法师的储物袋&#xff1a; 键值对存储 → 每个物品都有专属咒语&#xff08;键&#xff09;和实体&#xff08;值&#xff09;快速查找 → 念咒瞬间召唤物品动态扩容 → 自动伸展的魔法空间…...

力扣-哈希表-18 四数之和

思路 和《三数之和》类似&#xff0c;也使用类似双指针的操作&#xff0c;重点在去重&#xff0c;细节是多个数目相加需要小心超出范围&#xff0c;强转一下。 代码 class Solution { public:vector<vector<int>> fourSum(vector<int>& nums, int tar…...

DeepSeek-VL2论文解读:用于高级多模态理解的专家混合视觉语言模型

github:https://github.com/deepseek-ai/DeepSeek-VL2 paper: https://github.com/deepseek-ai/DeepSeek-VL2/blob/main/DeepSeek_VL2_paper.pdf 大型视觉语言模型&#xff08;VLMs&#xff09;已经成为人工智能领域的变革性力量&#xff0c;将大型语言模型&#xff08;LLMs&…...

PHP JSON操作指南

PHP JSON操作指南 概述 JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;易于人阅读和编写&#xff0c;同时也易于机器解析和生成。PHP作为一门流行的服务器端脚本语言&#xff0c;支持对JSON数据进行读取、编写和解析。本文将…...

使用ES5和ES6求函数参数的和、解析URL Params为对象

文章目录 1 使用ES5和ES6求函数参数的和1.1 ES51.2 ES6 2 解析URL Params为对象 1 使用ES5和ES6求函数参数的和 1.1 ES5 function sum() {let sum 0;Array.prototype.forEach.call(arguments, function(item) {sum item * 1;})return sum; }1.2 ES6 function sum(...nums)…...

Python 数据挖掘与机器学习

模块一&#xff1a;Python编程 Python编程入门 1、Python环境搭建 2、如何选择Python编辑器&#xff1f; 3、Python基础 4、常见的错误与程序调试 5、第三方模块的安装与使用 6、文件读写&#xff08;I/O&#xff09; Python进阶与提高 1、Numpy模块库 2、Pandas模块…...

【华为OD-E卷 - 108 最大矩阵和 100分(python、java、c++、js、c)】

【华为OD-E卷 - 最大矩阵和 100分&#xff08;python、java、c、js、c&#xff09;】 题目 给定一个二维整数矩阵&#xff0c;要在这个矩阵中选出一个子矩阵&#xff0c;使得这个子矩阵内所有的数字和尽量大&#xff0c;我们把这个子矩阵称为和最大子矩阵&#xff0c;子矩阵的…...

Mysql系列之--重新认识Mysql

1、Mysql是什么 Mysql是一个被广泛使用的开源的关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;使用结构化查询语句SQL进行管理和操作数据。Mysql有客户端和服务端&#xff0c;客户端通过ip地址、端口、用户名、密码连接到服务端&#xff0c;然后使用SQL语句进…...

利用UNIAPP实现短视频上下滑动播放功能

在 UniApp 中实现一个短视频上下滑动播放的功能,可以使用 swiper 组件来实现滑动效果,并结合 video 组件来播放短视频。以下是一个完整的示例,展示如何在 UniApp 中实现这一功能。 1. 创建 UniApp 项目 如果你还没有创建 UniApp 项目,可以使用 HBuilderX 创建一个新的项目…...

计算机毕业设计hadoop+spark+hive民宿推荐系统 酒店推荐系统 民宿价格预测 酒店价预测 机器学习 深度学习 Python爬虫 HDFS集群

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…...

Shell 中的 Globbing:原理、使用方法与实现解析(中英双语)

Shell 中的 Globbing&#xff1a;原理、使用方法与实现解析 在 Unix Shell&#xff08;如 Bash、Zsh&#xff09;中&#xff0c;globbing 是指 文件名模式匹配&#xff08;filename pattern matching&#xff09;&#xff0c;它允许用户使用特殊的通配符&#xff08;wildcards…...

解决 ssh connect to host github.com port 22 Connection timed out

一、问题描述 本地 pull/push 推送代码到 github 项目报 22 端口连接超时&#xff0c;测试连接也是 22 端口连接超时 ssh 密钥没问题、也开了 Watt Toolkit 网络是通的&#xff0c;因此可以强制将端口切换为 443 二、解决方案 1、测试连接 ssh -T gitgithub.com意味着无法通…...

CSS的媒体查询语法

CSS的媒体查询语法 常见的媒体类型常见的特性示例 CSS的媒体查询语法可以根据不同的设备特性&#xff08;如屏幕尺寸、分辨率等&#xff09;应用不同的样式。基本语法如下&#xff1a; media 媒体类型 and (特性: 值) {/* 样式规则 */ }常见的媒体类型 screen&#xff1a;用于…...

生产环境超实用shell脚本一

生产环境超实用shell脚本一 Shell脚本作为一种强大的自动化工具&#xff0c;能够帮助运维人员轻松应对各种复杂的任务。 本文将为您介绍服务器健康检查、日志清理、备份以及监控等多个方面&#xff0c;并详细阐述每个脚本的功能和应用场景&#xff0c;助力您提升运维效率&…...

【1】高并发导出场景下,服务器性能瓶颈优化

高并发导出场景下&#xff0c;服务器性能瓶颈通常出现在 CPU、内存、磁盘 I/O 或网络带宽等方面。为了解决这些问题&#xff0c;可以从以下几个方面进行优化&#xff1a; 1. 优化导出逻辑 减少计算复杂度&#xff1a;检查导出逻辑中是否存在不必要的计算或重复操作&#xff0c;…...

go的sync包学习

包含了sync.Mutex,sync.RWMutex,sync.Cond,sync.Map,sync.Once等demo sync.Mutex //讲解mutex import ("fmt""math/rand""sync""time" )type Toilet struct {m sync.Mutex } type Person struct {Name string }var DateTime "2…...

一文读懂:TCP网络拥塞的应对策略与方案

TCP&#xff08;传输控制协议&#xff09;是互联网中广泛使用的可靠传输协议&#xff0c;它通过序列号、确认应答、重发控制、连接管理以及窗口控制等机制确保数据的可靠传输。然而&#xff0c;在网络环境中&#xff0c;由于多个主机共享网络资源&#xff0c;网络拥塞成为了一个…...

用DeepSeek分析总结一下DeepSeek发表过的8篇论文

1. 《深度求索大语言模型&#xff1a;以长期主义拓展开源语言模型》&#xff08;2024年1月5日&#xff09; 2. 《深度求索代码模型&#xff1a;当大语言模型遇上编程——代码智能的崛起》&#xff08;2024年1月26日&#xff09; 3. 《深度求索视觉语言模型&#xff1a;迈向真…...

node.js使用mysql2对接数据库

一、引言 在现代Web开发中&#xff0c;Node.js作为一种高效、轻量级的JavaScript运行时环境&#xff0c;已经广泛应用于后端服务的开发中。而MySQL&#xff0c;作为一个广泛使用的关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;提供了强大的数据存储和查询功能…...

华为支付-免密支付接入免密代扣说明

免密代扣包括支付并签约以及签约代扣场景。 开发者接入免密支付前需先申请开通签约代扣产品&#xff08;即申请配置免密代扣模板及协议模板ID&#xff09;。 华为支付以模板维度管理每一个代扣扣费服务&#xff0c;主要组成要素如下&#xff1a; 接入免密支付需注意&#x…...

Java 面试真题解析与技巧分享

Java 面试对于每一位 Java 开发者来说都是至关重要的&#xff0c;它不仅是对我们技术能力的检验&#xff0c;更是我们迈向理想工作岗位的关键一步。在面试中&#xff0c;掌握常见真题的解题思路和回答技巧&#xff0c;能够让我们更加自信地展示自己的实力。本文将结合具体的面试…...

使用 Python 编程语言来实现机器学习小项目教程案例

以下是一个简单的机器学习小项目教程案例,使用 Python 编程语言和 Scikit-learn 库来实现一个分类任务。我们将使用经典的鸢尾花(Iris)数据集来训练一个分类器,预测鸢尾花的种类。 项目目标 使用机器学习算法对鸢尾花数据集进行分类,预测鸢尾花的类别(Setosa、Versicolor…...

网络安全 | 零信任架构:重构安全防线的未来趋势

网络安全 | 零信任架构&#xff1a;重构安全防线的未来趋势 一、前言二、零信任架构的核心概念与原理2.1 核心概念2.2 原理 三、零信任架构的关键技术组件3.1 身份管理与认证系统3.2 授权与访问控制系统3.3 网络与安全监测系统3.4 加密与数据保护技术 四、零信任架构与传统安全…...

react关于手搓antd pro面包屑的经验(写的不好请见谅)

我们先上代码&#xff0c;代码里面都有注释&#xff0c;我是单独写了一个组件&#xff0c;方便使用&#xff0c;在其他页面引入就行了 还使用了官方的Breadcrumb组件 import React, { useEffect, useState } from react; import { Breadcrumb, Button } from antd; import { …...

PHP-运算符

[题目信息]&#xff1a; 题目名称题目难度PHP-运算符2 [题目考点]&#xff1a; PHP运算符优先级[Flag格式]: SangFor{zEk4r_djfgy0CibPz6LdXpwBrXRckhIT}[环境部署]&#xff1a; docker-compose.yml文件或者docker tar原始文件。 http://分配ip:2067[题目writeup]&#x…...

chrome浏览器chromedriver下载

chromedriver 下载地址 https://googlechromelabs.github.io/chrome-for-testing/ 上面的链接有和当前发布的chrome浏览器版本相近的chromedriver 实际使用感受 chrome浏览器会自动更新&#xff0c;可以去下载最新的chromedriver使用&#xff0c;自动化中使用新的chromedr…...

BurpSuite抓包与HTTP基础

文章目录 前言一、BurpSuite1.BurpSuite简介2.BurpSuite安装教程(1)BurpSuite安装与激活(2)安装 https 证书 3.BurpSuite使用4.BurpSuite资料 二、图解HTTP1.HTTP基础知识2.HTTP客户端请求消息3.HTTP服务端响应消息4.HTTP部分请求方法理解5.HTTPS与HTTP 总结 前言 在网络安全和…...

SQLAlchemy 2.0的简单使用教程

SQLAlchemy 2.0相比1.x进行了很大的更新&#xff0c;目前网上的教程不多&#xff0c;以下以链接mysql为例介绍一下基本的使用方法 环境及依赖 Python:3.8 mysql:8.3 Flask:3.0.3 SQLAlchemy:2.0.37 PyMySQL:1.1.1使用步骤 1、创建引擎&#xff0c;链接到mysql engine crea…...

Android原生开发问题汇总

Fragment顶部出现一个白条怎么办&#xff1f;父类布局搞事情。 layer-list被拉伸问题 Android之 ImageView android:src和tools:src的区别是什么? Android运行时权限的总结&#xff0c;以及EasyPermissions框架的使用 Android Studio添加EasyPemissions Android中module怎…...

springboot中使用注解实现分布式锁

下面将详细介绍如何在 Spring Boot 里借助注解实现分布式锁&#xff0c;以login_lock:作为锁的 key 前缀&#xff0c;使用请求参数里的phone值作为 key&#xff0c;等待时间设为 0 秒&#xff0c;锁的持续时间为 10 秒。我们会使用 Redis 来实现分布式锁&#xff0c;同时借助 S…...

Android TabLayout 使用进阶(含源码)

android:layout_height“match_parent” android:orientation“vertical” tools:context“.mode2.ClassificationActivity”> <com.google.android.material.tabs.TabLayout android:id“id/tab_layout” android:layout_width“match_parent” android:layout_he…...

数据库系统概论的第六版与第五版的区别,附pdf

我用夸克网盘分享了「数据库系统概论第五六版资源」&#xff0c;点击链接即可保存。 链接&#xff1a;https://pan.quark.cn/s/21a278378dee 第6版教材修订的主要内容 为了保持科学性、先进性和实用性&#xff0c;在第5版教材基础上对全书内容进行了修改、更新和充实。 在科…...

管理etcd的存储空间配额

如何管理etcd的存储空间配额 - 防止集群存储耗尽指南 本文基于etcd v3.4官方文档编写 为什么需要空间配额&#xff1f; 在分布式系统中&#xff0c;etcd作为可靠的键值存储&#xff0c;很容易成为系统瓶颈。当遇到以下情况时&#xff1a; 应用程序频繁写入大量数据未及时清理…...

深入浅出 NRM:加速你的 npm 包管理之旅

文章目录 前言一、NRM 是什么&#xff1f;二、为什么需要 NRM&#xff1f;三、NRM 的优势四、NRM 的安装与使用4.1 安装 NRM4.2 查看可用的 npm 源4.3 切换 npm 源4.4 测试 npm 源速度4.5 添加自定义 npm 源4.6 删除 npm 源 五、NRM 的进阶使用六、总结 前言 作为一名 JavaScr…...

ESP32开发学习记录---》GPIO

she 2025年2月5日&#xff0c;新年后决定开始充电提升自己&#xff0c;故作此记,以前没有使用过IDF开发ESP32因此新年学习一下ESP32。 ESPIDF开发环境配置网上已经有很多的资料了&#xff0c;我就不再赘述&#xff0c;我这里只是对我的学习经历的一些记录。 首先学习一个…...

stm32点灯 GPIO的输出模式

目录 1.选择RCC时钟 2.SYS 选择调试模式 SW 3.GPIO 配置 4.时钟树配置&#xff08; 默认不变&#xff09;HSI 高速内部时钟8Mhz 5.项目配置 6.代码 延时1s循环LED亮灭 1.选择RCC时钟 2.SYS 选择调试模式 SW 3.GPIO 配置 4.时钟树配置&#xff08; 默认不变&#xff09…...

[paddle] 矩阵的分解

特征值 设 A A A 是一个 n n n \times n nn 的方阵&#xff0c; λ \lambda λ 是一个标量&#xff0c; v \mathbf{v} v 是一个非零向量。如果满足以下方程&#xff1a; A v λ v A\mathbf{v} \lambda\mathbf{v} Avλv 则称 λ \lambda λ 为矩阵 A A A 的一个 特征值…...

【基于SprintBoot+Mybatis+Mysql】电脑商城项目之修改密码和个人资料

&#x1f9f8;安清h&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;【Spring篇】【计算机网络】【Mybatis篇】 &#x1f6a6;作者简介&#xff1a;一个有趣爱睡觉的intp&#xff0c;期待和更多人分享自己所学知识的真诚大学生。 目录 &#x1f383;1.修改密码 -持久…...

【深度学习】DataLoader自定义数据集制作

第一步 导包 import os import matplotlib.pyplot as plt %matplotlib inline import numpy as np import torch from torch import nn import torch.optim as optim import torchvision from torchvision import transforms,models,datasets import imageio import time impo…...

【Elasticsearch】Geo-distance聚合

geo_distance聚合的形状是圆形。它基于一个中心点&#xff08;origin&#xff09;和一系列距离范围来计算每个文档与中心点的距离&#xff0c;并将文档分配到相应的距离范围内。这种聚合方式本质上是以中心点为圆心&#xff0c;以指定的距离范围为半径的圆形区域来划分数据。 为…...

【R语言】apply函数族

在R语言中使用循环操作时是使用自身来实现的&#xff0c;效率较低。所以R语言有一个符合其统计语言出身的特点&#xff1a;向量化。R语言中的向量化运用了底层的C语言&#xff0c;而C语言的效率比高层的R语言的效率高。 apply函数族主要是为了解决数据向量化运算的问题&#x…...

Vue - shallowRef 和 shallowReactive

一、shallowRef 和 shallowReactive &#xff08;一&#xff09;shallowRef 在 Vue 3 中&#xff0c;shallowRef 是一个用于创建响应式引用的 API&#xff0c;它与 ref 相似&#xff0c;但它只会使引用的基本类型&#xff08;如对象、数组等&#xff09;表现为响应式&#xf…...

双目标定与生成深度图

基于C#联合Halcon实现双目标定整体效果 一&#xff0c;标定 1&#xff0c;标定前准备工作 &#xff08;获取描述文件与获取相机参数&#xff09; 针对标准标定板可以直接调用官方提供描述文件&#xff0c;也可以自己生成描述文件后用PS文件打印 2&#xff0c;相机标定 &…...

实名制-网络平台集成身份证实名认证接口/身份证查询-PHP

在当今数字化快速发展的时代&#xff0c;线上平台的安全性和用户体验成为了衡量其成功与否的关键因素。其中&#xff0c;身份证实名认证接口的集成显得尤为重要&#xff0c;它不仅为用户提供了更加安全、可靠的网络环境&#xff0c;同时也增强了平台的信任度和合规性。 对于任…...

全面解析机器学习优化算法中的进化策略

全面解析机器学习优化算法中的进化策略 全面解析机器学习优化算法中的进化策略引言什么是进化策略?基本概念核心组件算法流程数学基础高斯扰动期望值更新与其他优化方法的比较梯度下降法(Gradient Descent, GD)遗传算法(Genetic Algorithm, GA)Python案例基本实现改进版:…...