Jspdf: Background color when using addHTML

Created on 30 Apr 2014 · 7Comments · Source: MrRio/jsPDF

using the following

var pdf = new jsPDF();

pdf.addHTML($('#pdfContent'),function() {
pdf.save('report.pdf');
});

I get a black background on my rendered pdf. http://imgur.com/aSDlLR7

I think it has to do with html2canvas using a jpg. When testing if I generate an image using html2canvas and the jpg would result in a black bg and a png would results in white.

Thoughts or suggestions?

Source

akatreyt

Most helpful comment

I was having the same problem when exporting the canvas to JPEG. I was not hitting this problem when exporting to PNG.

If you think about it, it makes sense to have a black background when exporting to JPEG. JPEG does not support transparency and the canvas when first created is black.

In my case, I needed a white background. So this worked for me:

var ctx = canvas.getContext('2d');
ctx.clearRect( 0 , 0 , canvas.width, canvas.height );
ctx.fillStyle="#FFFFFF";
ctx.fillRect(0 , 0 , canvas.width, canvas.height);

After this code, just do the drawing on the canvas as usual and export to jsPDF.

Nd60 on 31 May 2015

👍6

All 7 comments

Have you tried using the html2canvas's background option?

http://html2canvas.hertzen.com/documentation.html#available-options

diegocr on 1 May 2014

setting the bg color on the pdfContent div worked. Thanks

akatreyt on 1 May 2014

I got the same background color problem

nitin0708 on 24 May 2015

I was having the same problem when exporting the canvas to JPEG. I was not hitting this problem when exporting to PNG.

If you think about it, it makes sense to have a black background when exporting to JPEG. JPEG does not support transparency and the canvas when first created is black.

In my case, I needed a white background. So this worked for me:

var ctx = canvas.getContext('2d');
ctx.clearRect( 0 , 0 , canvas.width, canvas.height );
ctx.fillStyle="#FFFFFF";
ctx.fillRect(0 , 0 , canvas.width, canvas.height);

After this code, just do the drawing on the canvas as usual and export to jsPDF.

Nd60 on 31 May 2015

👍6

I'm facing a similar problem. I am iterating over an array of elements I want to print. The first page prints out great. The second page shows black bars where the elements should be. When I call addPage(), I do not change any options and I have tried setting the background option to various colors, but it always shows black.

When I set the format option to PNG, the second page is all white (with and without the background option set).

options = {background:"#418423"}

black bars on second page (options = {background:"#418423"}))