Page 1 of 1
Make a PDF display responsive?
Posted: Mon Dec 19, 2022 5:57 pm
by alan_sh
Is there a way to make PDF file responsive when it is displayed in a web site? So, it is visible on a phone and on a desktop?
I have tried using the PDF Object extension, but that isn't responsive (even in a layout grid).
Any clues?
cheers
Alan
Re: Make a PDF display responsive?
Posted: Mon Dec 19, 2022 6:09 pm
by Pablo
What exactly do you mean by 'Responsive'?
A PDF can be viewed on any device that supports PDF.
Re: Make a PDF display responsive?
Posted: Mon Dec 19, 2022 6:24 pm
by alan_sh
I was trying to embed the PDF into my site, rather than have the browser open it when it was clicked. I could just generate a picture with a link to the PDF, but I wanted it to be simpler than that.
The PDF Object nearly does what I want, but it is not responsive (probably because the PDF itself is a fixed width).
Re: Make a PDF display responsive?
Posted: Mon Dec 19, 2022 6:37 pm
by BaconFries
Perhaps the following. Note not tested so provided as information only.
https://blog.devgenius.io/how-to-displa ... c3fcd3a460
Re: Make a PDF display responsive?
Posted: Mon Dec 19, 2022 7:01 pm
by Pablo
For me, the PDF object extension is 'responsive'. The width can be different in breakpoints. It also works with layout grids.
Re: Make a PDF display responsive?
Posted: Mon Dec 19, 2022 7:21 pm
by alan_sh
Pablo wrote: ↑Mon Dec 19, 2022 7:01 pm
For me, the PDF object extension is 'responsive'. The width can be different in breakpoints. It also works with layout grids.
Here's my test .wbs file
https://www.dropbox.com/s/3lmet2emhi9lv ... t.zip?dl=1
The issue is that the PDF bject container might be responsive, but the PDF itself isn't. So when I shrink the browser window, the PDF file doesn't change size and I get hoizontal scroll bars.
Alan
Re: Make a PDF display responsive?
Posted: Mon Dec 19, 2022 7:25 pm
by alan_sh
BF - that looks exactly like I want. How do I add in the "#view=FitH" to the code that WWB generates?
Re: Make a PDF display responsive?
Posted: Mon Dec 19, 2022 8:43 pm
by Pablo
You will need to set the 'full width' property of the extension to 'true'.
There are also options to control the height.
Re: Make a PDF display responsive?
Posted: Mon Dec 19, 2022 8:53 pm
by alan_sh
Pablo wrote: ↑Mon Dec 19, 2022 8:43 pm
You will need to set the 'full width' property of the extension to 'true'.
There are also options to control the height.
When I do that (removing the second layout grid for simplicity in the example I posted above), the PDF shows in a narrow wide bar. I can't see where to set the height which makes any difference. I've tried changing the "100%" to a number, no difference.
When I set the layout to "Width 100%, height fixed", it shows OK on a desktop, but as you reduce the width, the PDF doesn't resize, but the window produces horizontal scroll bars.
Re: Make a PDF display responsive?
Posted: Mon Dec 19, 2022 8:59 pm
by Pablo
In that case, you may need to look for another script.
Re: Make a PDF display responsive?
Posted: Mon Dec 19, 2022 9:31 pm
by alan_sh
Cracked it - thank you. I use an html object, putting in the same code as the inline frame did (I looked at the html it produced) and adding on the view parameter.
So, for anyone else, my html line looks like this:
<iframe name="a-name" id="InlineFrame1" src="
https://website-myfilename.pdf#view=fitH" height="100%" width="100%"></iframe>
Re: Make a PDF display responsive?
Posted: Mon Dec 19, 2022 10:41 pm
by paddlefoot
I tried your code Alan, using a calendar PDF, but the PDF width on the web is not responsive. I tried with an HTML object on a page and in a layout grid both tested with FF responsive design mode and the width didn't adjust. I was really hoping you had cracked the responsive PDF problem.
Re: Make a PDF display responsive?
Posted: Tue Dec 20, 2022 7:17 am
by Pablo
Can't you just add the 'code' to the URL in the standard inline frame?
So, instead of
use
Code: Select all
https://website-myfilename.pdf#view=fitH
Re: Make a PDF display responsive?
Posted: Tue Dec 20, 2022 9:51 am
by alan_sh
I never thought of that. Yes, that works too for me.
Re: Make a PDF display responsive?
Posted: Tue Dec 20, 2022 10:03 am
by alan_sh
paddlefoot wrote: ↑Mon Dec 19, 2022 10:41 pm
I tried your code Alan, using a calendar PDF, but the PDF width on the web is not responsive. I tried with an HTML object on a page and in a layout grid both tested with FF responsive design mode and the width didn't adjust. I was really hoping you had cracked the responsive PDF problem.
All I can say is that it works with my PDF file. Have a look here
https://www.gmnscouts.org.uk/jamboree.html and see if that works for you when you reduce the size. I've tried it in Chrome and Firefox (with Firefox set to always open pdf files in the browser).
Re: Make a PDF display responsive?
Posted: Tue Dec 20, 2022 10:32 am
by paddlefoot
Yes, your PDF is responsive, and thanks for the link. My PDF was created with Serif PagePlus, which may have some strange coding. I'll create it with another program and try again.
Re: Make a PDF display responsive?
Posted: Tue Dec 20, 2022 10:46 am
by alan_sh
That's good.
Mine was created from MS Word.
PagePlus is very old now and probably has no idea on responsive design.
Best of luck
Alan
Re: Make a PDF display responsive?
Posted: Wed Dec 21, 2022 2:38 pm
by paddlefoot
Thanks for pursuing this Alan. I managed to make the PDF responsive by placing your code into a flexbox set to column/wrap/flex-start/center/center/height=auto/width=true.
tomH