How to open a file using JavaScript?

Question

I have a servlet that write a pdf file as a ByteArrayOutputStream to the servlet's output stream. If I open the servlet URL the browser opens the file. But if occur an error on the servlet, the browser opens an empty pdf with an error message. Sending an error through the ServletResponse the browser opens the default error page.

I want to send an error message without redirecting to an error page or opening an invalid pdf file.

I tried:

new Ajax.Request('/pdfservlet', {            
        onSuccess: function(response) {
            docWindow = window.open('','title');
            docWindow.document.open('application/pdf');
            docWindow.document.write(response);
            docWindow.document.close();
        },
        onFailure: function(response) {
            alert(response);
        }
    });

But, onSuccess opens a page with [object object]

How can I open a PDF file using JavaScript?

Solution 1

Note: I'm assuming you're using the Prototype framework from the Ajax.Request call.

The response object isn't meant to be written directly, it does however, have the responseText property which should contain the returned PDF.

Have you tried:

new Ajax.Request('/pdfservlet', {            
        onSuccess: function(response) {
            docWindow = window.open('','title');
            docWindow.document.open('application/pdf');
            document.write(response.responseText);
            docWindow.document.close();
        },
        onFailure: function(response) {
            alert(response);
        }
    });

(Notice the added .responseText)

Edit: Okay, so that didn't work... Try something like this:

new Ajax.Request('/pdfservlet', {            
        onSuccess: function(response) {
            window.open('/pdfservlet');
        },
        onFailure: function(response) {
            alert(response);
        }
    });

What this will do is create the ajax request, and if successful open it in a new window. Opening the new window should be fast and not actually require requesting the PDF again since the browser should have cached it during the Ajax.Request call.

Solution 2

You could try a "two-pass" approach. You use the Ajax to call the servlet ( and if it generates a PDF on the fly, have it cache it ). If it succeeds, redirect the user to the servlet with a parameter to load the cached PDF.

There are other options, but it depends on how you are using PDFs.

My $0.02..

Comments

[Michel Parmentier]

this doesn't open pdf application. opens a page with %PDF-1.6 %���� 1 0 obj <</Type/XObje

[Ben S]

I added a new solution, it's similar to what rde6173 suggested, but relies on the browser caching.

[Michel Parmentier]

the browser doesn't cache. the pdf is required two times.

[Amit Patil]

Yeah, document.open mimetype arguments outside the range listed in docs.sun.com/source/816-6408-10/document.htm#1196317 generally won't work. In Safari and Chrome, no mimetype other than text/html will work.

[Michel Parmentier]

I can set the 'Content-Type: text/xml' but how do I handle this in the client side?

[Amit Patil]

How about simply setting it to text/html and serving up a pleasant-looking error page? Then you can just link to the file and let the browser either download it, or handle the error. It might be appropriate to include a “try again” reload link if it's the kind of error that might go away on a second attempt.

[Michel Parmentier]

This works but I don't want to open an error page. I want to show the error in the same page.

[Ben S]

@bobince, Thanks! Good to know.