Displaying a pdf file in an iframe (springboot)

grwkremilek

I am building a spring-boot app and trying to open a pdf file in an iframe. I can not make this working (even though I am able to display www or images there and I manage to open the pdf in a new window), so I suspect that it might be connected to Vivaldi inner settings. Also this stack overflow answer suggests that indeed browsers use different strategies to display pdf files. Where do I find more information about displaying pdf file in Vivaldi?

Pesala

@grwkremilek Have you found Settings, Webpages, Plugins, Enable Internal PDF Viewer?

I suspect that might affect the display of PDF files in iframes, but it is controlled by the user.

grwkremilek

@Pesala Yes, but whether my Internal PDF Viewer is enabled or disabled, does not change anything.

Pathduck

@grwkremilek Try these, they work for me:

https://www.w3schools.com/code/tryit.asp?filename=GH30YGSHAOGE
http://jkorpela.fi/html/iframe-pdf.html

But I did try a codepen.io test of the code from the first example, and it doesn't work there, but works in Firefox. Doesn't work in Chromium and Opera.

So that might possibly be a bug. That site is not straight html though, it's a blob of JS...

grwkremilek

@Pathduck Thank you! This works fine.

I am just curious now. This is my original code

<a href="https://www.baeldung.com/java-pdf-creation" target="_blank">to open the webpage in a new window click here</a>

<a href="${pdfFile}" target="_blank">to open the file in a new window click here</a>

	
<iframe id='ifr1' width="80%" height="600"></iframe>
<a href=# onClick='document.getElementById("ifr1").src="https://www.baeldung.com/java-pdf-creation";'>to open the webpage in a frame click here</a>


<iframe id='ifr2' width="80%" height="600"></iframe>
<a href=# onClick='document.getElementById("ifr2").src="${pdfFile}";'>to open the file in a frame click here</a>

and while the first three hrefs work fine, I could not make the last one display the pdf file while obviously it is just a variation to the previous hrefs.

Pathduck

@grwkremilek I can't really help you with JS code...

But obviously the browser does not know what ${pdfFile} is... I assume this is just a placeholder for something else?

grwkremilek

@Pathduck it does recognize the placeholder in

<a href="${pdfFile}" target="_blank">to open the file in a new
			window click here</a>

but not in

<iframe id='ifr2' width="80%" height="600"></iframe>
		<a href=# onClick='document.getElementById("ifr2").src="${pdfFile}";'>to
			open the file in a frame click here</a>

that is what I find confusing .... I will put it on stack overflow and see the wise think there.

Anyway, thank you very much for that code again!

Komposten

@grwkremilek Is the string interpolation (${pdfFile}) done server-side (before the page is served to the client) or client-side (i.e. javascript template literals)? If it's the latter, template literals must be enclosed in backticks.

Komposten

This short example works for me:

<html>
<body>
  <script type="text/javascript">
    var pdfFile = "http://jkorpela.fi/latin9.pdf";
  </script>
  <iframe src="https://research.google.com/pubs/archive/44678.pdf" width="1000" height="500" id="ifr2">
  </iframe>
  <p>
  <a href="#" onClick='document.getElementById("ifr2").src=`${pdfFile}`;'>Click to change PDF!</a>
  </p>
</body>
</html>

Take note of the backticks around ${pdfFile}.

barbudo2005

@grwkremilek You can look at this extension "iFrame - Link Viewer" on Github to learn how to do it:

https://github.com/mataherry/iFrame/

I use it always to view links in iframes:

Pathduck

@Komposten Wait, JS has $, {}and backticks for variables???
The more I learn about that language the more crazy it gets
Live and learn I guess

Anyway, why would you need to use the $ and backticks for the URL string, it's just a regular variable, it doesn't need to be a Template literal?

Komposten

@Pathduck said in Displaying a pdf file in an iframe (springboot):

Anyway, why would you need to use the $ and backticks for the URL string, it's just a regular variable, it doesn't need to be a Template literal?

Oh, right. You don't actually need it here. You can simply use the variable directly:

onClick='document.getElementById("ifr2").src=pdfFile;'

Pathduck

@Komposten Whenever I want to poke some (light-hearted) fun at JavaScript I show people this short talk:
https://www.destroyallsoftware.com/talks/wat
Cracks me up every time - I'm weird I know

Komposten

@Pathduck Seen that one before, but it's just as good every time. There are plenty of other weird things in JavaScript.
Like how NaN (Not a Number) is a number:

Or that NaN is not equal to itself: