前端实现把整个页面转成PDF保存到本地(DOM转PDF)
一、问题
遇到一个需求,就是要把整个看板页面导出成PDF用在汇报,也就是要把整个DOM生成一个PDF保存到本地。
二、解决方法
1、解决思路:使用插件 jspdf 和 html2canvas,我用的版本如下图
2、代码实现
import { jsPDF } from 'jspdf'
import html2canvas from 'html2canvas'// 封装成一个公共的方法(核心代码)
export const htmlToPDF = async (htmlId: string, title: string, bgColor = "#fff") => {const pdfDom = document.getElementById(htmlId) as HTMLElement | null;if (!pdfDom) {console.error('Element not found');return '';}const scale = window.devicePixelRatio || 1; // 使用设备像素比来提高清晰度const canvas = await html2canvas(pdfDom, {scale: scale,useCORS: true,backgroundColor: bgColor,});const imgProps = canvas.toDataURL('image/png'); // 使用PNG格式提高质量const pdf = new jsPDF({orientation: 'portrait',unit: 'px',format: [595.28, 841.89], // A4尺寸(以像素为单位)});const imgPropsObj = pdf.getImageProperties(imgProps);const pdfWidth = 576; // A4宽度减去一些边距// 控制页面展示 调整这个98 防止出现空白页const pdfHeight = (imgPropsObj.height * pdfWidth) / imgPropsObj.width - 98;const pageHeight = 841.89; // A4页面的高度let heightLeft = pdfHeight; // 剩余高度let y = 0; // 当前Y坐标// 处理分页逻辑while (heightLeft > 0) {const imgHeight = Math.min(heightLeft, pageHeight); // 当前图像可显示的高度pdf.addImage(imgProps, 'PNG', 0, y, pdfWidth, imgHeight); // 添加图像heightLeft -= imgHeight; // 减去已添加的高度y += imgHeight; // 移动Y坐标if (heightLeft > 0) {pdf.addPage(); // 如果还有内容,则添加新页面}}// 生成并返回PDF文件pdf.save(title + '.pdf');const pdfUrl = window.URL.createObjectURL(new Blob([pdf.output('blob'), { type: 'application/pdf' }]));return pdfUrl;
};// 页面中调用 box:要转成pdf文件的盒子
<div id="box">
// 此处为你的页面内容
</div>
// 点击如下方法保存pdf
<button @click="fn">生产pdf</button>// htmlToPDF 第一个参数:要生成pdf文件的盒子id 第二个参数:生成pdf的文件名
const fn = ()=> {const pdfUrl = htmlToPDF("box", 'xxx.pdf')
}
相关文章:

前端实现把整个页面转成PDF保存到本地(DOM转PDF)
一、问题 遇到一个需求,就是要把整个看板页面导出成PDF用在汇报,也就是要把整个DOM生成一个PDF保存到本地。 二、解决方法 1、解决思路:使用插件 jspdf 和 html2canvas,我用的版本如下图 2、代码实现 import { jsPDF } from …...
Vue 3 学习文档(一)
最近打算做一个项目,涉及到一些前端的知识,因上一次接触前端已经是三四年前了,所以捡一些简单的功能做一下复习。 响应式函数:reactive 和 ref属性绑定:v-bind 和简写语法事件监听:v-on 和简写语法 双向绑…...

【适配】屏幕拖拽-滑动手感在不同分辨率下的机型适配
接到一个需求是类似下图的3D多房间视角,需要拖拽屏幕 问题 在做这种屏幕拖拽的时候发现,需要拖拽起来有跟手的感觉,会存在不同分辨率机型的适配问题。 即:美术调整好了机型1的手感,能做到手指按下顶层地板上下挪动&…...

牛客周赛 Round 69(A~E)
文章目录 A 构造C的歪思路code B 不要三句号的歪思路code C 仰望水面的歪思路code D 小心火烛的歪思路code E 喜欢切数组的红思路code 牛客周赛 Round 69 A 构造C的歪 思路 签到题,求出公差d,让最大的数加上公差d即可 code int a,b;cin >> a &…...

Spring Boot 实战:分别基于 MyBatis 与 JdbcTemplate 的数据库操作方法实现与差异分析
1. 数据库新建表 CREATE TABLE table_emp(id INT AUTO_INCREMENT,emp_name CHAR(100),age INT,emp_salary DOUBLE(10,5),PRIMARY KEY(id) );INSERT INTO table_emp(emp_name,age,emp_salary) VALUES("tom",18,200.33); INSERT INTO table_emp(emp_name,age,emp_sala…...

【jmeter】服务器使用jmeter压力测试(从安装到简单压测示例)
一、服务器上安装jmeter 1、官方下载地址,https://jmeter.apache.org/download_jmeter.cgi 2、服务器上用wget下载 # 更新系统 sudo yum update -y# 安装 wget 以便下载 JMeter sudo yum install wget -y# 下载 JMeter 压缩包(使用 JMeter 官方网站的最…...

使用Python实现自动化邮件通知:当长时程序运行结束时
使用Python实现自动化邮件通知:当长时程序运行结束时 前提声明 本代码仅供学习和研究使用,不得用于商业用途。请确保在合法合规的前提下使用本代码。 目录 引言项目背景项目设置代码分析 导入所需模块定义邮件发送函数发送邮件 实现步骤结语全部代码…...
框架学习07 - SpringMVC 其他功能实现
一. 拦截器实现HandlerInterceptor 接⼝ SpringMVC 中的 Interceptor 拦截器也是相当重要和相当有⽤的,它的主要作⽤是拦截⽤户的请求并进⾏相应的处理。⽐如通过它来进⾏权限验证,或者是来判断⽤户是否登陆等操作。对于 SpringMVC 拦截器的定义⽅式有两…...

NAT:连接私有与公共网络的关键技术(4/10)
一、NAT 的工作原理 NAT 技术的核心功能是将私有 IP 地址转换为公有 IP 地址,使得内部网络中的设备能够与外部互联网通信。其工作原理主要包括私有 IP 地址到公有 IP 地址的转换、端口号映射以及会话表维护这几个步骤。 私有 IP 地址到公有 IP 地址的转换࿱…...

RabbitMQ2:介绍、安装、快速入门、数据隔离
欢迎来到“雪碧聊技术”CSDN博客! 在这里,您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者,还是具有一定经验的开发者,相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导,我将…...

衡山派D133EBS 开发环境安装及SDK编译烧写镜像烧录
1.创建新文件夹,用来存放SDK包(其实本质就是路径要对就ok了),右键鼠标通过Open Git Bash here来打开git 输入命令 git clone --depth1 https://gitee.com/lcsc/luban-lite.git 来拉取,如下所示:࿰…...

【Spring MVC】如何获取cookie/session以及响应@RestController的理解,Header的设置
前言 🌟🌟本期讲解关于SpringMVC的编程之参数传递~~~ 🌈感兴趣的小伙伴看一看小编主页:GGBondlctrl-CSDN博客 🔥 你的点赞就是小编不断更新的最大动力 🎆那么废…...

C++设计模式行为模式———策略模式
文章目录 一、引言二、策略模式三、总结 一、引言 策略模式是一种行为设计模式, 它能让你定义一系列算法, 并将每种算法分别放入独立的类中, 以使算法的对象能够相互替换。与模板方法模式类似,都是以扩展的方式来支持未来的变化。…...
Spring Cloud 中 bootstrap.yml 配置文件详解
Spring Cloud 中 bootstrap.yml 配置文件详解 1. 什么是 bootstrap.yml? bootstrap.yml 是 Spring Cloud 提供的一个特殊配置文件,主要用于初始化 Spring Cloud 应用程序的环境。与常见的 application.yml 不同,bootstrap.yml 在 Spring 应用…...

Java项目实战II基于SpringBoot前后端分离的网吧管理系统(开发文档+数据库+源码)
目录 一、前言 二、技术介绍 三、系统实现 四、核心代码 五、源码获取 全栈码农以及毕业设计实战开发,CSDN平台Java领域新星创作者,专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 随着互联网技术的不断发展…...
ASP网络安全讲述
一 前言 Microsoft Active Server Pages(ASP)是服务器端脚本编写环境,使用它可以创建和运行动态、交互的 Web 服务器应用程序。使用 ASP 可以组合 HTML 页 、脚本命令和 ActiveX 组件以创建交互的 Web 页和基于 Web 的功能强大的应用程序…...

DFS 创建分级菜单
菜单级别不确定,想要自适应,且可以折叠的菜单。 数据是一个数组。 <template><div class"Level" ref"Level"></div> </template>import {ref} from vue export default{data(){Level:ref(null),menuData…...

HDU Go Running(最小点覆盖 + 网络流优化)
题目大意:有一条无限长跑道,每个人可以规定自己跑步的方向,起点,跑步起止时间。每个人跑步的速度都是1m/s。最后从监控人员哪里得到了n个报告,每个报告给出了某人在某一时候所在的位置,问跑步的最少可能人数…...

C++设计模式-中介者模式
动机(Motivation) 多个对象相互关联的情况,对象之间常常会维持一种复杂的引用关系,如果遇到一些需求的更改,这种直接的引用关系将面临不断的变化。在这种情况下,可以使用一种”中介对象“来管理对象间的关联关系,避免…...
文件上传与下载服务 | Flask 实战
之前介绍了 droppy 文件共享服务的搭建。但在一些场景中,我们需要在命令行或在 Python 代码中,临时上传和下载文件。这时可以用一个更简单的策略:使用 flask 编写一个临时的 API。 服务端配置 以下是一个简单的 Flask 应用程序代码示例&…...
MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例
一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件,常用于在两个集合之间进行数据转移,如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model:绑定右侧列表的值&…...

江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命
在华东塑料包装行业面临限塑令深度调整的背景下,江苏艾立泰以一场跨国资源接力的创新实践,重新定义了绿色供应链的边界。 跨国回收网络:废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点,将海外废弃包装箱通过标准…...
TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案
一、TRS收益互换的本质与业务逻辑 (一)概念解析 TRS(Total Return Swap)收益互换是一种金融衍生工具,指交易双方约定在未来一定期限内,基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

2025盘古石杯决赛【手机取证】
前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来,实在找不到,希望有大佬教一下我。 还有就会议时间,我感觉不是图片时间,因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)
本文把滑坡位移序列拆开、筛优质因子,再用 CNN-BiLSTM-Attention 来动态预测每个子序列,最后重构出总位移,预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵(S…...
.Net Framework 4/C# 关键字(非常用,持续更新...)
一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...
全面解析数据库:从基础概念到前沿应用
在数字化时代,数据已成为企业和社会发展的核心资产,而数据库作为存储、管理和处理数据的关键工具,在各个领域发挥着举足轻重的作用。从电商平台的商品信息管理,到社交网络的用户数据存储,再到金融行业的交易记录处理&a…...
Java并发编程实战 Day 11:并发设计模式
【Java并发编程实战 Day 11】并发设计模式 开篇 这是"Java并发编程实战"系列的第11天,今天我们聚焦于并发设计模式。并发设计模式是解决多线程环境下常见问题的经典解决方案,它们不仅提供了优雅的设计思路,还能显著提升系统的性能…...

GraphRAG优化新思路-开源的ROGRAG框架
目前的如微软开源的GraphRAG的工作流程都较为复杂,难以孤立地评估各个组件的贡献,传统的检索方法在处理复杂推理任务时可能不够有效,特别是在需要理解实体间关系或多跳知识的情况下。先说结论,看完后感觉这个框架性能上不会比Grap…...