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

JS-Dom转为图片,并放入pdf中进行下载

1、将dom转换为图片

  • 这里我们使用html2canvas工具插件
  • 先将dom转为canvas元素
  • 然后canvas拥有一个方法可以将绘制出来的图形转为url
  • 然后下载即可
  • 注意:如果元素使用了渐变背景并透明的话,生成的图片可能会有点问题。我下面这个案例使用了渐变背景实现元素对角线,就有问题。

1.1、下载插件并导入

npm install --save html2canvasimport html2canvas from 'html2canvas';

1.2、编写代码

<template><div class="home"><div class="content"></div><button @click="creatUrl">下载图片</button></div>
</template><script>
import html2canvas from 'html2canvas';export default {name: 'HomeView',components: {},methods: {// 生成图片creatUrl() {const setup = {useCORS: true, // 使用跨域};const dom = document.querySelector(".content")html2canvas(dom, setup).then((canvas) => {// 将canvas 转换成图片地址const link = canvas.toDataURL("image/jpg");this.downloadPicture(link, "test.jpg");});},// 导出图片downloadPicture(link, name = "未命名文件") {const file = document.createElement("a");file.style.display = "none";file.href = link;file.download = decodeURI(name);document.body.appendChild(file);file.click();document.body.removeChild(file);}}
}
</script><style lang="scss" scoped>
.home {.content {width: 100px;height: 100px;border: 1px solid #000;/* 元素添加对角线 */background: linear-gradient(to bottom left,white 50%,#000,white 51%);}
}
</style>

1.3、效果

在这里插入图片描述

2、将dom转为图片并放到pdf文件里进行下载

  • 这里使用jspdf插件,创建一个pdf文件,并把上面生成的图片放入pdf中即可完成。
  • 上面将dom元素转为图片并生成url就不再讲解

2.1、下载插件并导入

// 下载
npm install jspdf --save
npm install --save html2canvas// 导入
import jsPDF from 'jspdf'
import html2canvas from 'html2canvas';

2.2、js代码

// 生成pdf
creatPdf() {const setup = {useCORS: true, // 使用跨域};const dom = document.querySelector(".content")html2canvas(dom, setup).then((canvas) => {// 将canvas 转换成图片地址const link = canvas.toDataURL("image/jpg");// 创建pdf文件const pdf = new jsPDF();/** 1. 图片地址* 2. 格式化图片格式* 3. 图片在pdf中的x坐标* 4. 图片在pdf中的y坐标* 5. 图片在pdf中的宽度* 6. 图片在pdf中的高度*/pdf.addImage(link, 'JPEG', 0, 0, 210, 297); // 参数为下载的pdf的文件名pdf.save("test.pdf");});
},

2.3、注意

  • 我这里斜线是用背景渐变实现的,有兴趣可以查看第三章CSS的第18篇文章
  • 注意:如果有背景图的话,生成出来的图片可能会有问题。

相关文章:

JS-Dom转为图片,并放入pdf中进行下载

1、将dom转换为图片 这里我们使用html2canvas工具插件先将dom转为canvas元素然后canvas拥有一个方法可以将绘制出来的图形转为url然后下载即可注意&#xff1a;如果元素使用了渐变背景并透明的话&#xff0c;生成的图片可能会有点问题。我下面这个案例使用了渐变背景实现元素对…...

Python 无废话-办公自动化Excel格式美化

设置字体 在使用openpyxl 处理excel 设置格式&#xff0c;需要导入Font类&#xff0c;设置Font初始化参数&#xff0c;常见参数如下&#xff1a; 关键字参数 数据类型 描述 name 字符串 字体名称&#xff0c;如Calibri或Times New Roman size 整型 大小点数 bold …...

Python视频剪辑-Moviepy音频效果afx方法

随着多媒体内容在日常生活和工作中的广泛应用,音频处理成为了一个越来越重要的技能。无论是在游戏开发、音乐制作,还是在各种应用和网站中,高质量的音频处理都能极大地提升用户体验。然而音频处理看似复杂,实则不必如此。其实只需要掌握一些基础的概念和技巧,就能够完成大…...

让LLM模型输入token无限长

背景 增加LLM的输入token已经有很多的研究&#xff0c;但是思路无外乎&#xff1a;模型抽取局部特征通过上层通过模型融合预测最终解&#xff0c;以及这个思路的一些变种。然而这些思路其实都没能很彻底的解决无限长token问题&#xff0c;根据《EFFICIENT STREAMING LANGUAGE …...

RabbitMQ 介绍与 SpringBootAMQP使用

一、MQ概述 异步通信的优点&#xff1a; 耦合度低吞吐量提升故障隔离流量削峰 异步通信的缺点&#xff1a; 依赖于Broker的可靠性、安全性、吞吐能力架构复杂&#xff0c;业务么有明显的流程线&#xff0c;不方便追踪管理 什么是的MQ MQ&#xff08;Message Queue&#xf…...

企业门户的必备选择,WorkPlus的定制化解决方案

在当今数字化时代&#xff0c;企业门户成为了企业内外沟通与协作的重要基础设施。WorkPlus作为领先的品牌&#xff0c;为企业提供了一站式的企业门户解决方案&#xff0c;旨在提升企业形象、改善内外部沟通与协作效率。本文将深入探讨WorkPlus如何通过定制化的设计&#xff0c;…...

基于maven的项目搭建(已跑通)

1、直接选择archetype-webapp即可 &#xff08;这里很多人会觉得很慢–解决方案&#xff1a;https://blog.csdn.net/qq_45591895/article/details/133705674?spm1001.2014.3001.5501&#xff09; 2、手动添加一个java目录即可。 3、添加Tomcat 3、这就跑通了&#xff0c;可以…...

L1-035 情人节 c++解法

题目再现 以上是朋友圈中一奇葩贴&#xff1a;“2月14情人节了&#xff0c;我决定造福大家。第2个赞和第14个赞的&#xff0c;我介绍你俩认识…………咱三吃饭…你俩请…”。现给出此贴下点赞的朋友名单&#xff0c;请你找出那两位要请客的倒霉蛋。 输入格式&#xff1a; 输入…...

DecimalFormat 多语言、本地化指定Locale

DecimalFormat再未指定Locale会使用默认的Locale&#xff0c;不同的Locale会导致格式化时出现出乎预期的现象。如Locale为西班牙时&#xff0c;小数点符号为",“千位分隔符为”."。 所以在多语言或者需要本地化的情况下&#xff0c;使用DecimalFormat最好指定Locale避…...

冲刺第十五届蓝桥杯P0003倍数问题

文章目录 原题连接解析代码 原题连接 倍数问题 解析 需要找出三个数字&#xff0c;三个数字之和是k的倍数&#xff0c;并且这个数字需要最大&#xff0c;很容易想到的就是将数组进行倒叙排序&#xff0c;然后三层for循环解决问题&#xff0c;但是这样会导致**时间复杂度很高…...

操作系统备考学习 day7 (2.3.4 ~ 2.3.5)

操作系统备考学习 day7 第二章 进程与线程2.3 同步与互斥2.3.4 信号量 用信号量实现进程互斥、同步、前驱关系信号量机制实现进程互斥信号量机制实现进程同步信号量机制实现前驱关系 2.3.5 经典同步问题生产者-消费者问题多生产者和多消费者模型抽烟者问题读者-写者问题哲学家进…...

HRM人力资源管理系统源码

HRM人力资源管理系统源码 运行环境&#xff1a;PHP8.1或以上 MYSQL5.7或以上 php扩展要求 fileinfo imagemagick 功能介绍&#xff1a; 综合仪表板 它通过其综合仪表板提供了员工总数、工单和帐户余额的概览。 您可以轻松访问组织中的缺席者以及详细的公告和预定会议列…...

基于SSM的旅游网站设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…...

大厂秋招真题【BFS+DP】华为20230921秋招T3-PCB印刷电路板布线(留学生专场)

华为20230921秋招T3-PCB印刷电路板布线&#xff08;留学生专场&#xff09; 题目描述与示例 题目描述 在PCB印刷电路板设计中&#xff0c;器件之间的连线&#xff0c;要避免线路的阻抗值增大&#xff0c;而且器件之间还有别的器任和别的干扰源&#xff0c;在布线时我们希望受…...

OpenCV Python – 使用SIFT算法实现两张图片的特征匹配

OpenCV Python – 使用SIFT算法实现两张图片的特征匹配 1.要实现在大图中找到任意旋转、缩放等情况下的小图位置&#xff0c;可以使用特征匹配算法&#xff0c;如 SIFT (尺度不变特征变换) 或 SURF (加速稳健特征)。这些算法可以在不同尺度和旋转情况下寻找匹配的特征点 impo…...

doc转html后添加style和导航

public static void main(String[] args) throws Exception {docxToHtml(); } public static void docxToHtml() throws Exception {//D:\zpdtolly\工作总结文档\zpd使用文档\v4\用户使用手册\客户端使用手册String sourceFileName "C:\\Users\\luoguoqing\\Desktop\\202…...

Python中跨越多个文件使用全局变量

嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 这个琐碎的指南是关于在 Python 中跨多个文件使用全局变量。 但是在进入主题之前&#xff0c;让我们简单地看看全局变量和它们在多个文件中的用途。 &#x1f447; &#x1f447; &#x1f447; 更多精彩机密、教程&#xff…...

设计模式 - 解释器模式

目录 一. 前言 二. 实现 三. 优缺点 一. 前言 解释器模式&#xff08;Interpreter Pattern&#xff09;指给定一门语言&#xff0c;定义它的文法的一种表示&#xff0c;并定义一个解释器&#xff0c;该解释器使用该表示来解释语言中的句子&#xff0c;属于行为型设计模式。是…...

javascript禁止鼠标右键和复制功能

要禁止鼠标右键和复制功能&#xff0c;可以编写如下的封装函数&#xff1a; function preventDefaultCopy(event) {// 禁止右键 菜单和复制event.preventDefault();event.stopPropagation();return false; }// 在需要禁止复制的元素上添加该事件监听器 element.addEventListen…...

WebDAV之π-Disk派盘 + 咕咚云图

咕咚云图是一款强大的图床传图软件,它能够让您高效地对手机中的各种图片进行github传输,多个平台快速编码上传,支持远程删除不需要的图片,传输过程安全稳定,让您可以很好的进行玩机或者其他操作。 可帮你上传手机图片到图床上,并生成 markdown 链接,支持七牛云、阿里云…...

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

无法与IP建立连接,未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...