使用 html2canvas 和 jspdf 将页面转 pdf,同时解决当页面过长时,页面白屏问题

代码如下,直接粘贴复制即可,代码中 jspdf 是全局引入,你可以自己局部引入

别人使用标签的方式来显示 base64,但是当页面过长时,base64 大小过大会导致页面解析异常,显示白屏

import html2canvas from 'html2canvas';export function printPdf(dom: HTMLElement | null) {// 1 dom 存在if (!dom) return;// 2 生成 canvashtml2canvas(dom, { useCORS: true, allowTaint: true }).then(function (canvas) {// document.body.appendChild(canvas);// return;// 1 canvas 宽高const contentWidth = canvas.width;const contentHeight = canvas.height;console.log('contentWidth contentHeight', contentWidth, contentHeight);// 2 一页 pdf 显示 html 页面生成的 canvas 高度const pageHeight = (contentWidth / 592.28) * 841.89;// 3 未生成 pdf 的 html 页面高度let leftHeight = contentHeight;// 4 pdf 页面偏移let position = 0;// 5 a4纸的尺寸 [595.28, 841.89],html 页面生成的 canvas 在 pdf 中图片的宽高const imgWidth = 595.28;const imgHeight = (592.28 / contentWidth) * contentHeight;const img = canvas.toDataURL('image/jpeg', 1.0);const pdf = new jspdf.jsPDF('', 'pt', 'a4');// 有两个高度需要区分,一个是html页面的实际高度,和生成 pdf 的页面高度(841.89)// 当内容未超过 pdf 一页显示的范围,无需分页if (leftHeight < pageHeight) {pdf.addImage(img, 'JPEG', 0, 0, imgWidth, imgHeight);} else {while (leftHeight > 0) {console.log(imgWidth, imgHeight, position, leftHeight);pdf.addImage(img, 'JPEG', 0, position, imgWidth, imgHeight);leftHeight -= pageHeight;position -= 841.89;// 避免添加空白页if (leftHeight > 0) {pdf.addPage();}}}// 6 挂载至页面const blob = dataURLtoBlob(pdf.output('datauristring'));console.log(blob);const url = window.URL.createObjectURL(blob); //获得一个pdf的url对象location.href = url;// window.open(url, '_blank')//打开一个新窗口// console.log(url);// URL.revokeObjectURL(url) //释放内存// const base64String = btoa(pdf.output());// const embed = `<embed type="application/pdf" src="data:application/pdf;base64, ${base64String}" width="100%" height="100%">`;// document.documentElement.style.overflow = 'hidden';// document.body.innerHTML = embed;});
}

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

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

相关文章

【Linux】常驻内核和虚拟内存的区别

常驻内存和虚拟内存是计算机内存管理的两个概念。 常驻内存指的是应用程序在运行时&#xff0c;所占用的内存空间不会随着应用程序的启动和关闭而有所变化&#xff0c;这种内存是常驻在计算机的物理内存中的。即使我们关闭了电脑&#xff0c;这些程序也会保持在内存中&#xf…

Rocky(centos)安装nginx并设置开机自启

一、安装nginx 1、安装依赖 yum install -y gcc-c pcre pcre-devel zlib zlib-devel openssl openssl-devel 2、去官网下载最新的稳定版nginx nginx: downloadhttp://nginx.org/en/download.html 3、将下载后的nginx上传至/usr/local下 或者执行 #2023-10-8更新 cd /usr/…

自动求导,计算图示意图及pytorch实现

pytorch实现 x1 torch.tensor(3.0, requires_gradTrue) y1 torch.tensor(2.0, requires_gradTrue) a x1 ** 2 b 3 * a c b * y1 c.backward() print(x1.grad) print(y1.grad) print(x1.grad 6 * x1 * y1) print(y1.grad 3 * (x1 ** 2))输出为&#xff1a; tensor(36.) …

数据库连接性比较:Navicat 和基于 Java 的工具

在数据库管理和开发领域&#xff0c;工具的选择可以极大地提高效率和生产力。基于Java的工具已成为强有力的竞争者&#xff0c;为数据库工作提供多样化的功能。然而&#xff0c;当谈及原生数据库连接性时&#xff0c;工具间的差异性可能会产生很大的影响。让我们一起来探索 Nav…

MyBatis(JavaEE进阶系列4)

目录 前言&#xff1a; 1.MyBatis是什么 2.为什么要学习MyBatis框架 3.MyBatis框架的搭建 3.1添加MyBatis框架 3.2设置MyBatis配置 4.根据MyBatis写法完成数据库的操作 5.MyBatis里面的增删改查操作 5.1插入语句 5.2修改语句 5.3delete语句 5.4查询语句 5.5like查…

Pytorch笔记之回归

文章目录 前言一、导入库二、数据处理三、构建模型四、迭代训练五、结果预测总结 前言 以线性回归为例&#xff0c;记录Pytorch的基本使用方法。 一、导入库 import numpy as np import matplotlib.pyplot as plt import torch from torch.autograd import Variable # 定义求…

web基础及http协议

web基础 全称 world wide web 全球广域网也就是万维网 web1.0 只能看 web2.0 页面交互&#xff1a;静态页面和动态页面 静态页面url&#xff1a;文本文件&#xff0c;可以修改&#xff0c;一般以html .htm保存的文本文件。网站的基础。静态页面和后台数据库没有任何交互不包含…

阿里云/腾讯云国际站:私服服务器:什么是游戏虚拟服务器及用途讲解?

游戏虚拟服务器是一种新兴的技术&#xff0c;它可以为玩家提供更好的游戏体验。私服服务器它可以将游戏服务器的负载分散到多台服务器上&#xff0c;从而提高游戏的流畅度和稳定性。此外&#xff0c;游戏虚拟服务器还可以提供更多的游戏功能&#xff0c;比如游戏聊天室、游戏排…

如何下载IEEE Journal/Conference/Magazine的LaTeX/Word模板

当你准备撰写一篇学术论文或会议论文时&#xff0c;使用IEEE&#xff08;电气和电子工程师协会&#xff09;的LaTeX或Word模板是一种非常有效的方式&#xff0c;它可以帮助你确保你的文稿符合IEEE出版的要求。无论你是一名研究生生或一名资深学者&#xff0c;本教程将向你介绍如…

一站式工单系统哪家好?一站式工单系统有什么特点?

伴随着高新科技的不断发展和行业竞争的加重&#xff0c;对于一站式工单系统这一类的公司服务系统软件有着越来越多的流程规定和可靠性的要求。一个比较完善的智能化一站式工单系统包含众多的流程&#xff0c;并适用更广泛性的企业信息化&#xff0c;接下来我们将一起看看一站式…

如何才能在Ubuntu系统部署RabbitMQ服务器并公网访问

在Ubuntu系统上部署RabbitMQ服务器并公网访问&#xff0c;可以按照以下步骤进行&#xff1a; 安装RabbitMQ服务器&#xff1a; 在终端中输入以下命令安装RabbitMQ服务器&#xff1a; sudo apt-get update sudo apt-get install rabbitmq-server启动RabbitMQ服务器&#xff1a; …

数字孪生与GIS数据为何高度互补?二者融合后能达到什么样的效果?

山海鲸可视化作为一款数字孪生软件&#xff0c;在GIS的融合方面处于业内领先水平&#xff0c;那么为什么一款数字孪生软件要花费巨大的精力&#xff0c;去实现GIS的融合&#xff0c;实现后又能达到什么样的效果呢&#xff1f;下面就让我们来一探究竟。 一、为什么数字孪生需要…

iview表格 异步修改列数据卡顿 滚动条失效

使用表格row-key属性 将row-key属性设置为true <Table ref"table" border :row-key"true" :columns"tableColumns" :loading"loading":data"tableData"></Table>

Java之UDP,TCP的详细解析

练习四&#xff1a;文件名重复 public class UUIDTest { public static void main(String[] args) { String str UUID.randomUUID().toString().replace("-", ""); System.out.println(str);//9f15b8c356c54f55bfcb0ee3023fce8a } } public class Client…

【K8S系列】深入解析k8s 网络插件—kube-router

序言 做一件事并不难&#xff0c;难的是在于坚持。坚持一下也不难&#xff0c;难的是坚持到底。 文章标记颜色说明&#xff1a; 黄色&#xff1a;重要标题红色&#xff1a;用来标记结论绿色&#xff1a;用来标记论点蓝色&#xff1a;用来标记论点 在现代容器化应用程序的世界中…

java最优建树算法

建树算法 树的数据结构 {"code": "1111","name": "","parentcode": "0000","children": null }, {"code": "2222","name": "","parentcode": &q…

面试算法19:最多删除一个字符得到回文

题目 给定一个字符串&#xff0c;请判断如果最多从字符串中删除一个字符能不能得到一个回文字符串。例如&#xff0c;如果输入字符串"abca"&#xff0c;由于删除字符’b’或’c’就能得到一个回文字符串&#xff0c;因此输出为true。 分析 本题还是从字符串的两端…

Tomcat隔离web原理和热加载热部署

Tomcat 如何打破双亲委派机制 Tomcat 的自定义类加载器 WebAppClassLoader 打破了双亲委派机制&#xff0c;它首先自己尝试去加载某个类&#xff0c;如果找不到再代理给父类加载器&#xff0c;其目的是优先加载 Web 应用自己定义的类。具体实现就是重写 ClassLoader 的两个方法…

SpringBoot全局异常处理 | Java

⭐简单说两句⭐ 作者&#xff1a;后端小知识 CSDN个人主页&#xff1a;后端小知识 &#x1f50e;GZH&#xff1a;后端小知识 &#x1f389;欢迎关注&#x1f50e;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; 文章目录 ✨SpringBoot全局异常处理 | Java&#x1f3a8;什么是全局…

CAXA汇总尺寸避免混乱

把单图的尺寸名称全部重命名