Jspdf: Generated pdf has top and bottom borders for images
Hello,
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 1 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'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. Does anyone know what is going on and how to remove these borders? The browser being used is IE 11 (Chrome or other browsers 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:
bookluvr416
All 11 comments
Can you provide a simple pdf with the problem?
Uzlopak
on 24 May 2017
Sure thing, here it is. There is no css except for white background, font size, font family, and letter spacing on the divs for use on the canvases.
example_pdf.pdf
bookluvr416
on 24 May 2017
Ok, the image in the pdf contains the borders. What happens if you import reset.css to your htmlsite?
Uzlopak
on 25 May 2017
I didn't see anything in this github called reset.css - is this the right one? https://meyerweb.com/eric/tools/css/reset/reset.css
If so, adding that did not do anything. =/
bookluvr416
on 25 May 2017
Well, thought maybe it is a css problem. But we can now exclude it from the possible problem sources.
If I read your code, maybe this line is the problem:
var imgHeight = canvas.height * imgWidth / canvas.width;
Probably canvas has usually a gray backgound color before being "painted". Maybe you get fractions and thus resulting in this "gray" color, because it is just the fraction of the pixel/mm being still gray background of th canvas? Maybe you should change it to
var imgHeight = Math.floor(canvas.height * imgWidth / canvas.width);
If not: Can you provide a sample code?
Uzlopak
on 26 May 2017
That did not do anything either =/ I appreciate your help - below is the code used to generate the pdf.
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Test</title>
<script src="js/jsPDF.js"></script>
<script src="js/bluebird.js"></script>
<!-- js libraries -->
<script src="js/jquery.min.js"></script>
<script src="js/html2canvas.js"></script>
<style type="text/css">
#html-wrapper {
background-color: white;
width: 99%;
font-size: 10px;
font-family: Tahoma;
font-weight: normal;
}
#image1, #image2, #image3, #image4, #image5, #image6, #image7, #testsurveys {
font-size: 11px;
font-family: Tahoma;
font-weight: normal;
background-color: white;
letter-spacing: normal;
overflow: hidden;
}
</style>
</head>
<body>
<div id="html-wrapper">
<div id="image2">
<div>
<div><h2>Test</h2></div>
<div>
<br /><br />Test A<br /><br />
</div>
</div>
</div>
<div id="image3">
<div>
<div><h2>Test</h2></div>
<div>
<br /><br />Test A<br /><br />
</div>
</div>
</div>
<div id="image4">
<div>
<div><h2>Test</h2></div>
<div>
<br /><br />Test A<br /><br />
</div>
<div><h2>Test</h2></div>
<div>
<br /><br />Test A<br /><br />
</div>
</div>
</div>
<div style="clear: both;"></div>
<div id="image6">
<div><h2>Test</h2></div>
<div>
<br /><br />Test A<br /><br />
</div>
</div>
<div id="image7">
<div><h2>Test</h2></div>
<div>
<br /><br />Test A<br /><br />
</div>
<div style="clear: both;"></div>
<div><h2>Test</h2></div>
<div>
<br /><br />Test A<br /><br />
</div>
<div style="clear: both;"></div>
<div><h2>Test</h2></div>
<div>
<br /><br />Test A<br /><br />
</div>
<div style="clear: both;"></div>
</div>
</div>
<div id="note-image-div"></div>
<div id="buttons-div">
<div class="right-float">
<!-- save button -->
<input class="btn" id="btn-save-image" type="button" value="Save" />
</div>
</div>
<script type="text/javascript">
var canvasArray;
$(window).on('load', function () {
function t() {
var tempCanvasArray = [];
var canvasArray = [];
// create canvases for each image section
getCanvas('#image2');
getCanvas('#image3');
getCanvas('#image4');
getCanvas('#image6');
getCanvas('#image7');
function getCanvas(imgDiv) {
var realCanvas = document.createElement('canvas');
var tempCanvas = document.createElement('canvas');
html2canvas($(imgDiv), {
onrendered: function (canvas1) {
tempCanvas = canvas1;
realCanvas.height = tempCanvas.height
realCanvas.width = tempCanvas.width;
realCanvas.getContext('2d').drawImage(tempCanvas, 0, 0);
canvasArray.push(realCanvas);
$("#note-image-div").append(realCanvas);
}
});
}
return canvasArray;
}
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 = Math.floor(canvas.height * imgWidth / canvas.width);
if (i != 0) { canvasPDF.addPage(); }
canvasPDF.addImage(canvasImg, 'JPEG', 15, 0, imgWidth, imgHeight);
}
canvasPDF.setDisplayMode("125%", "continuous");
canvasPDF.autoPrint(); // <<--------------------- !!
canvasPDF.output('dataurlnewwindow');
}
canvasArray = t();
$("#btn-save-image").on('click', function () {
saveToCAMM(canvasArray);
});
});
</script>
</body>
function getCanvas(imgDiv) {
var realCanvas = document.createElement('canvas');
var tempCanvas = document.createElement('canvas');
html2canvas($(imgDiv), {
onrendered: function (canvas1) {
tempCanvas = canvas1;
realCanvas.height = tempCanvas.height
realCanvas.width = tempCanvas.width;
var ctx = realCanvas.getContext('2d');
ctx.fillStyle="#FFFFFF";
ctx.fillRect(0,0, realCanvas.width,realCanvas.height);
ctx.drawImage(tempCanvas, 0, 0);
canvasArray.push(realCanvas);
$("#note-image-div").append(realCanvas);
}
});
}
@bookluvr416
And? Does it help? A little Feedback would be nice.
Uzlopak
on 30 May 2017
This is for work and yesterday was a holiday - I didn't have a chance to try before now.
But it works, thank you for your help - I really appreciate it. :)
bookluvr416
on 30 May 2017
If it works then please close the issue ;)
Uzlopak
on 30 May 2017
Ah whoops, I didn't notice a close button before
bookluvr416
on 30 May 2017
Related issues
yankeeBrit
路
3Comments
MaxCodeDE
路
4Comments
tomkidumbuyo
路
4Comments
baluMallisetty
路
4Comments
NoFootDancer
路
3Comments
Most helpful comment
http://jsbin.com/lufobuhevi/1/edit