如何使用javascript从Web服务返回的二进制字符串构建PDF文件

Question

我试图从二进制流构建一个PDF文件,我收到它作为Ajax请求的响应.

通过XmlHttpRequest我收到以下数据:

%PDF-1.4....
.....
....hole data representing the file
....
%% EOF

到目前为止我尝试的是通过嵌入我的数据data:uri.现在,它没有任何问题,它工作正常.不幸的是,它在IE9和Firefox中不起作用.可能的原因可能是FF和IE9在使用时遇到了问题data-uri.

现在,我正在寻找适用于所有浏览器的解决方案.这是我的代码:

// responseText encoding 
pdfText = $.base64.decode($.trim(pdfText));

// Now pdfText contains %PDF-1.4 ...... data...... %%EOF

var winlogicalname = "detailPDF";
var winparams = 'dependent=yes,locationbar=no,scrollbars=yes,menubar=yes,'+
            'resizable,screenX=50,screenY=50,width=850,height=1050';

var htmlText = '<embed width=100% height=100%'
                     + ' type="application/pdf"'
                     + ' src="data:application/pdf,'
                     + escape(pdfText)
                     + '"></embed>'; 

                // Open PDF in new browser window
                var detailWindow = window.open ("", winlogicalname, winparams);
                detailWindow.document.write(htmlText);
                detailWindow.document.close();

正如我所说,它适用于Opera和Chrome(Safari尚未经过测试).使用IE或FF将显示一个空白的新窗口.

是否有任何解决方案,如在文件系统上构建PDF文件,以便让用户下载它？我需要适用于所有浏览器的解决方案,至少在IE,FF,Opera,Chrome和Safari中.

我无权编辑Web服务实现.所以它必须是客户端的解决方案.有任何想法吗？

Answer 1

有没有像在文件系统上构建pdf文件以便让用户下载它的解决方案？

尝试设置responseType的XMLHttpRequest到blob,用 download在属性a元素window.open,使响应的下载从XMLHttpRequest作为.pdf文件

var request = new XMLHttpRequest();
request.open("GET", "/path/to/pdf", true); 
request.responseType = "blob";
request.onload = function (e) {
    if (this.status === 200) {
        // `blob` response
        console.log(this.response);
        // create `objectURL` of `this.response` : `.pdf` as `Blob`
        var file = window.URL.createObjectURL(this.response);
        var a = document.createElement("a");
        a.href = file;
        a.download = this.response.name || "detailPDF";
        document.body.appendChild(a);
        a.click();
        // remove `a` following `Save As` dialog, 
        // `window` regains `focus`
        window.onfocus = function () {                     
          document.body.removeChild(a)
        }
    };
};
request.send();

Answer 2

我意识到这是一个相当古老的问题,但这是我今天提出的解决方案:

doSomethingToRequestData().then(function(downloadedFile) {
  // create a download anchor tag
  var downloadLink      = document.createElement('a');
  downloadLink.target   = '_blank';
  downloadLink.download = 'name_to_give_saved_file.pdf';

  // convert downloaded data to a Blob
  var blob = new Blob([downloadedFile.data], { type: 'application/pdf' });

  // create an object URL from the Blob
  var URL = window.URL || window.webkitURL;
  var downloadUrl = URL.createObjectURL(blob);

  // set object URL as the anchor's href
  downloadLink.href = downloadUrl;

  // append the anchor to document body
  document.body.append(downloadLink);

  // fire a click event on the anchor
  downloadLink.click();

  // cleanup: remove element and revoke object URL
  document.body.removeChild(downloadLink);
  URL.revokeObjectURL(downloadUrl);
}

Answer 3

我改变了这个：

var htmlText = '<embed width=100% height=100%'
                 + ' type="application/pdf"'
                 + ' src="data:application/pdf,'
                 + escape(pdfText)
                 + '"></embed>'; 

到

var htmlText = '<embed width=100% height=100%'
                 + ' type="application/pdf"'
                 + ' src="data:application/pdf;base64,'
                 + escape(pdfText)
                 + '"></embed>'; 

这对我有用。

Answer 4

我最近看到了关于这个主题的另一个问题（使用 dataurl 将 pdf 流式传输到 iframe 仅适用于 chrome）。

我已经在 ast 中构建了 pdf 并将它们传输到浏览器。我首先使用 fdf 创建它们，然后使用我自己编写的 pdf 类创建它们 - 在每种情况下，pdf 都是根据通过 url 传入的几个 GET 参数从 COM 对象检索的数据创建的。

从查看 ajax 调用中收到的发送数据来看，您似乎已经快到了。我已经好几年没有使用这些代码了，也没有像我所关心的那样记录它，但是 - 我认为您需要做的就是将 iframe 的目标设置为 url你从那里得到pdf。虽然这可能不起作用 - 输出 pdf 的文件可能还必须首先输出 html 响应标头。

简而言之，这是我使用的输出代码：

//We send to a browser
header('Content-Type: application/pdf');
if(headers_sent())
    $this->Error('Some data has already been output, can\'t send PDF file');
header('Content-Length: '.strlen($this->buffer));
header('Content-Disposition: inline; filename="'.$name.'"');
header('Cache-Control: private, max-age=0, must-revalidate');
header('Pragma: public');
ini_set('zlib.output_compression','0');
echo $this->buffer;

因此，在没有看到 ajax 调用的完整响应文本的情况下，我无法真正确定它是什么，尽管我倾向于认为输出您请求的 pdf 的代码可能只相当于最后一个上面代码中的一行。如果它是您可以控制的代码，我会尝试设置标头 - 这样浏览器就可以处理响应文本 - 您不必费心对其做任何事情。

我只是为我想要的 pdf（时间表）构建了一个 url，然后创建了一个字符串，该字符串表示所需 sie、id 等 iframe 的 html，该字符串使用构建的 url 作为 src。一旦我将 div 的内部 html 设置为构造的 html 字符串，浏览器就会要求提供 pdf，然后在收到时显示它。

function  showPdfTt(studentId)
{
    var url, tgt;
    title = byId("popupTitle");
    title.innerHTML = "Timetable for " + studentId;
    tgt = byId("popupContent");
    url = "pdftimetable.php?";
    url += "id="+studentId;
    url += "&type=Student";
    tgt.innerHTML = "<iframe onload=\"centerElem(byId('box'))\" src='"+url+"' width=\"700px\" height=\"500px\"></iframe>";
}

编辑：忘记提及 - 您可以通过这种方式发送二进制 pdf。它们包含的流不需要进行 ascii85 或十六进制编码。我在 pdf 中的所有流上使用了 flate，效果很好。