如何使用javascript从web服务返回的二进制字符串构建PDF文件 [英] How to build PDF file from binary string returned from a web-service using javascript

问题描述

通过XmlHttpRequest接收以下数据：

我尝试从二进制流构建一个PDF文件，作为ajax请求的响应。 / p>

 ％PDF-1.4 .... 
 ..... 
 ....表示文件
 .... 
 %% EOF 
  

到目前为止，是通过数据：uri嵌入我的数据。

现在，它没有什么错。
它工作正常。不幸的是它在IE9和FF中不起作用。

可能的原因可能是FF和IE9在使用data-uri时有问题。

现在，我正在寻找适用于所有浏览器的任何解决方案。

这里是我的代码：

  // responseText encoding 
 pdfText = $。base64.decode（$。trim（pdfText））; 
 
 //现在pdf文件包含％PDF-1.4 ......数据... %% 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>'; 
 
 //在新的浏览器窗口中打开PDF 
 var detailWindow = window.open（，winlogicalname，winparams）; 
 detailWindow.document.write（htmlText）; 
 detailWindow.document.close（）; 
  

正如我所说，它适用于Opera和Chrome（Safari未测试）。
使用IE或FF将会打开一个空白的新窗口。

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

我需要一个解决方案，在所有浏览器
，至少在IE，FF，Opera，Chrome和Safari。 >

我没有编辑网络服务实现的权限。所以它必须是一个解决方案
在客户端。

任何想法

解决方案

有没有任何解决方案，像在文件系统上建立一个pdf文件，按照
让用户下载？

尝试将 XMLHttpRequest 的 responseType 设置为 blob ，下载属性 c> window.open 允许从 XMLHttpRequest 下载响应为 .pdf / p>



  var request = new XMLHttpRequest（）; 
 request.open（GET，/ path / to / pdf，true）; 
 request.responseType =blob; 
 request.onload = function（e）{
 if（this.status === 200）{
 //`blob`响应
 console.log（this.response） ; 
 // create`objectURL```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（）; 
 //在另存为对话框之后删除`a`，
 //`window`重新获得焦点
 window.onfocus = function（）{
 document.body。 removeChild（a）
} 
}; 
}; 
 request.send（）; 
  




I am trying to build a PDF file out of a binary stream which I receive as a response from an ajax request.

Via XmlHttpRequest i receive following data:

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

What I tried so far, was to embed my data via data:uri.

Now, there's nothing wrong with it. It works fine. Unfortunately it does not work in IE9, and FF.

Possible reason may be that FF and IE9 have there problems with this usage of the data-uri.

Now, I'm looking for any solution that works for all browsers.

Here's my code:

// 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 ();

As I said .... it works fine for Opera and Chrome (Safari not tested). Using IE or FF will bring up a blank new window.

Is there any solution like building a pdf file on file system in order to let the user download it?

I need a solution that works in all browsers at least in IE, FF, Opera, Chrome and Safari.

I have no permission to edit the web-service implementation. So it had to be a solution at client-side.

Any ideas???

解决方案

Is there any solution like building a pdf file on file system in order to let the user download it?

Try setting responseType of XMLHttpRequest to blob , substituting download attribute at a element for window.open to allow download of response from XMLHttpRequest as .pdf file

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

这篇关于如何使用javascript从web服务返回的二进制字符串构建PDF文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！