vue将dom元素生成图片并下载

简介

博主最近接到的需求，将dom元素生成base64图片，并下载；博主因为是在做项目时遇到的，博主的需求是将鱼骨图生成图片，鱼骨图可以参考博主的另一篇博客（https://blog.csdn.net/qq_44745401/article/details/135089818），根据需求变动，前后使用了两种方法，推荐使用第一种方法，第二种方法生成图片时需要将竖向排列的文字做单独处理，否则生成的图片文字是横向排列的，导致样式错乱，第一种方法不会出现这种情况

方法一：使用domtoimage

安装依赖

npm install dom-to-image --save

1. 导入dom-to-image库

import domtoimage from 'dom-to-image';

2. 获取你想要生成图片的DOM元素

generateImage() {
       const element = this.$refs.content; // content替换为要生成图片div标签的ref名称
       domtoimage.toPng(element).then((dataUrl) => {
         this.downloadImg(dataUrl);
       });
    },

3. 下载图片

downloadImg(imgUrl) {
      var a = document.createElement("a");
      var event = new MouseEvent("click");
      // 下载图名字
      a.download = "鱼骨图.png";
      //url
      a.href = imgUrl;
      //合成函数，执行下载
      a.dispatchEvent(event);
    },

方法二：使用html2canvas

安装依赖

npm install html2canvas --save

1. 导入dom-to-image库

import html2canvas from 'html2canvas';

2. 获取你想要生成图片的DOM元素

generateImage() {
      const element = this.$refs.content; // content替换为要生成图片div标签的ref名称
      // 使用html2canvas生成图片
	  html2canvas(element).then((canvas) => {
	    // 将canvas转换为图片URL
	    const image = canvas.toDataURL('image/png');
	    this.downloadImg(image);
	  });
    },

3. 下载图片

downloadImg(imgUrl) {
      var a = document.createElement("a");
      var event = new MouseEvent("click");
      // 下载图名字
      a.download = "鱼骨图.png";
      //url
      a.href = imgUrl;
      //合成函数，执行下载
      a.dispatchEvent(event);
    },