Can anyone help me in displaying PDF document in JSF page in iframe only?
Thanks in advance,
Suresh
Right-click on the link in the href attribute and click Copy link address. Create a new Text content block. Click the Embed Media icon and embed the HTML code in an iframe that points to the PDF URL you noted in step 3. Click the checkmark to see the PDF displayed in the newly created iframe.
To embed the PDF in the HTML window, point the page to a document and then specify the height and width of the PDF so the HTML window is the correct size using the code: <embed src="filename. pdf" width="500" height="375">. Note that an embedded PDF may look very different on different browsers and operating systems.
What you want is impossible. Browsers are not magic, they just display different kinds of documents, some of which (HTML) can embed objects provided by plugins (flash, java) and other documents inside iframes (pdf, flash, html). If you want to show pdf miniatures, you will have to generate images on the server.
There are several ways to include a PDF file in your HTML document: Using the <embed> and <object> tags, which are considered to be old-fashioned ways, because they are deprecated now. Using the <a> or the <iframe> tag. The easiest way to put PDF in an HTML document is using the <a> tag with its href attribute.
How to embed PDF viewer in HTML ¶. Another way of adding a PDF file to your HTML document is using the <iframe> tag. It allows setting your preferred width and height as well. To have the code, follow these simple steps: To specify the web address of your PDF file, set the source. Both of the mentioned properties can be specified by "px", "cm", ...
There are a couple of external libraries, like react-pdf or reactjs-pdf-reader, but I was hoping to find a way to accomplish this without using a third-party library. The best way I found to display a PDF was to use an iframe. iframe stands for inline frame, and it allows you to embed another HTML document within the current one.
Just use <iframe>
the usual way:
<iframe src="/path/to/file.pdf"></iframe>
If your problem is rather that the PDF is not located in the WebContent
, but rather located somewhere else in disk file system or even in a database, then you basically need a Servlet
which gets an InputStream
of it and writes it to the OutputStream
of the response:
response.reset();
response.setContentType("application/pdf");
response.setContentLength(file.length());
response.setHeader("Content-disposition", "inline; filename=\"" + file.getName() + "\"");
BufferedInputStream input = null;
BufferedOutputStream output = null;
try {
input = new BufferedInputStream(new FileInputStream(file), DEFAULT_BUFFER_SIZE);
output = new BufferedOutputStream(response.getOutputStream(), DEFAULT_BUFFER_SIZE);
byte[] buffer = new byte[DEFAULT_BUFFER_SIZE];
int length;
while ((length = input.read(buffer)) > 0) {
output.write(buffer, 0, length);
}
} finally {
close(output);
close(input);
}
This way you can just point to this servlet instead :) E.g.:
<iframe src="/path/to/servlet/file.pdf"></iframe>
You can find a complete example of a similar servlet in this article.
The <iframe>
also works fine in JSF, assuming that you're using JSF 1.2 or newer. In JSF 1.1 or older you have to wrap plain vanilla HTML elements such as <iframe>
inside a <f:verbatim>
so that they will be taken into the JSF component tree, otherwise they will be dislocated in the output:
<f:verbatim><iframe src="/path/to/servlet/file.pdf"></iframe></f:verbatim>
I recommend you to have a look at http://www.jpedal.org/. You can convert each of the pdf pages to images and deliver them separately to the browser.
This approach is more secure for your application, since the pdf is never send to the client.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With