使用AJAX发布base64编码的PDF文件

时间:2017-02-13 22:14:57

标签: javascript ajax binary-data zendesk-api zendesk-app

我试图将base64编码的PDF文件发布到Zendesk文件上传API端点,但从API返回的文件URL显示该文件已损坏。

首先,我从单独的API调用中接收PDF作为base64编码的字符串。我们称之为base64String

如果我window.open("data:application/pdf;base64," + base64String)我可以在浏览器中查看PDF。

现在,我正在尝试按照文档here通过API上传文件。我可以成功完成cURL调用,如示例所示。但是,jQuery AJAX调用会破坏PDF文件。

client.request({
  url: '/api/v2/uploads.json?filename=test.pdf',
  type: 'POST',
  data: atob(base64String),
  contentType: 'application/binary'
}).then(function(data) {
  window.open(data.upload.attachment.content_url);  // corrupt file
}, function(response) {
  console.log("Failed to upload file to Zendesk.");
  console.log(response);
});

就像我说的,这会成功,但是当我访问content_url时,PDF不会显示。我非常确定POST请求中的文件已损坏。

我尝试将文件上传为base64字符串(不使用atob()进行解码),但没有运气。

更新

将base64字符串转换为blob后,我仍然无法查看PDF。

var blob = base64ToBlob(base64String);
console.log(blob);  // Blob {size:39574, type: "application/pdf"}

client.request({
  url: '/api/v2/uploads.json?filename=test.pdf',
  type: 'POST',
  data: blob,
  processData: false,
  contentType: 'application/pdf'
}).then(function(data) {
  window.open(data.upload.attachment.content_url);  // corrupt file
}, function(response) {
  console.log("Failed to upload file to Zendesk.");
  console.log(response);
});

function base64ToBlob(byteString) {
  // write the bytes of the string to an ArrayBuffer
  var ab = new ArrayBuffer(byteString.length);
  var ia = new Uint8Array(ab);
  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }

  // write the ArrayBuffer to a blob, and you're done
  var blob = new Blob([ab], {type: 'application/pdf'});
  return blob;
};

1 个答案:

答案 0 :(得分:0)

我了解到Zendesk应用程序框架对请求使用了jQuery AJAX包装器,并且不支持arraybuffer类型,因此文件已损坏。应用程序框架团队已经解决了这个问题。