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

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

news 2025/7/18 14:17:25

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");});
},