vue使用html2canvas生成图片时不能识别svg问题解决

该文章介绍了在Vue组件中如何利用html2canvas库将SVG元素转换为Canvas，然后使用canvg.js渲染SVG到Canvas，最终实现SVG图形的联线关系导出为图片。过程中涉及动态创建canvas元素，设置样式，并保存图片至本地。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1：安装 npm install --save html2canvas

2：vue组件中引用 import html2canvas from 'html2canvas';

3：canvas画布中svg转canvas，使用canvg.js

        
        // svg转canvas，用于联线关系导出图片
        convertSvg2Canvas() {
            if (typeof html2canvas !== 'undefined') {
                // 以下是对svg的处理，找出画布中svg联线
                var svgElem = $("#library_canvas").find('.jtk-connector');
                var parentNode;
                var svg;
                var canvas;
                svgElem.each(function (index, node) {
                    // 获取父节点
                    parentNode = node.parentNode;
                    svg = node.outerHTML.trim();
                    // 动态创建canvas标签
                    canvas = document.createElement('canvas');
                    let canvasId = "canvas"+index;
                    canvas.setAttribute("id", canvasId);
                    canvas.setAttribute("class", 'svgtocanvas');
                    canvas.setAttribute("width", "1px");
                    canvas.setAttribute("height", "1px");
                    parentNode.appendChild(canvas);
                    canvg(canvas, svg); 
                    // 定义canvas联线位置
                    if (node.style.position) {
                        canvas.style.position += node.style.position;
                        canvas.style.left += node.style.left;
                        canvas.style.top += node.style.top;
                    }
                    parentNode.appendChild(canvas);
                });
                // 开始保存图片
                this.saveImage("canvas","er");
            } 
        },

        /**
         * 
         * @param {*} divText 需要将html内容写入canvas的jQuery对象
         * @param {*} imgText 保存的图片的信息
         */
	    saveImage(divText, imgText) {
			let canvasID = this.$refs[divText];
			let that = this;
			let a = document.createElement('a');
			html2canvas(canvasID).then(canvas => {
				let dom = document.body.appendChild(canvas);
				dom.style.display = 'none';
				a.style.display = 'none';
				document.body.removeChild(dom);
				let blob = that.dataURLToBlob(dom.toDataURL('image/png'));
				a.setAttribute('href', URL.createObjectURL(blob));
				//这块是保存图片操作  可以设置保存的图片的信息
				a.setAttribute('download', imgText + '.png');
				document.body.appendChild(a);
				a.click();
				URL.revokeObjectURL(blob);
				document.body.removeChild(a);
			});
            // 将svg转换后的canvas删除
            $("#library_canvas").find("canvas[class='svgtocanvas']").remove();
		},