close

How to set image to fit width of the page using jsPDF?

Hello Guys, How are you all? Hope You all Are Fine. Today we are going to learn How to set image to fit width of the page using jsPDF? in javascript. So Here I am Explain to you all the possible methods here.

Without wasting your time, Let’s start This Article.

How to set image to fit width of the page using jsPDF ?

  1. How to set image to fit width of the page using jsPDF ?

    to set image to fit width of the page using jsPDF The API changed since this commit, using version 1.4.1 it's now
    var width = pdf.internal.pageSize.getWidth(); var height = pdf.internal.pageSize.getHeight();

  2. How to set image to fit width of the page using jsPDF ?

    to set image to fit width of the page using jsPDF The API changed since this commit, using version 1.4.1 it's now
    var width = pdf.internal.pageSize.getWidth(); var height = pdf.internal.pageSize.getHeight();

Method 1


If you need to get width 100% of PDF file and auto height you can use getImageProperties property of html2canvas library

html2canvas(input)
      .then((canvas) => {
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jsPDF({
          orientation: 'landscape',
        });
        const imgProps= pdf.getImageProperties(imgData);
        const pdfWidth = pdf.internal.pageSize.getWidth();
        const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
        pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
        pdf.save('download.pdf');
      });

Method 2

The API changed since this commit, using version 1.4.1 it’s now

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

Summery

It’s all About this article. Hope all method helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which method worked for you? Thank You.

Leave a Comment