Dropbox API和使用javascript下载图像

Question

我有一个问题，我使用XMLHttpRequest在Dropbox中获取文件，每个POST等都能正常工作，但是当我检查我的response / responseText时，如下所示：

"�PNG
↵↵
IHDR,,�"    pHYs��↵OiCCPPhotoshop ICC profilexڝSgTS�=���BK���KoR RB���&*!   J�!��Q�EEȠ�����Q,�↵��!���������{�kּ������>��������H3Q5��B�������.@�↵$p�d!s�#�~<<+"��x��M��0���B�\���t�8K�@z�B�@F���&S�`�cb�P-`'������{[�!�� e�Dh;��V�EX0fK�9�-0IWfH�����0Q��){`�##x��F�W<�+��*x��<�$9E�[-qWW.(�I+6aa�@.�y�2�4���������x����6��_-���"bb���ϫp@�t~��,/��;�m��%�h^�u��f�@����W�p�~<<E���������J�B[a�W}�g�_�W�l�~_�↵]2�v����HX}��sɤ��뾲*,9�4S���=3 _���Yijl���#[����g�M�{��OI�FԍΡ��
�7B|u���>w������7P!��Ïpp�p��ûoο�k~��!!BB� �!@B� �!@B��!!BB� �!@B� �!@B��!!BB� �!@B� �!@B��!!BB� �!@B� �!@BB� �!@B� �!@B��!!BB� �!@B� �!@B��!!BB� �!@B� �!@B���+�h+`/��!@B��!!BB� �!@B� �!@B��!�Z�oj�A   N�fJIEND�B`�"

我认为那是我的照片吗？ 那我该如何下载呢？

function showImage() {
    var foldersFiles = [];
    var data = {
        "path": "/path_to_my_file/mypicture.png"
    }

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
        console.log(xhttp.responseText);
    }
  };
  xhttp.open("POST", "https://content.dropboxapi.com/2/files/download", true);
  xhttp.setRequestHeader("Authorization", "Bearer My_Access_Token");  
    xhttp.setRequestHeader("Dropbox-API-Arg", JSON.stringify(data));
  xhttp.send();
//    xhttp.send(data);
}

Answer 1

这是至少在某些浏览器中有效的一些代码。 具体来说，我认为下载部分根本无法在IE中使用。 （我仅在两种技术都可以使用的Chrome中进行了测试。）

var token = '<REDACTED>';

var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var imageUrl = (window.URL || window.webkitURL).createObjectURL(xhr.response);

        // display, assuming <img id="image"> somewhere
        document.getElementById('image').src = imageUrl;

        // download via the download attribute: limited browser support
        var a = document.createElement('a');
        a.download = 'test.png';
        a.href = imageUrl;
        a.click();
    }
};
xhr.open('POST', 'https://content.dropboxapi.com/2/files/download');
xhr.setRequestHeader('Authorization', 'Bearer ' + token);
xhr.setRequestHeader('Dropbox-API-Arg', JSON.stringify({ path: '/test.png' }));
xhr.send();