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

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

    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.lryc.cn/news/356478.html

相关文章:

  • Android UI:ViewTree: 监听
  • 【光伏干货】光伏无人机巡检步骤
  • 『大模型笔记』从头开始代码构建GPT!
  • idea的project structure下project [lauguage ]()level 没有java的sdk17选项如何导入
  • JavaScript数据类型与转换
  • 三十、openlayers官网示例解析Double click, Drag and Zoom——第二次点击鼠标拖拽缩放地图效果、取消地图双击放大事件
  • 前端基础入门三大核心之网络安全篇:TLS/SSL的魔法之旅
  • Flutter 中的 SnackBarAction 小部件:全面指南
  • Point-Nerf 理论笔记和理解
  • 深度学习中的梯度消失和梯度爆炸问题
  • Flink 通过 paimon 关联维表,内存降为原来的1/4
  • Python知识详解【1】~{正则表达式}
  • 装饰模式:鸡腿堡
  • 视图【mysql数据库】
  • opencv的findContours()函数
  • 多电压档hold扫尾
  • ABAP Json解析案例
  • QT学习(20):QStyle和自定义样式
  • 香橙派 AIpro 昇腾 Ascend C++ 分类模型适配
  • 2024吉林省电赛(达盛杯)
  • 【算法题】520 钻石争霸赛 2024 全解析
  • Yii 结合MPDF 给PDF文件添加多行水印
  • 你什么时候感觉学明白Java了?
  • 马斯克xAI融资60亿美元,宣布打造世界第一超算中心,10万张H100GPU
  • 贪心算法[1]
  • 卢文岩博士受邀参与中国科学院大学校友论坛 解码DPU核心价值
  • 2024年上半年软件设计师试题及答案(回忆版)
  • QGIS使用python代码导出给定坐标图片
  • 看花眼,眼花缭乱的主食冻干到底应该怎么选?靠谱的主食冻干分享
  • 开源VS闭源:谁更能推动AI技术的普及与发展?