How to display pdf ( or any document) from server

Question

How to render the documents in a new browser window using an ajax call to server.

So far, I've done the following.

Step 1: make an ajax call to server on button click and passing the filename:

$(document).ready(
    function(){
        $('#clickme').click(function(){
            $.ajax({
                type:"GET",
                url:"App/getfile",
                data:{'filename':'D:\\sample.pdf'}
            }).done(function(msg){
                var wind = window.open("_blank");
                wind.document.write(msg);
            });
        });
    }
    );

step 2: I am using spring controller on the server side:

package my.test;
import java.io.File;
import java.io.FileInputStream;
import java.io.InputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
public class ServeFiles {
@RequestMapping(value="getfile",method=RequestMethod.GET,produces="application/pdf")
public void serve(HttpServletRequest request,HttpServletResponse response) throws   
Exception{
InputStream is = new FileInputStream(new File(request.getParameter("filename")));
response.setHeader("Content-Type", "application/pdf");
response.setHeader("Content-Disposition", "attachment;filename='mypdf.pdf'");
int read;
while((read=is.read())!=-1){
    response.getOutputStream().write(read);
}

response.flushBuffer();
}
}

when the pdf has been sent to browser as bytes. from the ajax code, you can see that i am writing it to a new window, which is lookin like below

%PDF-1.4 5 0 obj << /Length 119 /Filter /FlateDecode >> stream xڍ�� �0�w?Ž�U��4��2�������LA��N��"����a��k��>�IB�>�����x&���U�Ox��pJ&� ��ذ9�����l���+����A�v;�[�,Cendstream endobj 4 0 obj << /Type /Page /Contents 5 0 R /Resources 3 0 R /MediaBox [0 0 792 612] /Parent 6 0 R >> endobj 2 0 obj << /Type /XObject /Subtype /Form /FormType 1 /PTEX.FileName (../Puzzlers.pdf) /PTEX.PageNumber 1 /PTEX.InfoDict 7 0 R /Matrix [0 -1 1 0 0 540] /BBox [0 0 540 720] /Resources << /ProcSet [ /PDF /Text /ImageC ] /Font << /F1 8 0 R /F2 9 0 R /F3 10 0 R /TT2 11 0 R>> /XObject << /Im1 12 0 R /Im2 13 0 R >>/ExtGState << /GS1 14 0 R >>/ColorSpace << /Cs6 15 0 R >>>> /Length 374 /Filter /FlateDecode >> stream H�l��N�@���>j&��)]TDY�AH�EQEm"2-��gBBV����ߟ��J�Pk ��D�, ��@@Hb���F��M�@���Ȭ��ѝ$����>�pu �����T�P)6�Tk��g|2�Q,S��$���B����9U��#��!��F�]�'�p�^�\9�$�$+6)6Ι1��R�y��Ğ�-�(J!0煌c�$��e��,��t�����r�^�.��I��L�֞�?n�7�MiK�ŸNd�C�B��ɜˌ]뿍ɏ~���S�}�L�$�Ǫma�=ﺦF�"v ���p�M��e��a���pyBuᇈFb��S�]=��S����u�^AٷǏjh��Ǘ�@�x endstream endobj 7 0 obj << /CreationDate (D:20020328003700Z) /ModDate (D:20020327163822-08'00') /Producer (Acrobat Distiller 5.0.5 (Windows)) /Author (Duarte) /Creator (ADOBEPS4.DRV Version 4.50) /Title (Session 2500_Bloch, J) >> endobj 8 0 obj << /Type /Font /Subtype /Type1 /FirstChar 32 /LastChar 148 /Widths [ 278 278 463 556 556 1000 685 278 296 296 407 600 278 407 278 371 556 556 556 556 556 556 556 556 556 556 278 278 600 600 600 556 800 685 704 741 741 648 593 759 741 295 556 722 593 907 741 778 667 778 722 649 611 741 630 944 667 667 648 333 371 333 600 500 259 574 611 574 611 574 333 611 593 258 278 574 258 906 593 611 611 611 389 537 352 593 520 814 537 519 519 333 223 333 600 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 278 463 463] /Encoding /WinAnsiEncoding /BaseFont /CABMEJ#2BHelveticaNeue-Bold /FontDescriptor 16 0 R >> endobj 9 0 obj << /Type /Font /Subtype /Type1 /FirstChar 32 /LastChar 117 /Widths [ 278 278 444 556 556 1000 648 278 278 278 370 600 278 389 278 352 556 556 556 556 556 556 556 556 556 556 278 278 600 600 600 556 800 667 704 722 722 630 593 759 722 278 537 685 574 889 722 760 667 760 704 648 593 722 611 944 648 648 630 296 352 296 600 500 241 556 611 556 611 556 315 593 574 241 241 537 241 870 574 593 611 611 352 519 333 574] /Encoding /WinAnsiEncoding /BaseFont /CABMIB#2BHelveticaNeue-Medium /FontDescriptor 17 0 R >> endobj 10 0 obj << /Type /Font /Subtype /Type1 /FirstChar 32 /LastChar 153 /Widths [ 278 259 426 556 556 1000 630 278 259 259 352 600 278 389 278 333 556 5

As you can see its showing me the Unicode characters everywhere on page. But I want it to be displayed like a normal pdf (or) any other document(excel,doc,ppt).

How can i do that?

Answer 1

Thank you for helping me out.

I followed the suggestion by Shay and its working as expected.

I did a window.open("App/getfile?filepath="+String(file),"_blank"); in my js and its working great. Hopefull please tell if i can open microsoft doc files like(.doc,.docx,.ppt,.pptx,.xls,.xlsx) in browser using mime types.

Note: browser is Internet Explorer 8.0

Answer 2

As Dirk Lachowski mentioned in his comment, the approach you're taking is a bit problematic. The pdf is a binary file (not ascii) and thus it required a certain content-type so that the browser interprets it as you wanted (I see that you did use "produces application/pdf" in your Java code)

Your controller method appears ok. So, simply try to open the link on a new window by doing something like:

<a href="App/getfile?filename=YOUR_FILE" target="_blank">Click to view</a>

Good luck!

Answer 3

try with iframe/open file in new window/tab.