AJAX：将文件发送到Servlet并在新窗口中打开响应

Question

in my application, users can edit an ODF file via WebODF ( http://webodf.org/ ). On save, i want to send the edited file to a servlet, have it convert to PDF via ODFDOM ( http://code.google.com/p/xdocreport/wiki/ODFDOMConverterPDFViaIText ) and open in a new window.

Currently i am trying to do this via AJAX. Everything works fine up to the point where i try to open the received PDF file.

My Javascript:

function showPDF(pServletUrl)
        {               
            var successCallback = function(pData)
            {
                var mimetype = "application/vnd.oasis.opendocument.text";
                var blob = new Blob([pData.buffer], {type: mimetype});
                var formData = new FormData();
                formData.append("file", blob, "test.odt");
                jQuery.ajax({
                    type: "POST", 
                    url: pServletUrl,
                    async: false, 
                    data: formData,
                    processData: false,
                    contentType: false, 
                    success: function(pSuccessData) 
                    { 
                        window.open(pSuccessData);
                    }, 
                    error: function(pErrorData) 
                    { 
                        console.log(pErrorData); 
                    }
                });
            }

            var errorCallback = function(data)
            {
                console.log(error);
            }

            _canvas.odfContainer().createByteArray(successCallback, errorCallback);
        }

My servlet:

public void handleRequest(HttpServletRequest pRequest, HttpServletResponse pResponse) throws ServletException, IOException
{
    BufferedInputStream tBufferedInput = null;
    BufferedOutputStream tBufferedOutput = null;

    try 
    {
        List<FileItem> tItems = new ServletFileUpload(new DiskFileItemFactory()).parseRequest(pRequest);
        for (FileItem tItem : tItems) 
        {
            if (!tItem.isFormField()) 
            {
                String tFieldname = tItem.getFieldName();
                String tFilename = FilenameUtils.getName(tItem.getName());
                InputStream tFilecontent = tItem.getInputStream();

                if("file".equals(tFieldname))
                {
                    tBufferedInput = new BufferedInputStream(tFilecontent);
                    pResponse.reset();
                    pResponse.setHeader("Content-Type", "application/pdf");
                    pResponse.setHeader("Content-Disposition", "inline; filename=\"" + "test.pdf" + "\"");
                    tBufferedOutput = new BufferedOutputStream(pResponse.getOutputStream(), 10240);

                    this.getOdtAsPdf(tBufferedInput, tBufferedOutput);

                    tBufferedOutput.flush();
                }
            }
        }
    }   
    catch(Exception e)
    {
        e.printStackTrace();
    }
    finally
    {
        try
        {
            tBufferedInput.close();
            tBufferedOutput.close();
        }
        catch(Exception e)
        {

        }
    }
}

private void getOdtAsPdf(InputStream pInputStream, OutputStream pOutputStream) throws Exception
{
    OdfDocument tOdfDocument = OdfDocument.loadDocument(pInputStream);
    PdfOptions tPdfOptions = PdfOptions.create();
    PdfConverter.getInstance().convert(tOdfDocument, pOutputStream, tPdfOptions);
}

It seems like Javascript wants to parse the recieved PDF file as a URL and (obviously) fails doing so. Is there a way to just open the file in a new window or do i have to find another way to do this?

Answer 1

You can't open the file using Ajax. This is a security restriction fo javascript. You have a few workarounds:

1. use a plugin which gives a Ajax type experience but opens a file in a new window. more details here
2. have a form which is submitted to a new window. <form target=_blank /> this will cause a new window to open thus not changing the contents of your current page.
3. Another option (not so neat) is to store the file in session and in the response of your AJAX, pass the id. Then using Javascript make a call using window.open('downloadurl?id') which will send the response of your PDF file.

Answer 2

You can make use an embed tag to display your blob after you make an ajax call.

Use createObjectUrl method to get url from blob and then display your pdf.