In my project, I am utilizing a combination of html2canvas, canvg, and jspdf to convert HTML content (which includes SVG graphs) into canvases for the purpose of creating a PDF file. To address some page-break issues, I have resorted to creating multiple canvases where each canvas represents one page in the PDF. These canvases are then converted to images using todataurl() before being processed by the jspdf library. However, an issue that I encountered is that each image on the PDF page displays unwanted top and bottom borders.
Interestingly, these borders are not visible on the webpage itself or the canvases but only appear on the generated PDF file. Despite searching online, specifically on Stack Overflow, for a solution beyond the information provided in this post: html2canvas and toDataURL generated image has horizontal line, I have been unable to find a suitable resolution. Can anyone shed light on why these borders are appearing and how they can be removed?
-Edit: It's worth mentioning that I attempted to set border:none on the canvases without success. Additionally, none of the div elements in the code have a border property assigned. The project requirement mandates support for Internet Explorer 10 onwards (Chrome and other browsers are not feasible options).
Below is the snippet of code responsible for generating 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
Thank you, Amanda