对于任何偶然发现的人。以下是使用axios

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. 

    }
});

＆＃39; inputxml＆＃39;包含服务器的输入参数以创建PDF。和'数据＆＃39;在包含PDF流的成功函数中。有没有办法在AJAX调用的成功函数内打开浏览器上的PDF文件而不进行任何页面提交？在服务器端，PDF也不是物理生成的。非常感谢你的帮助......

Answer 1

为什么要通过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 2

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

假设您有一个pdf流我将其转换为base64并将其回送给我的AJAX：

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

这是我的AJAX代码。接收数据时，它会打开一个新窗口并用base64 endoded data替换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字符串。

Answer 3

对于任何偶然发现的人。以下是使用axios

的示例

responseType必须是'arrayBuffer'
从响应中创建Blob对象

从blob中创建一个“对象网址”，您可以将其加载到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);
    });

Answer 4

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

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

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

使用AJAX调用显示PDF

4 个答案:

对于任何偶然发现的人。以下是使用axios