如何通过ajax调用在新的浏览器窗口中显示来自服务器的pdf（或任何文档）

本文介绍了如何通过ajax调用在新的浏览器窗口中显示来自服务器的pdf（或任何文档）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

到目前为止，我已经完成了以下工作。

步骤1：
通过按钮点击并传递文件名，对服务器进行ajax调用：

 code> $（document）.ready（
 function（）{
 $（'＃clickme'）。click（function（）{
 $ .ajax（{
类型：GET，
 url：App / getfile，
 data：{'filename'：'D：\\\sample.pdf'} 
}） （function（msg）{
 var wind = window.open（_ blank）; 
 wind.document.write（msg）; 
}）; 
}）; 
} 
）;

步骤2：我在服务器端使用弹簧控制器：

  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，produce =application / pdf）
 public void serve（HttpServletRequest请求，HttpServletResponse响应）throws 
异常{
 InputStream is = new FileInputStream（new File（request.getParameter（filename）））; 
 response.setHeader（Content-Type，application / pdf）; 
 response.setHeader（Content-Disposition，attachment; filename ='mypdf.pdf'）; 
 int读; 
 while（（read = is.read（））！=  -  1）{
 response.getOutputStream（）。write（read）; 
} 
 
 response.flushBuffer（）; 
} 
}

当PDF已被发送到浏览器作为字节。从ajax代码，你可以看到我正在写一个新窗口，它看起来像下面

％PDF-1.4 5 0 obj<< /长度119 /过滤器/ FlateDecode >>流xڍ 0 wŽ U 4 2 LA N a J [ ，Cendstream endobj 4 0 obj< / Type / Page / Contents 5 0 R /资源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] /资源<< / 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 >>>> /长度374 /过滤器/ FlateDecode >>流H l N @ > j& ）]TDY AH EQEm2- gBBV ߟ J Pk D ， @@ HbFM？@ Ȭ ѝ$ > pu T P）6 Tk g|2 Q，S $ B 9U＃！F]'p ^ \9 $$ + 6）6Ι1RyĞ-（j！0煌ç$e,?tr^.?IL֞？n7MiKŸNdC？ 뿍ɏɏ خخ ᇈᇈᇈᇈᇈ S ] = S u ^ AۇٴǏjh Ǘ @ xendstream endobj 7 0 obj<< /创建日期（D：20020328003700Z）/ ModDate（D：20020327163822-08'00'）/制片人（Acrobat Distiller 5.0.5（Windows））/作者（Duarte）/创作者（ADOBEPS4.DRV版本4.50）/标题（会话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 278 463 463] /编码/ 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] /编码/ 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

正如您可以看到它向我显示页面上的任何地方的Unicode字符。但是我希望它像普通的pdf（或）任何其他文件（excel，doc，ppt）一样显示。

我该怎么做？

解决方案

感谢您帮助我。

我遵循了Shay的建议，并按预期工作。

我做了一个 window.open（App / getfile？filepath =+ String（file），_ blank）; 在我的js和它的工作伟大。 Hopefull请告诉我是否可以在浏览器中使用mime类型打开微软文件（.doc，.docx，.ppt，.pptx，.xls，.xlsx）。

注意：浏览器是Internet Explorer 8.0

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?

解决方案

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

这篇关于如何通过ajax调用在新的浏览器窗口中显示来自服务器的pdf（或任何文档）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！