Question

我使用html2canvas，canvg和jspdf的组合来获取html内容（包含svg图）并将它们转换为然后用于创建pdf文件的画布。为了防止一些不幸的分页问题，我发现最好的解决方法是创建多个画布，其中1个画布等于一个页面。然后在使用jspdf库之前使用todataurl（）将画布转换为图像，除了pdf页面上的每个图像都有顶部和底部边框之外，它的效果很好。

这些边框不会在网页上显示，无论是在html还是画布上 - 它们只显示在生成的pdf上。除了这篇文章，我还没有在Google上发现任何内容：html2canvas and toDataURL generated image has horizontal line。有谁知道发生了什么以及如何删除这些边界？

-Edit：我应该补充一下，我已尝试在画布上设置border：none，但没有帮助。我的div中都没有设置边框属性。正在使用的浏览器是IE 11，必须支持IE 10+（Chrome和其他浏览器不是选项）。

这是我用来生成PDF的代码：

function saveToCAMM(canvasArray) {
    var numCanvas = canvasArray.length;
    var imgWidth = 250;
    var pageHeight = 360;
    var canvasPDF = new jsPDF('l', 'mm', "letter");

    for (var i = 0; i < numCanvas; i++) {
        var canvas = canvasArray[i];

        var canvasImg = canvas.toDataURL("image/jpeg", 1.0);
        var imgHeight = canvas.height * imgWidth / canvas.width;

        if (i != 0) { canvasPDF.addPage(); }

        canvasPDF.addImage(canvasImg, 'JPEG', 15, 0, imgWidth, imgHeight);
    }


    canvasPDF.setDisplayMode("125%", "continuous");

}

example: pdf page with borders

谢谢，阿曼达

Answer 1

我遇到了同样的问题：似乎jpeg图像在canvas.toDataURL（“ image / jpeg”，1.0）函数中出现了黑色背景，正如所指出的那样：

https://ourcodeworld.com/articles/read/10/image-created-from-canvas-have-black-background-html5-

使用canvas.toDataURL（）并基本上接受具有透明背景的png图像对我来说确实如此。

如何从jspdf页面中删除顶部/底部边框？

1 个答案: