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

前端实现把整个页面转成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)

一、问题 遇到一个需求&#xff0c;就是要把整个看板页面导出成PDF用在汇报&#xff0c;也就是要把整个DOM生成一个PDF保存到本地。 二、解决方法 1、解决思路&#xff1a;使用插件 jspdf 和 html2canvas&#xff0c;我用的版本如下图 2、代码实现 import { jsPDF } from …...

Vue 3 学习文档(一)

最近打算做一个项目&#xff0c;涉及到一些前端的知识&#xff0c;因上一次接触前端已经是三四年前了&#xff0c;所以捡一些简单的功能做一下复习。 响应式函数&#xff1a;reactive 和 ref属性绑定&#xff1a;v-bind 和简写语法事件监听&#xff1a;v-on 和简写语法 双向绑…...

【适配】屏幕拖拽-滑动手感在不同分辨率下的机型适配

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

牛客周赛 Round 69(A~E)

文章目录 A 构造C的歪思路code B 不要三句号的歪思路code C 仰望水面的歪思路code D 小心火烛的歪思路code E 喜欢切数组的红思路code 牛客周赛 Round 69 A 构造C的歪 思路 签到题&#xff0c;求出公差d&#xff0c;让最大的数加上公差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、官方下载地址&#xff0c;https://jmeter.apache.org/download_jmeter.cgi 2、服务器上用wget下载 # 更新系统 sudo yum update -y# 安装 wget 以便下载 JMeter sudo yum install wget -y# 下载 JMeter 压缩包&#xff08;使用 JMeter 官方网站的最…...

使用Python实现自动化邮件通知:当长时程序运行结束时

使用Python实现自动化邮件通知&#xff1a;当长时程序运行结束时 前提声明 本代码仅供学习和研究使用&#xff0c;不得用于商业用途。请确保在合法合规的前提下使用本代码。 目录 引言项目背景项目设置代码分析 导入所需模块定义邮件发送函数发送邮件 实现步骤结语全部代码…...

框架学习07 - SpringMVC 其他功能实现

一. 拦截器实现HandlerInterceptor 接⼝ SpringMVC 中的 Interceptor 拦截器也是相当重要和相当有⽤的&#xff0c;它的主要作⽤是拦截⽤户的请求并进⾏相应的处理。⽐如通过它来进⾏权限验证&#xff0c;或者是来判断⽤户是否登陆等操作。对于 SpringMVC 拦截器的定义⽅式有两…...

NAT:连接私有与公共网络的关键技术(4/10)

一、NAT 的工作原理 NAT 技术的核心功能是将私有 IP 地址转换为公有 IP 地址&#xff0c;使得内部网络中的设备能够与外部互联网通信。其工作原理主要包括私有 IP 地址到公有 IP 地址的转换、端口号映射以及会话表维护这几个步骤。 私有 IP 地址到公有 IP 地址的转换&#xff1…...

RabbitMQ2:介绍、安装、快速入门、数据隔离

欢迎来到“雪碧聊技术”CSDN博客&#xff01; 在这里&#xff0c;您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者&#xff0c;还是具有一定经验的开发者&#xff0c;相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导&#xff0c;我将…...

衡山派D133EBS 开发环境安装及SDK编译烧写镜像烧录

1.创建新文件夹&#xff0c;用来存放SDK包&#xff08;其实本质就是路径要对就ok了&#xff09;&#xff0c;右键鼠标通过Open Git Bash here来打开git 输入命令 git clone --depth1 https://gitee.com/lcsc/luban-lite.git 来拉取&#xff0c;如下所示&#xff1a;&#xff0…...

【Spring MVC】如何获取cookie/session以及响应@RestController的理解,Header的设置

前言 &#x1f31f;&#x1f31f;本期讲解关于SpringMVC的编程之参数传递~~~ &#x1f308;感兴趣的小伙伴看一看小编主页&#xff1a;GGBondlctrl-CSDN博客 &#x1f525; 你的点赞就是小编不断更新的最大动力 &#x1f386;那么废…...

C++设计模式行为模式———策略模式

文章目录 一、引言二、策略模式三、总结 一、引言 策略模式是一种行为设计模式&#xff0c; 它能让你定义一系列算法&#xff0c; 并将每种算法分别放入独立的类中&#xff0c; 以使算法的对象能够相互替换。与模板方法模式类似&#xff0c;都是以扩展的方式来支持未来的变化。…...

Spring Cloud 中 bootstrap.yml 配置文件详解

Spring Cloud 中 bootstrap.yml 配置文件详解 1. 什么是 bootstrap.yml&#xff1f; bootstrap.yml 是 Spring Cloud 提供的一个特殊配置文件&#xff0c;主要用于初始化 Spring Cloud 应用程序的环境。与常见的 application.yml 不同&#xff0c;bootstrap.yml 在 Spring 应用…...

Java项目实战II基于SpringBoot前后端分离的网吧管理系统(开发文档+数据库+源码)

目录 一、前言 二、技术介绍 三、系统实现 四、核心代码 五、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 随着互联网技术的不断发展…...

ASP网络安全讲述

一 前言   Microsoft Active Server Pages&#xff08;ASP&#xff09;是服务器端脚本编写环境&#xff0c;使用它可以创建和运行动态、交互的 Web 服务器应用程序。使用 ASP 可以组合 HTML 页 、脚本命令和 ActiveX 组件以创建交互的 Web 页和基于 Web 的功能强大的应用程序…...

DFS 创建分级菜单

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

HDU Go Running(最小点覆盖 + 网络流优化)

题目大意&#xff1a;有一条无限长跑道&#xff0c;每个人可以规定自己跑步的方向&#xff0c;起点&#xff0c;跑步起止时间。每个人跑步的速度都是1m/s。最后从监控人员哪里得到了n个报告&#xff0c;每个报告给出了某人在某一时候所在的位置&#xff0c;问跑步的最少可能人数…...

C++设计模式-中介者模式

动机(Motivation) 多个对象相互关联的情况&#xff0c;对象之间常常会维持一种复杂的引用关系&#xff0c;如果遇到一些需求的更改&#xff0c;这种直接的引用关系将面临不断的变化。在这种情况下&#xff0c;可以使用一种”中介对象“来管理对象间的关联关系&#xff0c;避免…...

文件上传与下载服务 | Flask 实战

之前介绍了 droppy 文件共享服务的搭建。但在一些场景中&#xff0c;我们需要在命令行或在 Python 代码中&#xff0c;临时上传和下载文件。这时可以用一个更简单的策略&#xff1a;使用 flask 编写一个临时的 API。 服务端配置 以下是一个简单的 Flask 应用程序代码示例&…...

MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

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

江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

2025盘古石杯决赛【手机取证】

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

【论文阅读28】-CNN-BiLSTM-Attention-(2024)

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...

全面解析数据库:从基础概念到前沿应用​

在数字化时代&#xff0c;数据已成为企业和社会发展的核心资产&#xff0c;而数据库作为存储、管理和处理数据的关键工具&#xff0c;在各个领域发挥着举足轻重的作用。从电商平台的商品信息管理&#xff0c;到社交网络的用户数据存储&#xff0c;再到金融行业的交易记录处理&a…...

Java并发编程实战 Day 11:并发设计模式

【Java并发编程实战 Day 11】并发设计模式 开篇 这是"Java并发编程实战"系列的第11天&#xff0c;今天我们聚焦于并发设计模式。并发设计模式是解决多线程环境下常见问题的经典解决方案&#xff0c;它们不仅提供了优雅的设计思路&#xff0c;还能显著提升系统的性能…...

GraphRAG优化新思路-开源的ROGRAG框架

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