How to set image to page width using jsPDF?

Question

Is there any way to solve this? I tried to set the width and height in mm. How to set it to full width?

Answer 1

You can get the width and height of the PDF document, as shown below,

var doc = new jsPDF("p", "mm", "a4"); var width = doc.internal.pageSize.getWidth(); var height = doc.internal.pageSize.getHeight(); 

You can then use this width and height for your image to fit the entire PDF document.

 var imgData = 'data:image/jpeg;base64,/9j/4AAQSkZJ......'; doc.addImage(imgData, 'JPEG', 0, 0, width, height); 

Make sure your image has the same size (resolution) of the PDF. Otherwise, it will look distorted (stretched).

If you want to convert px to mm use this link http://www.endmemo.com/sconvert/millimeterpixel.php

Answer 2

The API has changed since its implementation using version 1.4.1.

 var width = pdf.internal.pageSize.getWidth(); var height = pdf.internal.pageSize.getHeight(); 

Answer 3

My answer is about a more specific case of what you are asking, but I think some ideas can be drawn from this for a more general application. Also, I would post it as a comment on Purushot's answer (which mine is based on), if only I could.

So, my problem was how to fit the web page into a PDF document without losing proportions. I used jsPDF in combination with html2canvas and calculated the ratio of the width and height of the div . I applied the same ratio to the PDF document and the page fit perfectly into the page without any distortion.

 var divHeight = $('#div_id').height(); var divWidth = $('#div_id').width(); var ratio = divHeight / divWidth; html2canvas(document.getElementById("div_id"), { height: divHeight, width: divWidth, onrendered: function(canvas) { var image = canvas.toDataURL("image/jpeg"); var doc = new jsPDF(); // using defaults: orientation=portrait, unit=mm, size=A4 var width = doc.internal.pageSize.getWidth(); var height = doc.internal.pageSize.getHeight(); height = ratio * width; doc.addImage(image, 'JPEG', 0, 0, width-20, height-10); doc.save('myPage.pdf'); //Download the rendered PDF. } }); 

Answer 4

I discovered this while experimenting with html2canvas this morning. Although this does not include provisions for printing multiple pages, it scales the image to the width of the page and redistributes the height relative to the adjusted width:

 html2canvas(document.getElementById('testdiv')).then(function(canvas){ var wid: number var hgt: number var img = canvas.toDataURL("image/png", wid = canvas.width, hgt = canvas.height); var hratio = hgt/wid var doc = new jsPDF('p','pt','a4'); var width = doc.internal.pageSize.width; var height = width * hratio doc.addImage(img,'JPEG',20,20, width, height); doc.save('Test.pdf'); }); 

Answer 5

I ran into the same problem, but I solve using this code

 html2canvas(body,{ onrendered:function(canvas){ var pdf=new jsPDF("p", "mm", "a4"); var width = pdf.internal.pageSize.getWidth(); var height = pdf.internal.pageSize.getHeight(); pdf.addImage(canvas, 'JPEG', 0, 0,width,height); pdf.save('test11.pdf'); } }) 

Answer 6

The best solution is to set the width and height of the document using the aspect ratio of your image.

 var ExportModule = { pxTomm: function() { return Math.floor(px / $('#my_mm').height()); }, ExportToPDF: function() { var myCanvas = document.getElementById("exportToPDF"); html2canvas(myCanvas, { onrendered: function(canvas) { var imgData = canvas.toDataURL( 'image/jpeg', 1.0); //Get the original size of canvas/image var img_w = canvas.width; var img_h = canvas.height; //Convert to mm var doc_w = ExportModule.pxTomm(img_w); var doc_h = ExportModule.pxTomm(img_h); //Set doc size var doc = new jsPDF('l', 'mm', [doc_w, doc_h]); //set image height similar to doc size doc.addImage(imgData, 'JPG', 0, 0, doc_w, doc_h); var currentTime = new Date(); doc.save('Dashboard_' + currentTime + '.pdf'); } }); }, } 

 <script src="Scripts/html2canvas.js"></script> <script src="Scripts/jsPDF/jsPDF.js"></script> <script src="Scripts/jsPDF/plugins/canvas.js"></script> <script src="Scripts/jsPDF/plugins/addimage.js"></script> <script src="Scripts/jsPDF/plugins/fileSaver.js"></script> <div id="my_mm" style="height: 1mm; display: none"></div> <div id="exportToPDF"> Your html here. </div> <button id="export_btn" onclick="ExportModule.ExportToPDF();">Export</button> 

Answer 7

The key is to calculate the aspect ratio of the image and the relative width / height ratio of the page. The following code is what I used to convert several images online to a PDF file. It will rotate the images depending on the orientation of the images / page and set the correct margin. For some reason, in the img.onload i function, img.onload does not increase automatically, but is equal to urls.length . I would appreciate it if you come up with an explanation. My project is to use images from online src. You should be able to change to suit your needs.

As for image rotation, if you see a blank page after rotation, it may just be outside the image. See this answer for details.

 function exportPdf(urls) { let pdf = new jsPDF('l', 'mm', 'a4'); const pageWidth = pdf.internal.pageSize.getWidth(); const pageHeight = pdf.internal.pageSize.getHeight(); const pageRatio = pageWidth / pageHeight; for (let i = 0; i < urls.length; i++) { let img = new Image(); let j = i; img.src = urls[i]; img.onload = function () { const imgWidth = this.width; const imgHeight = this.height; const imgRatio = imgWidth / imgHeight; if (j > 0) { pdf.addPage(); } pdf.setPage(j + 1); if (imgRatio >= 1) { const wc = imgWidth / pageWidth; if (imgRatio >= pageRatio) { pdf.addImage(img, 'JPEG', 0, (pageHeight - imgHeight / wc) / 2, pageWidth, imgHeight / wc, null, 'NONE'); } else { const pi = pageRatio / imgRatio; pdf.addImage(img, 'JPEG', (pageWidth - pageWidth / pi) / 2, 0, pageWidth / pi, (imgHeight / pi) / wc, null, 'NONE'); } } else { const wc = imgWidth / pageHeight; if (1 / imgRatio > pageRatio) { const ip = (1 / imgRatio) / pageRatio; const margin = (pageHeight - ((imgHeight / ip) / wc)) / 4; // why not 2? pdf.addImage(img, 'JPEG', (pageWidth - (imgHeight / ip) / wc) / 2, -(((imgHeight / ip) / wc) + margin), pageHeight / ip, (imgHeight / ip) / wc, null, 'NONE', -90); } else { pdf.addImage(img, 'JPEG', (pageWidth - imgHeight / wc) / 2, -(imgHeight / wc), pageHeight, imgHeight / wc, null, 'NONE', -90); } } if (j == urls.length - 1) { pdf.save('Photo.pdf'); } } } }