Steps for opening a PDF document in a modal dialog window


This article describes how to open a PDF in a Modal Window. The Modal window will not allow the user to work on any other application till this window is closed.


Design Overview

Using Modal dialog Window, text files can be opened using “Window.showModalDialog” and the text file is read through bytestream and written to the OutputStream.

But in case of PDF, opening PDF require a wrapper like Iframe in a html and the PDF is read through bytestream and written to PrintWriter.

1. On click of any component in jsp a JavaScript function is called which in turn calls the servlet as below :

function js(id) {
var append='Id=' + Id;

The Id is the value that is passed from the jsp to the servlet by appending it in the queryString. /.Portlets.Sample is the project name.

In the servlet this Id can be used to dynamically get the PDF content or it is used to differentiate from where the servlet is called that is either from the jsp or the recursive call for the servlet itself.

The dialogWidth and dialogHeight attributes can be set which constitutes the width and the height of the modal window

2. In the Servlet , we are constructing a HTML with a iframe component and then we are recursively calling the same servlet to render the PDF inside the iframe.

The value of the id that is passed is obtained from request.getQueryString()

Now we will check if the queryString is not null . If it is not null then a html is constructed with iframe. A iframe tag is constructed and its src attribute set to same servlet call.

Finally the constructed html is written to the printwriter object.

if((request.getQueryString()!=null) ) {
String htmlBody = "<HTML><BODY>";
String iframeServlet ="<IFRAME width=796 height=540 src ='/.Portlets.Sample/sampleServlet'>";
String closeIframe="</IFRAME>";
String closeBodyHtmlTag="</BODY></HTML>";
PrintWriter printWriter= response.getWriter();

The printwriter now calls the servlet again. But this time the queryString will be empty since a new request is created. Therefore the else part is called. In this we point the absolute path of PDF to fileInputStream which is read through bufferedInputStream and written to the bytestream object. Now the bytestream object is written to the outputStream. This OutputStream is obtained from response object. The contentType of response object is set to “application/pdf”.

Now the PDF is rendered inside the Iframe.

No comments:

Post a Comment

Recent Posts

Popular Posts

© 2011-2019 Web Portal Club