基于ID克隆HTML div并移除CSS类时出现Invalid source错误

这个错误的根源是你误用了jQuery的remove()方法的返回值，我来帮你一步步理清问题：

问题分析 #

你代码里的这一行：

var newt = $(cont).find(".masteredit").remove();

remove()方法的作用是从DOM中移除匹配到的元素，但它返回的是被移除的那些元素，而不是移除操作完成后剩下的父容器（也就是你克隆的#element-to-print）。所以你传给html2pdf的newt其实是一堆被删掉的.masteredit元素，这显然不符合html2pdf对源参数的要求，自然就抛出了"Invalid source"错误。

另外你的代码末尾还有个语法错误：多了两个闭合括号))，这也会导致代码运行异常。

修复方案 #

你只需要先完成移除操作，然后把处理后的克隆容器传给html2pdf就行，不需要把remove()的返回值赋值给变量。具体修正如下：

document.getElementById("btnPrint").onclick = function() { 
    // 克隆目标div，这里cont已经是jQuery对象，不用再套$(cont)
    var cont = $('#element-to-print').clone(); 
    // 直接在克隆对象上移除指定类的元素，操作完成后cont就是处理好的容器
    cont.find(".masteredit").remove(); 
    // 把处理后的cont传给html2pdf
    html2pdf(cont, { 
        margin: 0.25,
        filename: $scope.defendantHeader.firstName + "-" + $scope.defendantHeader.lastName + "-" + $scope.defendantHeader.activeFileNumber,
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { dpi: 192, letterRendering: true },
        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' },
    }); 
}

额外说明 #

• 因为$('#element-to-print').clone()返回的已经是jQuery对象，后续操作不需要再用$(cont)包裹，直接调用find()方法即可。
• 确保$scope.defendantHeader下的属性都有正确的值，避免生成的文件名出现异常。

内容的提问来源于stack exchange，提问作者mayur gawande