Pdfmake: Set image size in percentage of the page

Created on 10 Feb 2017  路  4Comments  路  Source: bpampuch/pdfmake

Hi,

Is there any way to set the image width in percentage of the page ?

Regards

feature request image

Most helpful comment

This is a hack, but it sort of works. Two different methods. First, here is a list of the page sizes. It defaults to A4, so [595.28, 841.89]. Letter size is [612, 792]. Since you're setting the pageSize, you should always know what the size is based on this list or the custom {width: number, height: number} you've put in.

So before your documentDefinition, you might want to put all the pageLayout info as a property on pdfMake.

pdfMake.pageLayout = {
  height: 792,
  width: 612,
  margins: Array(4).fill(72)
}

Second, you can actually get it through a hacky way. I was reading the docs for header/footer, and I noticed that within the header callback, you actually have access to a variable called pageSize, with properties width, height, and orientation. So you can make the header callback something like

header: (currentPage, pageCount, pageSize) => {
  pdfMake.pageLayout = {...pdfMake.pageLayout, ...pageSize};
  return 'The text for the header';
}

And boom. You have the pageSize variable as a property of pdfMake. Looking through the source code, I think the default margins are 40. You'll want to subtract xMargin * 2 before you do your calculations.

How about your question? Let's say you've set some custom margins on a letter size page

pdfMake.pageLayout = {
  height: 792,
  width: 612,
  margins: [40,100,80,80]
}
documentDefinition = {
  pageSize: 'LETTER',
  pageMargins: pdfMake.pageLayout.margins,
  content: [
    {image: logo, width: (pdfMake.pageLayout.width - pdfMake.pageLayout.margin[0] - pdfMake.pageLayout.margin[2]) * scalePercent}
  ]

It's not a great solution, but it works.

All 4 comments

Agree - I am currently struggling to figure out how to scale an image to the page width.

Related issue: Trying to scale an image to fit inside a column without explicit widths...

This is a hack, but it sort of works. Two different methods. First, here is a list of the page sizes. It defaults to A4, so [595.28, 841.89]. Letter size is [612, 792]. Since you're setting the pageSize, you should always know what the size is based on this list or the custom {width: number, height: number} you've put in.

So before your documentDefinition, you might want to put all the pageLayout info as a property on pdfMake.

pdfMake.pageLayout = {
  height: 792,
  width: 612,
  margins: Array(4).fill(72)
}

Second, you can actually get it through a hacky way. I was reading the docs for header/footer, and I noticed that within the header callback, you actually have access to a variable called pageSize, with properties width, height, and orientation. So you can make the header callback something like

header: (currentPage, pageCount, pageSize) => {
  pdfMake.pageLayout = {...pdfMake.pageLayout, ...pageSize};
  return 'The text for the header';
}

And boom. You have the pageSize variable as a property of pdfMake. Looking through the source code, I think the default margins are 40. You'll want to subtract xMargin * 2 before you do your calculations.

How about your question? Let's say you've set some custom margins on a letter size page

pdfMake.pageLayout = {
  height: 792,
  width: 612,
  margins: [40,100,80,80]
}
documentDefinition = {
  pageSize: 'LETTER',
  pageMargins: pdfMake.pageLayout.margins,
  content: [
    {image: logo, width: (pdfMake.pageLayout.width - pdfMake.pageLayout.margin[0] - pdfMake.pageLayout.margin[2]) * scalePercent}
  ]

It's not a great solution, but it works.

you can include this file in your project to get page size

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Masber picture Masber  路  3Comments

ValeSauer picture ValeSauer  路  3Comments

davidyeiser picture davidyeiser  路  3Comments

MathLavallee picture MathLavallee  路  3Comments

sayjeyhi picture sayjeyhi  路  3Comments