页面导出PDF,非可视区域如何解决

news/2024/7/22 1:21:22/文章来源:https://blog.csdn.net/weixin_48659263/article/details/139273823
    const exportToPDF = () => {const element = document.getElementById('chart-container');if (!element) return;const originalScrollHeight = element.scrollHeight;// 临时解除滚动条限制,确保所有内容都可见element.style.height = `${originalScrollHeight}px`;// 使用html2canvas将元素转换为Canvashtml2canvas(element).then(canvas => {// 恢复元素的原始样式element.style.overflow = 'auto';element.style.height = '';// 创建一个新的jsPDF实例const pdf = new jsPDF('p', 'mm', 'a4');// 将Canvas内容添加到PDFconst imgData = canvas.toDataURL('image/png', 1.0);const pdfWidth = pdf.internal.pageSize.getWidth();const pdfHeight = pdf.internal.pageSize.getHeight();const imgProps = pdf.getImageProperties(imgData);const scale = Math.min(pdfWidth / imgProps.width, pdfHeight / imgProps.height);const width = imgProps.width * scale;const height = imgProps.height * scale;// 添加图片到PDF,可能需要调整位置和尺寸以适应页面pdf.addImage(imgData, 'PNG', 0, 0, width, height);// 保存PDFpdf.save('exported.pdf');});};

总儿言之:

导出的时候需要将元素的高度改成页面完全渲染出的高度,确保所有内容是可见的;导出后再将高度修改成原来的样子;

但是这块有个高度变化的过程效果不是很好,尝试了其它方案,最终无功而返;

已知:

给元素设置visibility: ‘hidden’、position: ‘absolute’、opacity: 0;会导致导出的pdf是空白的;可能是插件不支持这些样式设置。

如有更好的方式及插件,欢迎分享(前端实现)。

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

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【ai】LiveKit Agent 的example及python本地开发模式工程实例

title: ‘LiveKit Agent Playground’ playgroundLiveKit Community playground的环境变量:LiveKit API # LiveKit API Configuration LIVEKIT_API_KEYYOUR_API_KEY LIVEKIT_API_SECRETYOUR_API_SECRET# Public configuration NEXT_PUBLIC_LIVEKIT_URLwss://YOUR_…

论文阅读笔记:Task-Customized Mixture of Adapters for General Image Fusion

论文阅读笔记:Task-Customized Mixture of Adapters for General Image Fusion 1 背景2 创新点3 方法4 模块4.1 任务定制混合适配器4.2 提示生成4.3 提示驱动融合4.4 互信息正则化MIR4.5 任务定制化损失 5 实验5.1 VIF任务5.2 MEF任务5.3 MFF任务5.4 消融实验5.5 性…

IDEA社区版创建并运行maven管理的web项目的基本流程

一、前言 注意,这是社区版,旗舰版可以绕路。 二、过程 1、下载安装社区版 2、安装jdk,tomcat,maven 3、创建并启动项目 注意选择的骨架是maven-archetype-webapp,然后next,设置项目名,存放…

5.27作业

定义自己的命名空间my_sapce&#xff0c;在my_sapce中定义string类型的变量s1&#xff0c;再定义一个函数完成对字符串的逆置。 #include <iostream> #include <string.h>using namespace std; namespace my_space {string s1;void RevString(string &s1); } v…

香橙派 AIpro开发板初上手

一、香橙派 AIpro开箱 最近拿到了香橙派 AIpro&#xff08;OrangePi AIpro&#xff09;&#xff0c;下面就是里面的板子和相关的配件。包含主板、散热组件、电源适配器、双C口电源线、32GB SD卡。我手上的这个是8G LPDDR4X运存的版本。 OrangePi AIpro开发板是一款由香橙派与华…

操作系统实验--终极逃课方法

找到图片里的这个路径下的文件 &#xff0c;结合当前题目名称&#xff0c;把文件内容全部删除&#xff0c;改为print print的内容为下图左下角的预期输出的内容

Java入门基础学习笔记43——包

什么是包&#xff1f; 包是用来分门别类的管理各种不同程序的&#xff0c;类似文件夹&#xff0c;建包有利于程序的管理和维护。 建包的语法规则&#xff1a; package cn.ensource.javabean;public class Car() {} 在自己的程序中调用其他包下的程序的注意事项&#xff1a; 1…

若依ruoyi-vue element-ui 横向滚动条 动态横向滚动条

动态横向滚动条 因为每次横向滑动都要到底部&#xff0c;引入插件 https://github.com/mizuka-wu/el-table-horizontal-scroll //动态横向滚动条移入样式 .el-table-horizontal-scrollbar :hover{//高度 变大10%transform: scaleY(1.5) translateY(-10%);//百分之八十亮度&a…

大模型时代的具身智能系列专题(四)

google deepmind团队 谷歌旗下最大的两个 AI 研究机构——地处伦敦 DeepMind 与位于硅谷的 Google Brain 合并成立新部门 Google DeepMind。其将机器学习和系统神经科学的最先进技术结合起来&#xff0c;建立强大的通用学习算法。代表作有AlphaGo&#xff0c;AlphaStar&#x…

编程零基础,如何学习Python?

初学者选择Python入手着实是一个不错的方向&#xff0c;入手简单且广泛的运用是它最显著的特色了。 那有几个问题&#xff0c;我想是开始学习Python之前应该了解的&#xff0c; python能做什么&#xff1f; 发展前景与工作机会有哪些&#xff1f; 需要学习哪些内容&#xf…

【多态】(超级详细!)

【多态】&#xff08;超级详细&#xff01;&#xff09; 前言一、 多态的概念二、重写1. 方法重写的规则2. 重写和重载的区别 三、多态实现的条件四、 向上转型五、动态绑定 前言 面向对象的三大特征&#xff1a;封装性、继承性、多态性。 extends继承或者implements实现&…

Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 &#x1f44b; 引言&#x1f4cc; Vuex 基础知识核心构成要素示例代码 &#x1f4cc; Pinia 基础知识核心构成要素示例代码 &#x1f4cc; Vuex与Pinia的区别&#x1f4cc; 使用示例与对比&#x1f4cc; 总结 &#x1f44b;…

60. UE5 RPG 使用场景查询系统(EQS,Environment Query System)实现远程敌人寻找攻击位置

UE的Environment Query System&#xff08;EQS&#xff09;是环境查询系统&#xff0c;它是UE4和UE5中用于AI决策制定过程中的数据采集和处理的一个强大工具。EQS可以收集场景中相关的数据&#xff0c;利用生成器&#xff08;Generator&#xff09;针对用户的测试&#xff08;T…

Spring6基础笔记

Spring6 Log4j2 1、概述 1.1、Spring是什么&#xff1f; Spring 是一款主流的 Java EE 轻量级开源框架 &#xff0c;Spring 由“Spring 之父”Rod Johnson 提出并创立&#xff0c;其目的是用于简化 Java 企业级应用的开发难度和开发周期。Spring的用途不仅限于服务器端的开发…

列表、元组、字典和集合的区别

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 在前面介绍了序列中的列表、元组、字典和集合的应用&#xff0c;下面通过表2对这几个数据序列进行比较。 表2 列表、元组、字典和集合的区别 数 据…

985上交应届生转正12天,被某东辞退了!

&#x1f447;我的小册 45章教程:(小白零基础用Python量化股票分析小册) ,原价299&#xff0c;限时特价2杯咖啡&#xff0c;满100人涨10元。 01.事情起源 最近粉丝群都在转发一个截图&#xff0c;某应届毕业生在某东实习一年&#xff0c;才转正才12天&#xff0c;就因为自己调侃…

关于c++的通过cin.get()维持黑框的思考

1.前言 由于本科没有学过c语言&#xff0c;研究生阶段接触c上手有点困难&#xff0c;今天遇到关于通过cin.get()来让黑框维持的原因。 2.思考 cin.get()维持黑框不消失的原因一言蔽之就是等待输入。等待键盘的输入内容并回车&#xff08;一般是回车&#xff09;后cin.get()才…

ssm球场计费管理系统-计算机毕业设计源码77275

摘 要 大数据时代下&#xff0c;数据呈爆炸式地增长。为了迎合信息化时代的潮流和信息化安全的要求&#xff0c;利用互联网服务于其他行业&#xff0c;促进生产&#xff0c;已经是成为一种势不可挡的趋势。在球馆计费管理的要求下&#xff0c;开发一款整体式结构的球场计费管理…

部署Prometheus + Grafana实现监控数据指标

1.1 Prometheus安装部署 Prometheus监控服务 主机名IP地址系统配置作用Prometheus192.168.110.27/24CentOS 7.94颗CPU 8G内存 100G硬盘Prometheus服务器grafana192.168.110.28/24CentOS 7.94颗CPU 8G内存 100G硬盘grafana服务器 监控机器 主机名IP地址系统配置k8s-master-0…

BIO/NIO学习

在传送文件的时候常常出现这么一个问题&#xff0c;就是当客户端的文件全部传送完了之后&#xff0c;服务器没有接收到客户端那边传过的停止信号&#xff0c;所以服务器也就跟着客户端停止运行了&#xff0c;我们可以使用 try {socket.shutdownOutput();} catch (IOException e…