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

react+html2canvas+jspdf将页面导出pdf

news 来源：原创 2025/6/28 7:08:05

主要使用html2canvas+jspdf
1.将前端页面导出为pdf
2.处理导出后图表的截断问题

export default function AIReport() {const handleExport = async () => {try {// 需要导出的内容idconst element = document.querySelector('#AI-REPORT-CONTAINER');if (!element) {message.error('未找到要导出的内容');return;}message.loading({ content: '正在导出PDF...', key: 'export' });// 使用html2canvas生成整个报告的画布const canvas = await html2canvas(element as HTMLElement, {scale: 2, // 提高清晰度useCORS: true,allowTaint: true,backgroundColor: '#ffffff',logging: false,});// 创建PDF对象const pdf = new jsPDF({orientation: 'p', // 纵向unit: 'pt', // 使用点作为单位format: 'a4', // A4纸张});// 获取A4页面尺寸const a4Width = pdf.internal.pageSize.getWidth();const a4Height = pdf.internal.pageSize.getHeight();// 计算等比例下A4高度对应的canvas高度const a4HeightInCanvas = Math.floor((canvas.width / a4Width) * a4Height);// 获取canvas的总高度let leftHeight = canvas.height;// PDF页面偏移量let position = 0;// 创建临时canvas用于分页const tempCanvas = document.createElement('canvas');const ctx = tempCanvas.getContext('2d');// 递归处理每一页const processNextPage = () => {if (leftHeight <= 0) {// 完成所有页面处理，保存并下载PDFconst pdfOutput = pdf.output('blob');const url = URL.createObjectURL(pdfOutput);const link = document.createElement('a');link.href = url;link.download = `AI基金报告_${data?.title || '未命名'}_${data?.date || ''}.pdf`;document.body.appendChild(link);link.click();document.body.removeChild(link);URL.revokeObjectURL(url);message.success({ content: 'PDF导出成功', key: 'export' });return;}// 计算当前页的高度let currentPageHeight;if (leftHeight > a4HeightInCanvas) {// 需要寻找合适的分页点let cutPoint = position + a4HeightInCanvas;let isFound = false;// 向上搜索连续的空白行作为分页点let checkCount = 0;for (let y = position + a4HeightInCanvas; y >= position; y--) {let isBlankLine = true;// 检查这一行的像素是否全为白色for (let x = 0; x < canvas.width; x += 10) {// 每10个像素采样一次提高性能const pixelData = canvas?.getContext('2d')?.getImageData(x, y, 1, 1).data;// 检查像素是否接近白色（允许一些误差）if (pixelData?.[0] < 250 ||pixelData?.[1] < 250 ||pixelData?.[2] < 250) {isBlankLine = false;break;}}if (isBlankLine) {checkCount++;// 找到连续10行空白，确定为分页点if (checkCount >= 10) {cutPoint = y;isFound = true;break;}} else {checkCount = 0;}}// 如果没找到合适的分页点，就使用默认值currentPageHeight = isFound? Math.round(cutPoint - position): Math.min(leftHeight, a4HeightInCanvas);// 确保高度不为0if (currentPageHeight <= 0) {currentPageHeight = a4HeightInCanvas;}} else {// 最后一页，直接使用剩余高度currentPageHeight = leftHeight;}// 设置临时canvas的尺寸tempCanvas.width = canvas.width;tempCanvas.height = currentPageHeight;// 将原canvas对应部分绘制到临时canvasctx?.drawImage(canvas,0,position,canvas.width,currentPageHeight,0,0,canvas.width,currentPageHeight,);// 从第二页开始添加新页面if (position > 0) {pdf.addPage();}// 将当前页添加到PDFpdf.addImage(tempCanvas.toDataURL('image/jpeg', 1.0),'JPEG',0,0,a4Width,(a4Width / tempCanvas.width) * currentPageHeight,);// 更新剩余高度和位置leftHeight -= currentPageHeight;position += currentPageHeight;// 处理下一页setTimeout(processNextPage, 100);};// 开始处理页面processNextPage();} catch {message.error({ content: '导出PDF失败，请稍后重试', key: 'export' });}};return (<Spin spinning={loading} wrapperClassName={styles.spinWrapper}><div className={styles.exportBtn}><Button type="primary" onClick={handleExport}>导出PDF</Button></div><div className={styles.container} id="AI-REPORT-CONTAINER">这里为需要导出的页面内容，table，echart等</div></Spin>);
}

react+html2canvas+jspdf将页面导出pdf

主要使用html2canvasjspdf 1.将前端页面导出为pdf 2.处理导出后图表的截断问题 export default function AIReport() {const handleExport async () > {try {// 需要导出的内容idconst element document.querySelector(#AI-REPORT-CONTAINER);if (!element) {message.err…...

编程日记 2025/6/28 7:08:05

Spring Boot 自动装配技术方案书

Spring Boot 自动装配技术方案书（增强版）一、Spring Boot 自动装配体系全景解析 1.1 核心设计理念 “约定优于配置”：通过合理的默认配置减少开发工作量“即插即用”：通过标准化扩展机制实现组件自动集成“分层解耦”：业务代码与基础设施分离，通过SPI机制实现扩展二、组…...

编程日记 2025/6/25 1:29:44

面试--HTML

1.src和href的区别总结来说： <font style"color:rgb(238, 39, 70);background-color:rgb(249, 241, 219);">src</font>用于替换当前元素，指向的资源会嵌入到文档中，例如脚本、图像、框架等。<font style"co…...

编程日记 2025/6/22 14:11:38

（3）python开发经验

文章目录 1 sender返回对象找不到函数2 获取绝对路径3 指定翻译字符更多精彩内容👉内容导航 👈👉Qt开发 👈👉python开发 👈 1 sender返回对象找不到函数在PySide6中多个信号绑定一个槽函数，使…...

编程日记 2025/6/23 12:30:22

机密虚拟机的威胁模型

本文将介绍近年兴起的机密虚拟机（Confidential Virtual Machine）技术所旨在抵御的威胁模型，主要关注内存机密性（confidentiality）和内存完整性（integrity）两个方面。在解释该威胁可能造成的问题…...

编程日记 2025/6/25 14:27:45

LLM笔记（一）基本概念

LLMs from scratch Developing an LLM: Building, Training, Finetuning LLM 的基本概念与定义: LLM是深度神经网络模型，能够理解、生成和解释类似人类的语言。“大型”指的是模型参数数量巨大以及训练数据集的规模庞大。LLM通常基于Transformer架构，并通…...

编程日记 2025/6/25 21:11:34

嵌入式（c语言篇）Day9

嵌入式Day9 C语言字符串标准库函数笔记一、概述 C语言提供了一系列字符串标准库函数用于处理字符串，使用这些函数需要包含头文件 <string.h>。主要函数包括求字符串长度、字符串复制、字符串拼接和字符串比较等。我们不仅要理解这些函数的行为&#xff0c…...

编程日记 2025/6/26 7:03:06

006-nlohmann/json 结构转换-C++开源库108杰

绝大多数情况下，程序和外部交换的数据，都是结构化的数据。 1. 手工实现——必须掌握的基本功在的业务类型的同一名字空间下，实现 from_json 和 to_json 两个自由函数（必要时，也可定义为类型的友元函数）&a…...

编程日记 2025/6/25 5:53:29

b站视频如何下载到电脑——Best Video下载器

你是不是也经常在B站刷到超赞的视频，想保存到电脑慢慢看，却发现下载不了？别急，今天教你一个超简单的方法，轻松下载B站视频到电脑，高清画质，随时随地想看就看！ 为什么需要下载B站视频…...

编程日记 2025/6/24 7:56:38

【行为型之模板方法模式】游戏开发实战——Unity标准化流程与可扩展架构的核心实现

文章目录 🧩 模板方法模式（Template Method Pattern）深度解析一、模式本质与核心价值二、经典UML结构三、Unity实战代码（关卡流程系统）1. 定义抽象模板类2. 实现具体子类3. 客户端使用四、模式进阶技巧1. 钩子方法&am…...

编程日记 2025/6/26 13:14:33

每日算法-250514

每日算法学习记录 (2024-05-14) 今天记录三道 LeetCode 算法题的解题思路和代码。 1. 两数之和题目截图: 解题思路这道题要求我们从一个整数数组中找出两个数，使它们的和等于一个给定的目标值 target，并返回这两个数的下标。核心思路是使用哈希…...

编程日记 2025/6/25 8:29:18

信息安全入门基础知识

信息安全是保护信息系统和数据免受未经授权的访问、使用、披露、中断、修改或破坏的实践。对于个人和组织来说,了解信息安全的基础知识至关重要。 1. CIA三元组信息安全的三个主要目标,也称为CIA三元组: 机密性(Confidentiality): 确保信息不被未经授权的人访问或披露完整性…...

编程日记 2025/6/26 4:41:18

力扣-98.验证二叉搜索树

题目描述给你一个二叉树的根节点 root ，判断其是否是一个有效的二叉搜索树。有效二叉搜索树定义如下： 节点的左子树只包含小于当前节点的数。节点的右子树只包含大于当前节点的数。所有左子树和右子树自身必须也是二叉搜索树。 class Solutio…...

编程日记 2025/6/24 22:14:42

Java 框架配置自动化：告别冗长的 XML 与 YAML 文件

在 Java 开发领域，框架的使用极大地提升了开发效率和系统的稳定性。然而，传统框架配置中冗长的 XML 与 YAML 文件，却成为开发者的一大困扰。这些配置文件不仅书写繁琐，容易出现语法错误，而且在项目规模扩大时&#xff…...

编程日记 2025/6/25 8:31:46

大疆无人机自主飞行解决方案局限性及增强解决方案-AIBOX：特色行业无人机巡检解决方案

大疆无人机自主飞行解决方案局限性及增强解决方案-AIBOX：特色行业无人机巡检解决方案大疆无人机是低空行业无人机最具性价比的产品，尤其是大疆机场3的推出，以及持续自身产品升级迭代，包括司空2、大疆智图以及大疆智运等专业软件和…...

编程日记 2025/6/24 12:45:03

【机器人】复现 SG-Nav 具身导航 | 零样本对象导航的在线3D场景图提示

SG-Nav提出了一种新的零样本物体导航框架，用三维场景图来表示观察到的场景。并设计了一个分层的思路链提示，帮助LLM通过遍历节点和边，根据场景上下文推理目标位置。本文分享SG-Nav复现和模型推理的过程～ 下面是一个查找椅子示…...

编程日记 2025/6/26 12:27:15

详细说说Spring的IOC机制

Spring 的 IOC（控制反转）是框架的核心机制，用于管理对象的创建和依赖注入，通过将控制权从应用程序代码转移到容器，实现组件间的解耦。以下是详细解析： 1. IOC 核心概念控制反转（Inversion of C…...

编程日记 2025/5/22 21:47:47

Android Activity之间跳转的原理

一、Activity跳转核心流程‌ Android Activity跳转的底层实现涉及 ‌系统服务交互‌、‌进程间通信（IPC）‌ 和 ‌生命周期管理‌，主要流程如下： ‌startActivity() 触发请求‌ 应用调用 startActivity() 时，通过 Inst…...

编程日记 2025/6/23 10:27:33

第二个五年计划！

下一阶段！5年后！33岁！体重维持在125斤内！腰围74！ 健康目标： 体检指标正常，结节保持较小甚至变小！ 工作目标： 每年至少在一次考评里拿A（最高S，A我理…...

编程日记 2025/5/23 7:02:52

交易所功能设计的核心架构与创新实践

交易所功能设计的核心架构与创新实践 ——从用户体验到安全合规的全维度解析一、核心功能模块：构建交易生态的四大支柱 1. 用户账户管理多因子身份验证：集成邮箱/手机注册、谷歌验证器（2FA）、活体检测（误识率<0…...

编程日记 2025/5/29 10:31:16

Windows10安装WSA

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、WSAOnWin10二、安装1.第一种方法2.第二种方法总结前言有时候工作需要用到WSA，然而我们的电脑是Windows10的不能直接安装。接下来我就教你们…...

编程日记 2025/6/26 21:00:04

标签部件(lv_label)

一、如何创建标签部件以及设置文本？ 知识点1：如何创建标签部件 lv_obj_t *label lv_label_create(parent); 知识点2：设置文本的3种方式 ①直接设置文本，存储文本的内存动态分配：lv_label_set_text(label,"he…...

编程日记 2025/6/24 14:02:01

Spring中的循环引用

循环依赖发生在两个或两个以上的bean互相持有对方，形成闭环。Spring框架允许循环依赖存在，并通过三级缓存解决大部分循环依赖问题： 一级缓存：单例池，缓存已完成初始化的bean对象。二级缓存：缓存尚未完成生…...

编程日记 2025/6/25 4:48:19

技术选型不当，如何避免影响项目进展

建立选型评估机制、综合考虑业务与技术匹配度、引入技术决策审查流程、做好选型后的风险预案与替代方案准备是避免因技术选型不当影响项目进展的关键措施。尤其要重视建立选型评估机制，通过全流程、数据化、多维度的评估体系，确保所选技术能在性能、可维…...

编程日记 2025/6/24 17:06:15

图表制作-基础饼图

首先登录自己的账号，没有账号的可以注册一个。登录之后，在左侧菜单栏找到图表制作-统计图。点击新建统计图，点击饼图-基础饼图。初始会有一些演示数据，可以根据自己的需要进行修改。如果嫌手动修改太麻烦，可以导入…...

编程日记 2025/6/24 19:22:50

Java 大视界 -- 基于 Java 的大数据分布式存储在工业互联网海量设备数据长期存储中的应用优化（248）

往期文章推荐： 《大数据新视界》和《 Java 大视界》专栏： Java 大视界 – Java 大数据在智能教育自适应学习路径动态调整中的应用与实践（247）(最新）Java 大视界 – Java 大数据在智能安防生物特征识别系统中的多模态…...

编程日记 2025/6/25 11:40:57

如何恢复被勒索软件加密的服务器文件（解密与备份策略）

针对勒索软件加密文件的恢复和解密策略，结合当前数据安全最佳实践，整理应对指南如下： 一、文件解密与修复方法立即隔离设备‌ 断开网络连接并禁用共享功能，防止病毒横向传播通过文件后缀异常（如.locked、.wxx&…...

编程日记 2025/6/27 7:28:52

Java知识框架

一、Java 基础语法 1. 基础语法数据类型基本类型：int, double, boolean, char 等引用类型：String, 数组, 对象变量与常量 final 关键字作用域（局部变量、成员变量） 运算符算术、逻辑、位运算三元运算符 ? : 控制…...

编程日记 2025/6/24 23:28:29

腾讯云-人脸核身+人脸识别教程

一。产品概述慧眼人脸核身特惠活动腾讯云慧眼人脸核身是一组对用户身份信息真实性进行验证审核的服务套件，提供人脸核身、身份信息核验、银行卡要素核验和运营商类要素核验等各类实名信息认证能力，以解决行业内大量对用户身份信息真实性核实的需求&a…...

编程日记 2025/6/27 9:34:41

102. 二叉树的层序遍历递归法：深度优先搜索的巧妙应用

二叉树的层序遍历是一种经典的遍历方式，它要求按层级逐层访问二叉树的节点。通常我们会使用队列来实现层序遍历，但递归法也是一种可行且有趣的思路。本文将深入探讨递归法解决二叉树层序遍历的核心难点，并结合代码和模拟过程进行详细讲解。 …...

编程日记 2025/6/27 7:44:13

电脑内存智能监控清理，优化性能的实用软件

软件介绍 Memory cleaner是一款内存清理软件。功能很强，效果很不错。 Memory cleaner会在内存用量超出80%时，自动执行“裁剪进程工作集”“清理系统缓存”以及“用全部可能的方法清理内存”等操作，以此来优化电脑性能。同时，我…...

编程日记 2025/6/24 4:31:04

Chrome浏览器实验性API computePressure的隐私保护机制如何绕过？

一、computePressure API 设计原理与隐私保护机制 1.1 API 设计目标 computePressure是W3C提出的系统状态监控API，旨在： • 提供系统资源状态的抽象指标（非精确值） • 防止通过高精度时序攻击获取用户指纹 • 平衡开发者需求与用户隐私保护 1.2 隐私保护实现方式 // 典…...

编程日记 2025/6/24 22:42:26

开放传神创始人论道AI未来｜“广发证券—国信中数人工智能赛道专家交流论坛“落幕

4月25日，“广发证券—国信中数人工智能赛道专家交流论坛”在广发证券大厦成功举办。本次论坛由广发证券股份有限公司与北京国信中数投资管理有限公司联合主办，汇聚了人工智能领域的50多位企业、行业专家、专业投资机构的精英代表，旨在搭建产学…...

编程日记 2025/6/25 19:44:12

MySQL八股（自用）

MySQL 定位慢查询 1.聚合查询 2.多表查询 3.表数据量过大查询 4.深度分页查询 MySQL自带慢日志开启慢查询日志，配置文件（/etc/my.cnf） 开启慢日志，设置慢日志的时间用EXPLAIN或者DESC命令获取MySQL如何执行SELECT语句的信…...

编程日记 2025/6/26 1:14:47

2025年6月一区SCI-不实野燕麦优化算法Animated Oat Optimization-附Matlab免费代码

引言近年来，在合理框架内求解优化问题的元启发式算法的发展引起了全球科学界的极大关注。本期介绍一种新的元启发式算法——不实野燕麦优化算法Animated Oat Optimization algorithm，AOO。该算法模拟了不实野燕麦的3种独特行为，于2025年6月…...

编程日记 2025/6/26 3:54:30

如何开发一款 Chrome 浏览器插件

Chrome是由谷歌开发的网页浏览器，基于开源软件（包括WebKit和Mozilla）开发，任何人都可以根据自己需要使用、修改或增强它的功能。Chrome凭借着其优秀的性能、出色的兼容性以及丰富的扩展程序，赢得了广大用户的信任。市场…...

编程日记 2025/6/25 8:44:47

UniApp 微信小程序绑定动态样式 :style 避坑指南

在使用 UniApp 开发跨端应用时，绑定动态样式 :style 是非常常见的操作。然而，很多开发者在编译为微信小程序时会遇到一个奇怪的问题： 原本在 H5 中可以正常渲染的样式，在微信小程序中却不生效！ 让我们通过一个示例来…...

编程日记 2025/6/27 21:43:57

基于OpenCV中的图像拼接方法详解

文章目录引言一、图像拼接的基本流程二、代码实现详解1. 准备工作2. 特征检测与描述detectAndDescribe 函数详解（1）函数功能（2）代码解析（3）为什么需要这个函数？（4）输出数…...

编程日记 2025/6/23 18:08:49

【BUG】滴答定时器的时间片轮询与延时冲突

SysTick定时器实现延时与时间戳的深度分析与问题解决指南 1. SysTick基础原理 1.1 SysTick的功能与核心配置 SysTick是ARM Cortex-M内核的系统定时器，常用于以下场景： 时间戳：通过周期性中断记录系统运行时间（如tick_ms计数器&…...

编程日记 2025/6/23 17:27:06

基于EFISH-SCB-RK3576/SAIL-RK3576的智能快递分拣机技术方案‌

（国产化替代J1900的物流自动化解决方案） 一、硬件架构设计‌ ‌高速视觉识别系统‌ ‌多目立体成像‌： 双MIPI-CSI接入16K线阵相机（扫描速度5m/s），支持0.1mm级条形码破损识别NPU加速YOLOv7算法&#xff0…...

编程日记 2025/6/28 2:48:51

The 2022 ICPC Asia Xian Regional Contest(E,L)题解

E Find Maximum 题意： 首先，通过观察与打表，可以发现： 规律： 对于非负整数 x，函数 f(x) 的值等于： 将 xx 写成三进制后，各个位数的数字之和该三进制数的位数。例如&#xff0c…...

编程日记 2025/6/25 16:48:31

Jmeter 安装包与界面汉化

Jmeter 安装包： 通过网盘分享的文件：CSDN-apache-jmeter-5.5 链接: https://pan.baidu.com/s/17gK98NxS19oKmkdRhGepBA?pwd1234 提取码: 1234 Jmeter界面汉化：...

编程日记 2025/6/26 14:19:36

《Python星球日记》第70天：Seq2Seq 与Transformer Decoder

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊）目录一、Seq2Seq模型基础1. 什么是Seq2Seq模型？2. Encoder-Decoder架构详解1️⃣编码器(Encoder)2️⃣解码器(Decoder)3. 传统Seq2Seq模型的局限性…...

编程日记 2025/6/27 13:26:17

【Linux】基础指令（Ⅱ）

目录 1. mv指令 2. cat指令 3.echo指令补：输出重定向 4. more指令 5. less指令 6. head指令和tail指令 7.date指令时间戳： 8. cal指令 9. alias指令 10.grep指令 1. mv指令语法：mv [选项]... 源文件/目录目标文件/目录 …...

编程日记 2025/6/25 1:51:08

【Python3教程】Python3基础篇之输入与输出

博主介绍：✌全网粉丝23W+，CSDN博客专家、Java领域优质创作者，掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围：SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物联网、机器学习等设计与开发。感兴趣的可…...

编程日记 2025/6/27 12:55:15

mysql的一个缺点

最近再移植一个从oracle转mysql的项目，喜提一个报错： You cant specify target table A016 for update in FROM clause 对应的程序代码： public void setCurrent(String setId, String pk, String userId) throws SysException {String[]…...

编程日记 2025/6/26 11:57:27

【C/C++】高阶用法_笔记

1. 模板元编程（TMP）与编译时计算 (1) 类型萃取与 SFINAE 类型萃取（Type Traits）：利用模板特化在编译时推断类型属性。 template<typename T> struct is_pointer { static constexpr bool value false; };templ…...

编程日记 2025/6/24 22:13:34

AMS3xxi激光测距仪安装调试维护详解

一、应用原理介绍如下图，AMS3xxi激光测距发出的激光通过特定反光板返回后，利用“时间飞行法”原理进行距离测量。测量中若遮挡光束传播会导致测距失败，产品报警。二、固定和调节位置说明在安装板上，使用 4 个 M5 螺钉锁 AMS…...

编程日记 2025/6/26 1:14:57

建筑IT数字化突围：建筑设计企业的生存法则重塑

困局：铅笔与键盘的撕裂之痛晨光中的设计院里，总工老张的办公桌上堆叠着三摞图纸：左边是刚收尾的住宅施工图，中间夹着结构专业提资的变更单，右边是甲方连夜发来的方案调整意见。这是他从业28年来的日常，也…...

编程日记 2025/6/27 15:00:38

VTK|类似CloudCompare的比例尺实现2-vtk实现

文章目录实现类头文件实现类源文件调用逻辑关键问题缩放限制问题投影模式项目git链接实现类头文件以下是对你提供的 ScaleBarController.h 头文件添加详细注释后的版本，帮助你更清晰地理解每个成员和方法的用途，尤其是在 VTK 中的作用： #ifndef SCALEBARCONTROLLER_H #de…...

编程日记 2025/6/27 10:50:28

相关文章：