javascript - 在 Cordova、Ionic 中将 POST 响应保存为文件 (.pdf)

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

我还有“ground truth”PDF(例如我的 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

更新

文件传输代码:

 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";

我之前试过这个，但是有一个错误:

Uncaught DOMException: Failed to read the 'responseText' property from 'XMLHttpRequest': The value is only accessible if the object's 'responseType' is '' or 'text' (was '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);