Pdfmake: Render issue on .download()

[tpmh31292]

I got a very weird issue, I have the same docDefinition. At the end, I use .open() and .download(), and got 2 different layout.

pdfMake.createPdf(docDefinition).open();
pdfMake.createPdf(docDefinition).download();

The .open() shows correctly what I want, I then download it from the web browser. You can see as the attachment open.pdf
The .download() download a pdf file, but when I open that file, it looks like it was zoomed out. All the missing texts are still there but just out of the pages. You can see as the attachment download.pdf

Also attached my docDefinition. I tested this in the playground and it works perfectly.

Anyone has the same issue and any idea how to fix it?

open.pdf
use .download() to download.pdf
docDefinition.txt

[liborm85]

Generating pdf can only be called once.
Calling twice does not make sense.

[tpmh31292]

I called once but they are rendered differently as shown.

[liborm85]

I tried it on the playground and pdf via open is same as pdf via download.

[tpmh31292]

Yeah as I said, I tested in the playground and it works normal. I don't understand why though. Seems like everything got zoomed out.

[tpmh31292]

Does pdfmake have anything to do with phantomjs?

[liborm85]

No, pdfmake has nothing to do with phantomjs.

[liborm85]

Do you use some javascript framework?

[tpmh31292]

I use React

[liborm85]

1. test:

var dd = { /*  REMOVED, code from first post. */  };
pdfMake.createPdf(dd).open();

Work correct.

---

2. test:

var dd = { /*  REMOVED, code from first post. */  };
pdfMake.createPdf(dd).download('out.pdf');

Work correct.

---

3. test:

var dd = { /*  REMOVED, code from first post. */  };
pdfMake.createPdf(dd).open();
pdfMake.createPdf(dd).download('out.pdf');

or

var dd = { /*  REMOVED, code from first post. */  };
pdfMake.createPdf(dd).download('out.pdf');
pdfMake.createPdf(dd).download('out.pdf');

Does not work correct. Generates exactly as wrong pdfs as you do. You have bug in your code and you are calling generation twice.

[door80]

What about the case where we want to download _and_ open? Or, a better use case might be that we want to download _and_ create a buffer to save the PDF.

[BrunoJuchli]

@liborm85
I perform:

var dd = { /*  REMOVED, code from first post. */  };
const pdf = pdfMake.createPdf(dd);
pdf.getBuffer(...);
pdf.download(...);

The getBuffer result looks good, but the result of download looks different. It contains all the right elements, is even the same filesize. But positioning of elements is different.

The reason I'm doing this is because I want to show a "preview" in the browser (doin't that with getBuffer(..). The user should then also be able to download, print and/or open the document a new window.
Actually, as long as I use an <element> to show the PDF with the PDF plugin, the PDF plugin usually offers download/print options already.
But for browsers which can't show pdf's I'm using Mozilla's pdf.js. And there I need to be able to provide the same document for pdf.js and for download.
(printing and opening in a new window don't really make sense if the browser doesn't support pdf's...).
I've also planned another use case for this where i'll need to the buffer, to send it to an online service for printing (mainly from mobile devices).

It seems to me it might be sensible to adapt the API a bit. Instead of pdfMake.createPdf(dd) returning an object which can't actually be reused, how about:?

 pdfMake.createPdf(dd, function(pdfBuffer)
 {
     pdfBuffer.open();
     pdfBuffer.download();
     pdfBuffer...
 });

---

Note: if you want to reproduce the issue:
I'm using the following document definition (example):

var dd = {"pageSize":{"width":595.28,"height":841.89},"pageMargins":56.69291338582678,"defaultStyle":{"fontSize":12},"styles":{"address":{"fontSize":10},"title":{"fontSize":14,"bold":true}},"content":[{"text":"Bruno Juchli","alignment":"center","style":"title"},{"canvas":[{"type":"line","x1":0,"y1":3.5,"x2":481.8941732283464,"y2":3.5,"lineWidth":3}],"margin":[0,0,0,4.5]},{"text":"Sternmatt 7 | 6242 Wauwil","alignment":"center","style":"address"},{"absolutePosition":{"x":62.36220472440945,"y":170.07874015748033},"columns":[{"stack":["Dr. Strebel, Dudli + Fröhlich Steuerberatung und Treuhand AG","Bahnhaldenstrasse 6","8052 Zürich"],"width":242.36220472440948}],"style":"address"},{"absolutePosition":{"x":70.86614173228347,"y":279.0992125984252},"stack":["Sehr geehrte Damen und Herren"," ",{"text":"Ich kündige meinen Arbeitsvertrag fristgerecht per 31. August 2019.","alignment":"justify"}," ","Freundliche Grüsse",{"canvas":[{"type":"line","x1":0,"y1":57.69291338582678,"x2":481.8941732283464,"y2":57.69291338582678,"lineWidth":2}],"margin":[0,0,0,4]},{"columns":[{"text":"Unterschrift\nBruno Juchli"},{"text":"Ort & Datum"}],"style":"address"}]}]};

btw. thanks for all the hard work.