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篇文章
  • 注意:如果有背景图的话,生成出来的图片可能会有问题。
相关推荐
理想不理想v3 分钟前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
Envyᥫᩣ13 分钟前
C#语言:从入门到精通
开发语言·c#
酷酷的阿云13 分钟前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
童先生34 分钟前
Go 项目中实现类似 Java Shiro 的权限控制中间件?
开发语言·go
lulu_gh_yu35 分钟前
数据结构之排序补充
c语言·开发语言·数据结构·c++·学习·算法·排序算法
Re.不晚1 小时前
Java入门15——抽象类
java·开发语言·学习·算法·intellij-idea
老秦包你会1 小时前
Qt第三课 ----------容器类控件
开发语言·qt
aPurpleBerry1 小时前
JS常用数组方法 reduce filter find forEach
javascript
凤枭香1 小时前
Python OpenCV 傅里叶变换
开发语言·图像处理·python·opencv
ULTRA??1 小时前
C加加中的结构化绑定(解包,折叠展开)
开发语言·c++