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

2019/9/6 17:06:21 人评论 次浏览 分类:vue.js

广告开始--------------------------

全网最全17套vue.js视频教程

文件格式:视频      大小:160G左右

预览网址:【直接浏览网址即可】http://nicethemes.cn/product/view14.html

从入门到精通全套vue.js实战视频教程。

广告结束--------------------------

需求:将页面中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)         })     }

  

相关资讯

    暂无相关的资讯...

共有访客发表了评论 网友评论

验证码: 看不清楚?
    -->