Question

我正在尝试将对POST请求的响应保存为.pdf文件，但它会一直打开为空白文档（具有正确的页数）。代码是：

var data = "credentials_login=xxxx&credentials_time=xxxxxxxxxxxxx&credentials_random=xxxxx&credentials_signature=xxxxxxxxxxxxxxxxxxxxx&PdfType=xxxxx";

var xhr = new XMLHttpRequest();


xhr.addEventListener("readystatechange", function () {
  if (this.readyState === 4) {

  $cordovaFile.writeFile(cordova.file.externalDataDirectory, "dc.pdf", this.responseText, true)
     .then(function(success) {
       console.log("success");
     }, function(error) {
       console.log(error.code);
     });
  }
});

xhr.open("POST", "http://xxxxxxx.ru/api/PdfDownload");
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhr.setRequestHeader("accept", "application/pdf");

xhr.send(data);

有趣的是，使用Postman发送的相同代码可以保存正确 PDF。

我现在一直在寻找解决方案，但没有任何效果。看起来它与该响应的关系是一个字符串而pdf不是，但我不确定究竟是什么。我尝试使用一些代码转换响应，在stackoverflow上找到，但PDF无论如何都是空白的：

 function stringToArrayBuffer(str) {
     var buf = new ArrayBuffer(str.length);
     var bufView = new Uint8Array(buf);

     for (var i = 0, strLen = str.length; i < strLen; i++) {
         bufView[i] = str.charCodeAt(i);
     }

     return buf;
 }

此外，我有“基本事实”PDF（例如我的PDF应该是什么样的），它看起来非常类似于我已损坏的版本，几乎相同的大小（960KB / 916KB）和之间的一些细微变化“流“标签。

正确PDF的开头：

%PDF-1.5
%����
1 0 obj
<</Type/XObject/Subtype/Form/Resources<</Font<</Helv 2 0 R>>>>/BBox[0 0 12.2 12.94]/FormType 1/Matrix [1 0 0 1 0 0]/Length 93/Filter/FlateDecode>>stream
x��;
�0�2�6���m$`cx� T�B<�OYX��L���0
d�Ӹ����0s�D��X��9i�帱Yf(��e׹EՉ�����
endstream
endobj

我腐败了：

%PDF-1.5
%����
1 0 obj
<</Type/XObject/Subtype/Form/Resources<</Font<</Helv 2 0 R>>>>/BBox[0 0 12.2 12.94]/FormType 1/Matrix [1 0 0 1 0 0]/Length 93/Filter/FlateDecode>>stream
x��;
�0�2�6���m$`cx� T�B<�OYX��L���0
d������0s�D��X��9i�1Yf(��e�EI�����
endstream
endobj

更新

FileTransfer代码：

 var fileTransfer = new FileTransfer();
 var uri = encodeURI("http://xxxxxx.ru/api/PdfDownload");
 var filePath = cordova.file.externalDataDirectory + "card.pdf";

 var params = {};

 params.credentials_login = "xxxxxxx";
 params.credentials_random = "xxxx";
 params.credentials_time = "xxxxxxxxx";
 params.credentials_signature = "xxxxxxx";
 params.id = "xxxxxx";
 params.PdfType = "1";


 fileTransfer.download(
     uri,
     filePath,
     function(entry) {
         alert("download complete: " + entry.fullPath);
     },
     function(error) {
         alert("download error source " + error.source);
         alert("download error target " + error.target);
         alert("upload error code" + error.code);
     },
     false,
     params
 );

Answer 1

我终于做到了！解决方案是添加一行：

xhr.responseType = "arraybuffer";

我之前尝试过，但收到了错误：

未捕获DOMException：无法从中读取'responseText'属性 'XMLHttpRequest'：只有对象的值才能访问该值 'responseType'是''或'text'（是'arraybuffer'）。

原来，这是因为我试图保存this.responseText，而不仅仅是this.response。我找不到关于这个错误的任何信息，所以只是转向其他假设。

工作代码如下所示：

var data = "credentials_login=xxxx&credentials_time=xxxxxxxxxxxxx&credentials_random=xxxxx&credentials_signature=xxxxxxxxxxxxxxxxxxxxx&PdfType=xxxxx";

var xhr = new XMLHttpRequest();
xhr.responseType = "arraybuffer";  // <--- this thing kept me busy for 4 days!
                                  //(╮°-°)╮┳━━┳ ( ╯°□°)╯ ┻━━┻

xhr.addEventListener("readystatechange", function () {
  if (this.readyState === 4) {

  $cordovaFile.writeFile(cordova.file.externalDataDirectory, "dc.pdf", this.response, true)
     .then(function(success) {
       console.log("success");
     }, function(error) {
       console.log(error.code);
     });
  }
});

xhr.open("POST", "http://xxxxxxx.ru/api/PdfDownload");
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhr.setRequestHeader("accept", "application/pdf");

xhr.send(data);

Answer 2

您可能更容易使用FileTransfer.download（）方法从服务器下载内容：http://docs.phonegap.com/en/edge/cordova_file_file.md.html#FileTransfer

var fileTransfer = new FileTransfer（）; var uri = encodeURI（“http://xxxxxxx.ru/api/PdfDownload”）;

fileTransfer.download(
    uri,
    filePath,
    function(entry) {
        console.log("download complete: " + entry.fullPath);
    },
    function(error) {
        console.log("download error source " + error.source);
        console.log("download error target " + error.target);
        console.log("upload error code" + error.code);
    },
    false,
    {
        headers: {
            "Authorization": "..."
        }
    }
);

在Cordova，Ionic

2 个答案: