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

1、将dom转换为图片

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

1.1、下载插件并导入

bash 复制代码
npm install --save html2canvas

import html2canvas from 'html2canvas';

1.2、编写代码

html 复制代码
<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、下载插件并导入

js 复制代码
// 下载
npm install jspdf --save
npm install --save html2canvas

// 导入
import jsPDF from 'jspdf'
import html2canvas from 'html2canvas';

2.2、js代码

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篇文章
  • 注意:如果有背景图的话,生成出来的图片可能会有问题。
相关推荐
关关钧12 分钟前
【R语言】读取CSV数据时,显示[1] PK...<0 行> (或0-长度的row.names)
开发语言·r语言
以卿a1 小时前
C++ 模板初阶
开发语言·c++
s:1031 小时前
【框架】参考 Spring Security 安全框架设计出,轻量化高可扩展的身份认证与授权架构
java·开发语言
道不尽世间的沧桑2 小时前
第17篇:网络请求与Axios集成
开发语言·前端·javascript
久绊A2 小时前
Python 基本语法的详细解释
开发语言·windows·python
bin91535 小时前
DeepSeek 助力 Vue 开发:打造丝滑的复制到剪贴板(Copy to Clipboard)
前端·javascript·vue.js·ecmascript·deepseek
软件黑马王子6 小时前
C#初级教程(4)——流程控制:从基础到实践
开发语言·c#
闲猫6 小时前
go orm GORM
开发语言·后端·golang
晴空万里藏片云7 小时前
elment Table多级表头固定列后,合计行错位显示问题解决
前端·javascript·vue.js
奶球不是球7 小时前
el-button按钮的loading状态设置
前端·javascript