Microsoft Graph API 附件处理

Question

I seem to be having problems decoding attachments from MS Graph API. At least, that's what I think the problem is. Below is a simple JS Sample.

        local.downloadAttachment = function (data) {
            $.get("https://graph.microsoft.com/v1.0/me/messages/" + self.EmailID() + "/attachments/" + data.id, null, function (results) {
                var bytes = new Uint8Array(results.contentBytes); // pass your byte response to this constructor
                var blob = new Blob([bytes], { type: results.contentType });// change resultByte to bytes

                //Alt method, also doesn't work but seems a lot closer to the right solution.
                //var altBytes = $.base64.decode(results.contentBytes);
                //var blob = new Blob([altBytes], { type: results.contentType });

                var link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = results.name;
                link.click();
            });
        };

I've noticed a couple oddities. The contentType seems to be wrong, PDFs are typed as application/octet-stream I would have expected application/pdf . JPEG images appear to be typed correctly, however, I don't think this is the problem.

I've tried using atob when decoding and using /$results to receive the file content in binary form.

Any ideas would be great.

Answer 1

According to the documentation the Office 365 Unified API returns **base64-encoded** contents of attachments. If you were interested in processing these contents, you would first need to convert them to the original binary data. Theoretically this can easily be done by calling the window.atob(base64string) function to base64-decode the contents string and then convert it to a byte array.

Unfortunately if you would try to open the file after such processing you would find out that it's broken and its contents are unreadable.

It turns out that attachments contents returned by the Office 365 Unified API are base64-encoded not once but twice! So in order to get the binary contents you have to wrap the window.atob call with another window.atob call. This will allow you to get the binary contents of your attachment just as expected:

function getBinaryFileContents(base64FileContents) {
  // atob has to be called twice because the FileAttachment.ContentBytes property
  // return by the attachments endpoint is base64-encoded twice
  var raw = window.atob(window.atob(base64FileContents));
  var rawLength = raw.length;
  var array = new Uint8Array(new ArrayBuffer(rawLength));

  for(var i = 0; i < rawLength; i++) {
    array[i] = raw.charCodeAt(i);
  }

  return array;
}

Additional reference:

https://blog.mastykarz.nl/office-365-unified-api-mail/

Try and see if it helps.

Answer 2

Thanks @Mohit Verma, you helped get me back on track. However, the double decoding didn't seem to be the exact issue as the following code throws a

Uncaught DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.

        local.downloadAttachment = function (data) {
            $.get("https://graph.microsoft.com/v1.0/me/messages/" + self.EmailID() + "/attachments/" + data.id, null, function (results) {
                var raw = window.atob(window.atob(results.contentBytes));
                var rawLength = raw.length;
                var array = new Uint8Array(new ArrayBuffer(rawLength));      // pass your byte response to this constructor

                for (var i = 0; i < rawLength; i++) {
                    array[i] = raw.charCodeAt(i);
                }

                var blob = new Blob([array], { type: results.contetType });

                var link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = results.name;
                link.click();
            });
        };

However, this code works due to the fact that the results.contentBytes is converted to a ByteArray which is what the Blob constructor was expecting.

        local.downloadAttachment = function (data) {
            $.get("https://graph.microsoft.com/v1.0/me/messages/" + self.EmailID() + "/attachments/" + data.id, null, function (results) {
                var raw = window.atob(results.contentBytes);
                var rawLength = raw.length;
                var array = new Uint8Array(new ArrayBuffer(rawLength));      // pass your byte response to this constructor

                for (var i = 0; i < rawLength; i++) {
                    array[i] = raw.charCodeAt(i);
                }

                var blob = new Blob([array], { type: results.contetType });

                var link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = results.name;
                link.click();
            });
        };