Make a PDF display responsive?

[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

[Pablo]

What exactly do you mean by 'Responsive'?
A PDF can be viewed on any device that supports PDF.

[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).

[BaconFries]

Perhaps the following. Note not tested so provided as information only.
https://blog.devgenius.io/how-to-displa ... c3fcd3a460

[Pablo]

For me, the PDF object extension is 'responsive'. The width can be different in breakpoints. It also works with layout grids.

[alan_sh]

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

[alan_sh]

Perhaps the following. Note not tested so provided as information only.
https://blog.devgenius.io/how-to-displa ... c3fcd3a460

BF - that looks exactly like I want. How do I add in the "#view=FitH" to the code that WWB generates?

[Pablo]

You will need to set the 'full width' property of the extension to 'true'.
There are also options to control the height.

[alan_sh]

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.

[Pablo]

In that case, you may need to look for another script.

[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>

[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.

[Pablo]

<iframe name="a-name" id="InlineFrame1" src="https://website-myfilename.pdf#view=fitH" height="100%" width="100%"></iframe>

Can't you just add the 'code' to the URL in the standard inline frame?

So, instead of

Code: Select all

https://website-myfilename.pdf

use

Code: Select all

https://website-myfilename.pdf#view=fitH

[alan_sh]

I never thought of that. Yes, that works too for me.

[alan_sh]

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).

[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.

[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

[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