Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

setting pdf page width/height when using jsPDF

I'm trying to use the jsPDF lib to generate a pdf. I'm able to build the pdf but is there a way to pass in the page size to each page of the pdf? I'm currently getting output to the pdf with some extra white space below each of the 'images' that I add.

here is a screen shot of one of the pages on the pdf. It has the image and then there is white space that fills the rest of that page. I also have white space on the right because the width is wider than my image as well. The width isn't as much of an issue as the height problem. I'm sure I can scoot the images over by setting the x, y values on the following line:

pdf.addImage(img, 'JPEG', 0, 0);

But that won't help me with the height.

screen shot of the pdf

I'm currently just pumping images into the pdf 1 per page and I would like all the pages to be the same size. I will know the size of the images and would like to pass options in like this:

var pdf = new jsPDF(options, '', '', '');

or

pdf.addPage(options);

Is it possible to set the width and height of the pdf or the individual pages of the pdf?

like image 926
Ryan Gill Avatar asked Jun 20 '14 20:06

Ryan Gill


1 Answers

You should be able to choose a page format that is close enough to what you want when creating the pdf like so:

var pdf = new jsPDF("l", "pt", "letter");

That third parameter comes from the pageFormats object at the top of the jsPDF declaration in the file.

Also, you should be able to scale your images so that they fill the appropriate size on the page. If you look at the prototype for the addImage function, you will see that you can pass:

addImage(imageData, format, x, y, w, h, alias, compression);

where the w and h are the expected bounds of your image. In my experience, jsPDF has no problem scaling the image down from the source, so I see no reason why it can't scale up.

EDIT:

Note that if you're intent on creating the pdf as var pdf = new jsPDF(options, '', '', ''); then you can set options as:

options = {
    orientation: "l",
    unit: "pt",
    format: "letter"
};
like image 119
GrouchyPanda Avatar answered Oct 11 '22 11:10

GrouchyPanda