Iframe behavior across browsers

Hi,

I have developed a shiny application that displays a pdf using iframes.

tags$iframe(style="height:600px; width:100%",src = "DAGimageDoc.pdf")

However the display of the pdf is different across internet browsers. For example in Safari the image is displayed as zoomed in as possible within the window, while in Chrome it is the opposite, and in IE a popup asking the user to open the pdf occurs each time the pdf is updated (pdf is built based on user input).

Links with images showing the various displays :
https://www.dropbox.com/sh/szscz3jdkonm1z3/AAAkpsoSiiTPfpSkaUglbsiaa?dl=0

I was hoping someone might have insights on why this is happening and if there is anything that can be done on my end for a more uniform appearance across all browsers.

Thanks for the help!

1 Like

I am not sure you will achieve anything consistent using iframe...

https://www.w3schools.com/tags/tag_iframe.asp

(The problem might not (or not just) be the browsers but the HTML versions that they are running. So I don't think the result will ever be stable).

You might wanna look into JavaScript libraries that handle displaying PDFs in iframes, like pdf.js (which is used by Firefox), rather than trying to just drop a PDF into an iframe yourself. PDF display isn't super consistent across browsers.

No idea if that can be useful for what you are trying to achieve, but the package magick is an R wrapper around ImageMagick. And ImageMagick is super powerful and can convert pdf to images in any format, size, and resolution. There might be a way to get a more standard display with these tools.

1 Like

Not all browsers support pdf.js though.

Oh! I didn't know that. Is there a cross-browser solution?

Oh! I didn't know that. Is there a cross-browser solution, @prosoitos?

EDIT: nevermind :stuck_out_tongue:

I don't know. But I feel that playing with pdf is tricky :stuck_out_tongue: I am not sure what the final product should look like or what its intent is, but playing with images of a pdf (if good enough for the intent) would be a lot more reproducible across different browsers/versions...

Outputting an html file rather than a pdf, if suitable with the whole project goal, would of course be the ideal solution...

It would be useful to know more about the app to come up with ideas a bit less ridiculous than mine (which are probably totally inadequate with the app). But I don't have a lot of hopes about showing pdf consistently across browsers. The "big ones" (Chromium, Firefox, etc.) will display them differently and the "more obscure ones" are likely not to display them at all...

1 Like

The app is designed to create causal diagrams based on user inputs. I had actually originally used magick to convert the PDF to a PNG, however I ran into two problems. The first being that the images were a bit fuzzy, even after messing with the resolution, and the second issue was getting the PNG to fit to the window while keeping the scale from the PDF and without any distortion or squishing. If you have any ideas of good ways to deal with those issues, I could return to my original plan!

1 Like

How about outputting in png directly (skipping the pdf step altogether)?