Image in PDF cut off: How to make a canvas fit entirely in a PDF page?

[gustiando]

When placing the canvas in the PDF using the jspdf library makes the image cut off.

html2canvas(myContainer, {background: 'red'}).then (canvas) ->
  imgData = canvas.toDataURL('image/jpeg', 1.0)
  window.open(imgData) # this is just a test that opens the image in a new tab and it displays nicely, the entire image
  pdf = new jsPDF("l", "pt", "b1") # tried a variety of formats but no luck
  pdf.addImage(imgData, 'JPEG', 0, 0)
  pdf.save('file.pdf') # the generated pdf that contains the image gets trimmed

Does anyone have any ideas how to make the canvas fit?

[gustiando]

nvm, found solution. Resizing the image when adding the image in the PDF was the way to go.

Try setting the width and height of the image as well (in any case, there is little documentation for addImage it seems):

var pdf = new jsPDF("l", "mm", "a4");
var imgData = canvas.toDataURL('image/jpeg', 1.0);

// due to lack of documentation; try setting w/h based on unit
pdf.addImage(imgData, 'JPEG', 10, 10, 180, 150);  // 180x150 mm @ (10,10)mm

[diegocr]

You can also pass the canvas to addImage() instead of that imgData and it'll take care, or even simpler use the addHTML plugin which is a wrapper/bridge between html2canvas and jsPDF.

[gustiando]

Thanks! I really want to use this way to save a couple more lines of code, but I'm not sure if I can.

It seems addHTML doesn't make it easy to resize the image it generates from the canvas (by passing the parameters as the example above).

The solution to my problem is to actually resize it so it can fit in a single page and not to crop it.

[diegocr]

The default addHTML action is to automatically resize the canvas to fit the PDF document size, the line you linked is within a block which is only reached if the pagesplit option is specified.

[gustiando]

My bad! yes you're right @diegocr.

However, when I tell jsPDF to generate the PDF in landscape makes the image cut off instead of scaling. In portrait it looks good and jsPDF is able to fit in a single page.

var pdf;
pdf = new jsPDF('landscape');
pdf.addHTML(document.body, function() {
  pdf.save('stacking-plan.pdf');
});

[gustiando]

Actually, just tried with a larger image/element and even in portrait made the image cut off instead of resizing it to fit in the page. Any ideas?

Is the best solution resize the image myself to the size of a page before passing it to jsPDF?

[JitenP77]

https://github.com/MrRio/jsPDF/issues/670

Image bigger then pdf page needs to get split to another image & added to next page

I am using html2canvas and jsPDF for Pdf creation.

I want a solution on below :

1) I have a table rows which can increase depends upon the records I get from database. 2) The Rows could be more then the size of the Pdf page. 3) I want to display that single canvas image in two different pages. (1st image in page 1 as it will get fit properly; but for 2nd the remaining image need to add it to second page) 4) I dont want to compromise on quality of Image & no compression

How do i do it ? Can anyone help me on this ?

[developeranirudhprabhu]

yes even i'm looking for same thing

[aitinternational]

@JitenP77 and @developeranirudhprabhu where you able to find a solution? I am currently have the same issue for an invoice PDF and its splitting things into 2 pages when i need it all on one.

[SirPhemmiey]

My table consist of about 50 rows but html2canvas and jsPDF is converting only 3 rows when i need about 10 rows...Please how do i go about it??

[drahul12]

I am having one issue with jspdf. i am having a large image nearly about 13000 pixel wide. using jspdf i am getting proper image with all the data. but when i try to put that image in pdf , it generates a shorter width image on pdf page.I am not getting where i am going wrong. if any solution on this please help me out.I tried searching on this.

Code: for this, i am passing slc_width and slc_height to getCanvas()

getCanvas().then(function(canvas) {

    imgData = canvas.toDataURL("image/png", 1.0);
    window.open(imgData);

    var doc = new jsPDF('', 'mm', [canvas.width, canvas.height]);
    doc.addImage(imgData, 'png', 10, 10, canvas.width, canvas.height);

    doc.save('abc.pdf');

  });

function getCanvas() { return html2canvas(form, { removeContainer: true, width: slc_width, height: slc_height }); }

[drahul12]

sorry for disturbing all... Got the solution. It was pretty much simple.

solution:

if(canvas.width > canvas.height){ doc = new jsPDF('l', 'mm', [canvas.width, canvas.height]); } else{ doc = new jsPDF('p', 'mm', [canvas.height, canvas.width]); }

Thanks.

[frischform]

Hi all,

I have an other problem. In a section <section id="menu">...</section> I have some <div's>. I try now to generate a pdf using jspdf and html2canvas, which shows me the entire content of the <section id="menu">...</section>.

The Problem is, that it renders only the actuall viewport of the screen.

Here my code:

<script> function menuPDF() { var pdf = new jsPDF('l', 'mm', 'a4'); var options = { background: '#000', }; pdf.addHTML($('#printMenu')[0], options, function() { pdf.save('Test.pdf'); }); } </script>

Thank you all for your help.

[Uzlopak]

Schau Mal ob die Änderungen in #1450 dir helfen.

[majedur-rahaman]

Hi, I have solved this issues by providing full document size of page. You can just define this way and also put the caller button above the div that have to print.

if ($(document).width() > $(document).height()) { var pdf = new jsPDF('l', 'pt', [$(document).width(), $(document).height()]); // } else { var pdf = new jsPDF('p', 'pt', [$(document).height(), $(document).width()]); // } //var pdf = new jsPDF('l', 'pt', 'a4'),

[Uzlopak]

Obviously works but leads to unprintable results. But atleast it is a pdf... ROFL

[em201819]

Hi, I am facing one issue w.r.t PDF Generation. On JSP page we have a inbuit oracle functionality for viewing content in print mode. Once its in print mode I added one button "PDF Dowload" and added below javascript code to download the PDF.

All works fine. PDF get generated successfully but when I open the pdf it shows me the content including images and text but noticed that content and especially pictures cut in half when comes to splitting to next page.

Can any one please help me how can I fix this?

Attaching the snip-it of image which cut in half while splitting to next page.

[em201819]

similarly text is also get split or overrides and cut in half when it comes to splitting to next page.

[em201819]

Also wanted to highlight that below are the js files which I have included in my jsp code apart from above stated script code.

Please let me know incase I have to remove any among these OR add any other js to fix the issue.

Waiting for the response!

[shivang2joshi]

670

Image bigger then pdf page needs to get split to another image & added to next page

I am using html2canvas and jsPDF for Pdf creation.

I want a solution on below :

1. I have a table rows which can increase depends upon the records I get from database.
2. The Rows could be more then the size of the Pdf page.
3. I want to display that single canvas image in two different pages. (1st image in page 1 as it will get fit properly; but for 2nd the remaining image need to add it to second page)
4. I dont want to compromise on quality of Image & no compression

How do i do it ? Can anyone help me on this ?

did you find anything about it ?