How to remove top/bottom borders from jspdf pages?

606
May 23, 2017, at 05:14 AM

I am using a combination of html2canvas, canvg, and jspdf to take html content (which contains svg graphs) and turn them into canvases that are then used to create a pdf file. To prevent some unfortunate page-break issues the best work-around I found was to create multiple canvases, where 1 canvas would equal one page. The canvases are then converted to images using todataurl() before using the jspdf library, and it works great except for that each image on the pdf page has top and bottom borders.

These borders don't show on the webpage itself, either on the html or the canvases - they only show on the generated pdf. I haven't found anything on google beyond this post: html2canvas and toDataURL generated image has horizontal line . Does anyone know what is going on and how to remove these borders?

-Edit: I should add, I've tried setting border:none on the canvases and that did not help. None of my divs have a border property set on them either. The browser being used is IE 11, and IE 10+ must be supported (Chrome and others are not options).

This is the code I use to generate the 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

Thanks, Amanda

READ ALSO
I want to change css property value through javascript for loop

I want to change css property value through javascript for loop

I've visited Stack Overflow many times for answers and here is my first question ever: Is changing css property value through javascript for-loop possible?

284
Keyframe animation removing skew from div on animation

Keyframe animation removing skew from div on animation

I have a skew transform applied to a div and I'm wanting to animate it on page load

332
iPhone disable swiping left and right to make the page move

iPhone disable swiping left and right to make the page move

I'm gonna try my best to explain thisIf you go to target

304
How do I create a smooth transition in my menu dropdown?

How do I create a smooth transition in my menu dropdown?

I'm trying to figure out how to make a smooth transition in my menu transitionI already wrote a function for the times to appear and disappear onclick, but I'm not sure how to style the transition

214