调用Canvg方法时出现'Uncaught TypeError'错误的技术求助

DevOps 小满

2026-8-13

解决Canvg调用时的"Cannot read properties of undefined (reading 'documentElement')"错误

错误根源

d3.select('svg')返回的是d3选择集对象，不是原生SVG DOM元素，直接访问outerHtml会得到undefined
属性名拼写错误：正确属性是outerHTML（大写H），不是outerHtml
Canvg接收到无效的undefined数据后，内部解析逻辑会触发documentElement读取失败的错误

修正后的代码方案

方案1：获取原生SVG元素并正确提取HTML字符串

svgToPng(svg, callback){
    let canvas = document.createElement('canvas');
    let ctx = canvas.getContext('2d');
    // 确保svg是原生DOM元素，提取正确的outerHTML
    let data = svg.outerHTML;
    canvg(canvas, data);
    callback(canvas);
},

download(){
    let el = d3.select('svg');
    // 从d3选择集中获取原生DOM元素
    this.svgToPng(el.node(), function(canvas) {
        let img = canvas.toDataURL("image/png");
        let doc = new jsPDF('l', 'mm', [50, 120]);
        doc.addImage(img, 'PNG', 0, 0, 120, 50);
        doc.save('wordcloud.pdf');
    });
}

方案2：直接传入原生SVG DOM元素给Canvg

Canvg 1.x版本支持直接接收SVG DOM元素作为参数，无需转成字符串：

svgToPng(svg, callback){
    let canvas = document.createElement('canvas');
    let ctx = canvas.getContext('2d');
    // 直接传入原生SVG元素
    canvg(canvas, svg);
    callback(canvas);
},

download(){
    let el = d3.select('svg');
    this.svgToPng(el.node(), function(canvas) {
        let img = canvas.toDataURL("image/png");
        let doc = new jsPDF('l', 'mm', [50, 120]);
        doc.addImage(img, 'PNG', 0, 0, 120, 50);
        doc.save('wordcloud.pdf');
    });
}