使用AJAX调用显示PDF

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

为什么要通过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 = $(' 

Answer 2

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

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

Answer 3

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

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

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

Answer 4

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

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