使用 AJAX 调用显示 PDF

Question

我正在尝试通过 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. 

    }
});

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

Answer 1

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

1. responseType 必须是 'arrayBuffer'
2. 根据响应创建 Blob 对象

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

       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);
       });
   

Answer 2

为什么要通过 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);
        }
    });
});

Answer 3

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

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

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

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

   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字符串。

Answer 4

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

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

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