【前端】Vue利用html2Canvas将Dom内容生成图片并下载（解决svg无法显示的问题）

zycb 2019-09-06 原文

需求：将页面中DIV内容块（包含svg流程节点）生成图片并直接下载到用户本地，并且不影响之前的svg图的使用

实现：

1、安装依赖

cnpm install --save html2canvas
cnpm install --save canvg@2.0.0-beta.1 canvas@^2 jsdom@^13 xmldom@^0

2、引入依赖

import html2canvas from "html2canvas";
import canvg from "canvg";

3、代码实现

主要是两个问题

SVG无法显示：借助canvg将svg转canvas

不能影响原有的元素显示：上一步会改变原有的dom结构导致svg的拖动特性不能在使用，因此用一个中间元素来做图片导出。

   handleGenerator() {
　　　 // 最外层的容器
      const treeContainnerElem = document.getElementById('tree-containner')
　　　 // 要导出div
      const treeElem = document.getElementById("tree")
　　　 // 从要导出的div克隆的临时div
      const tempElem = treeElem.cloneNode(true)
      tempElem.id = 'temp-tree'
      tempElem.className = 'fff'
      tempElem.style.width = treeElem.clientWidth + 'px'
      tempElem.style.height = treeElem.clientHeight + 'px'
      treeContainnerElem.appendChild(tempElem)

　　   // 在临时div上将svg都转换成canvas，并删除原有的svg节点
      const svgElem = tempElem.querySelectorAll("svg");
      svgElem.forEach((node) => {
        var parentNode = node.parentNode;
        var svg = node.outerHTML.trim();
        var canvas = document.createElement("canvas");
        canvg(canvas, svg);
        canvas.style.zIndex = 9
        if (node.style.position) {
          canvas.style.position += node.style.position;
          canvas.style.left += node.style.left;
          canvas.style.top += node.style.top;
        }
        parentNode.removeChild(node);
        parentNode.appendChild(canvas);
      });


      html2canvas(tempElem, {
        useCORS: true // 允许CORS跨域
      }).then(canvas => {
　　　　　　// 图片触发下载
          const img = canvas.toDataURL("image/jpeg").replace("data:image/jpeg;base64,", "");
          const finalImageSrc = "data:image/jpeg;base64," + img;
          const aElem = document.createElement('a')
          document.body.appendChild(aElem)
          aElem.href = finalImageSrc
          // 设置下载标题
          aElem.download = "chart.jpg"
          aElem.click()
          document.body.removeChild(aElem)
        })
    }