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

Question

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

这些边框不会显示在网页本身上，无论是在 html 上还是在 Canvas 上 - 它们只显示在生成的 pdf 上。除了这篇文章之外，我没有在谷歌上找到任何东西:html2canvas and toDataURL generated image has horizontal line .有谁知道发生了什么以及如何删除这些边框？

-编辑:我应该补充一点，我试过在 Canvas 上设置 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 图像对我来说很适合。