jQuery 使用 AJAX 调用显示 PDF

Display PDF using an AJAX call

提问by Knissanka

I'm trying to display a PDF(which is created in the server side and pass to the client side as a web stream) through an AJAX call. My code is given below:

我正在尝试通过 AJAX 调用显示 PDF（在服务器端创建并作为 Web 流传递到客户端）。我的代码如下：

jQuery.ajax({
    type: "POST",
    processData: false,
    url: "aaaa.p?name=pdf",
    data: inputxml,
    contentType: "application/xml; charset=utf-8",
    success: function(data)
    {
      // here the data is the PDF stream i'm getting from the server side. 

    }
});

The 'inputxml' is containing input parameters for the server to create the PDF. and the 'data' in the success function containing PDF stream. Is there any way to open the PDF file on the browser inside the success function of the AJAX call with-out doing any page submit? In the server side the PDF is not physically generated also. Highly appreciate your help....

'inputxml' 包含服务器创建 PDF 的输入参数。以及包含 PDF 流的成功函数中的“数据”。有什么方法可以在 AJAX 调用的成功函数内打开浏览器上的 PDF 文件，而无需进行任何页面提交？在服务器端，PDF 也不是物理生成的。非常感谢您的帮助....

回答by Zim84

Why do you load it via AJAX? Why don't you load it in an IFRAME that you generate when you need it. The standard browsers plugin will display it then inside that Iframe.

为什么要通过 AJAX 加载它？为什么不在需要时生成的 IFRAME 中加载它。标准浏览器插件将在该 Iframe 中显示它。

$('#link').click(function(e) {
    e.preventDefault(); // if you have a URL in the link
    jQuery.ajax({
        type: "POST",
        processData: false,
        url: "aaaa.p?name=pdf",
        data: inputxml,
        contentType: "application/xml; charset=utf-8",
        success: function(data)
        {
            var iframe = $('<iframe>');
            iframe.attr('src','/pdf/yourpdf.pdf?options=first&second=here');
            $('#targetDiv').append(iframe);
        }
    });
});

回答by andrzej.szmukala

Here is my way of dealing with this issue. It is based on line 50 of this pdfmake file (https://github.com/bpampuch/pdfmake/blob/master/src/browser-extensions/pdfMake.js).

这是我处理这个问题的方法。它基于此 pdfmake 文件的第 50 行（https://github.com/bpampuch/pdfmake/blob/master/src/browser-extensions/pdfMake.js）。

1. assuming you have a pdf stream I convert it to base64 and echo it back to my AJAX:

   $pdfString = $mpdf->Output('', 'S');
   $pdfBase64 = base64_encode($pdfString);
   echo 'data:application/pdf;base64,' . $pdfBase64;
   

2. Here is my AJAX code. When receiving data it opens a new window and replaces url with base64 endoded data:

   var ajaxRequest = $.ajax({
       url: "php/generate-pdf/print-control.php",
       data: '',
       cache: false,
       contentType: 'application/json',
       processData: false,
       type: 'POST'
   
   });
   $.when(ajaxRequest).done(function (ajaxValue) {
       var win = window.open('', '_blank');
       win.location.href = ajaxValue;
   });
   

   The downside of this method is that you get a base64 string in the adress bar.

1. 假设您有一个 pdf 流，我将其转换为 base64 并将其回显到我的 AJAX：

   $pdfString = $mpdf->Output('', 'S');
   $pdfBase64 = base64_encode($pdfString);
   echo 'data:application/pdf;base64,' . $pdfBase64;
   

2. 这是我的 AJAX 代码。接收数据时，它会打开一个新窗口并用 base64 编码数据替换 url：

   var ajaxRequest = $.ajax({
       url: "php/generate-pdf/print-control.php",
       data: '',
       cache: false,
       contentType: 'application/json',
       processData: false,
       type: 'POST'
   
   });
   $.when(ajaxRequest).done(function (ajaxValue) {
       var win = window.open('', '_blank');
       win.location.href = ajaxValue;
   });
   

   这种方法的缺点是你会在地址栏中得到一个 base64 字符串。

回答by Chris Rocco

For anybody that stumbles across this. Here is an example using axios

对于任何偶然发现这一点的人。这是一个使用 axios 的例子

1. responseType must be 'arrayBuffer'
2. create a Blob object from response

3. create an "object url" from the blob that you can load into the iframe

       axios({
           url: `path/to/pdf`,
           method: "GET",
           responseType: 'arraybuffer'
       }).then((response) => {
           let blob = new Blob([response.data], { type: response.headers['content-type'] } );
           let url = window.URL.createObjectURL(blob);
   
           $('#frame').attr('src',url);
       });
   

1. responseType 必须是“arrayBuffer”
2. 从响应创建一个 Blob 对象

3. 从 blob 创建一个“对象 url”，您可以将其加载到 iframe 中

       axios({
           url: `path/to/pdf`,
           method: "GET",
           responseType: 'arraybuffer'
       }).then((response) => {
           let blob = new Blob([response.data], { type: response.headers['content-type'] } );
           let url = window.URL.createObjectURL(blob);
   
           $('#frame').attr('src',url);
       });
   

回答by lethal-guitar

You can generate a temporary URL to access the PDF file stored on the server, instead of sending it back to the AJAX call. Just pass the generated URL back to the client. Then, when you receive the URL, you could for example do a window.location =to redirect the browser to the download.

您可以生成一个临时 URL 来访问存储在服务器上的 PDF 文件，而不是将其发送回 AJAX 调用。只需将生成的 URL 传递回客户端。然后，当您收到 URL 时，您可以例如执行 awindow.location =将浏览器重定向到下载。

Make sure that the correct headers are set for the generated file (Content-Disposition: attachmentetc.), and all should be fine.

确保为生成的文件（Content-Disposition: attachment等）设置了正确的标题，一切都应该没问题。

Edit:Although you could probably just use a regular (non-JavaScript) link to generate and download the file. But doing it via AJAX enables you to show some specific animation etc. to the user while the file is being generated.

编辑：虽然您可能只使用常规（非 JavaScript）链接来生成和下载文件。但是通过 AJAX 执行此操作可以让您在生成文件时向用户显示一些特定的动画等。