15

我正在尝试通过 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 也不是物理生成的。非常感谢您的帮助....

4

4 回答 4

16

为什么要通过 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);
        }
    });
});
于 2013-01-28T09:39:55.377 回答
7

这是我处理这个问题的方法。它基于此 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 字符串。

于 2016-03-10T13:13:50.587 回答
3

对于任何偶然发现这一点的人。这是一个使用 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);
    });
于 2017-09-01T21:35:31.857 回答
0

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

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

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

于 2013-01-28T09:44:44.123 回答