Hey guys I try to print a bootstrap modal which contains an iframe pointing to a local pdf file. The modal itself looks fine.
Problem is I want to print the modal with my own button (not the one in the pdf dialog, this works great).
<button onclick="window.print()">print page!<button />
If I do that, the pdf is cut off. This seems to happen only with pdf, not f.i. images.
The problem is the iframe does not scale to match the size of your pdf.
There is no native way of fixing this in the browser, but we can work around the issue with a couple of JS librairies.
The first step is to use a JS PDF renderer, rather than the native browser PDF render. This then allows us to run JS alongside the PDF.
Next we can use JS to workout the size of the PDF and resize the iframe. This is an overly complex problem that is solved by the iframe-resizer library.
Once you have both of these setup the iframe will automagically scale to the size of your PDF and stay correctly scaled when the viewport is resized during the print process.
