Cross-client solution to download a base64 file for the user.

Download a Base64 file..OUTLOOK.yaml

name: Download a Base64 file.
description: Cross-client solution to download a base64 file for the user.
host: OUTLOOK
api_set: {}
script:
  content: |
    const test_base64_text_file = "VGhpcyBpcyBhIHRlc3QgdGV4dCBmaWxlLgo=";
    const newFileName = "test_download_image.txt";

    $("#openWindow").click(openWindow);
    $("#download1").click(downloadTempFile1);
    $("#download2").click(downloadTempFile2);
    $("#download3").click(downloadTempFile3);
    $("#download4").click(downloadTempFile4);

    function openWindow() {
      const userProfile = Office.context.mailbox.userProfile;
      Office.context.ui.openBrowserWindow("http://www.office.com");
    }

    function b64toBlob(b64Data, contentType = "", sliceSize = 512): Blob {
      const byteCharacters = atob(b64Data);
      const byteArrays = [];
      for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        const slice = byteCharacters.slice(offset, offset + sliceSize);
        const byteNumbers = new Array(slice.length);
        for (let i = 0; i < slice.length; i++) {
          byteNumbers[i] = slice.charCodeAt(i);
        }
        const byteArray = new Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
      }
      const blob = new Blob(byteArrays, { type: contentType });
      return blob;
    }

    function downloadTempFile1(): void {
      const a = document.createElement("a"); // Create <a>
      a.target = "_blank"; // open in new tab
      // need special handling of certain content types?
      a.href = "data:octet-stream;base64," + test_base64_text_file; // Base64 Goes here
      a.download = newFileName; //File name Here
      a.click(); //Download file
    }

    function downloadTempFile2(): void {
      window.open("data:application/octet-stream;base64," + test_base64_text_file);
    }

    function downloadTempFile3(): void {
      const blob = b64toBlob(test_base64_text_file, "octet-stream");
      const blobUrl = URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.download = "test_download_file.txt";
      link.target = "_blank";
      link.href = blobUrl;
      link.click();
    }

    function downloadTempFile4() {
      const userProfile = Office.context.mailbox.userProfile;
      Office.context.ui.openBrowserWindow("data:application/octet-stream;base64," + test_base64_text_file);
    }
  language: typescript
template:
  content: |-
    <p>This tests opening a window with openBrowserWindow.</p>
    <button id="openWindow" class="ms-Button">
        <span class="ms-Button-label">Run</span>
    </button>

    <p>This uses simple anchor tag and click.</p>
    <button id="download1" class="ms-Button">
        <span class="ms-Button-label">Run</span>
    </button>

    <p>This uses window.open to download a file.</p>
    <button id="download2" class="ms-Button">
        <span class="ms-Button-label">Run</span>
    </button>

    <p>This uses blobUrl and simple anchor tag to click.</p>
    <button id="download3" class="ms-Button">
        <span class="ms-Button-label">Run</span>
    </button>

    <p>This tests downloading a file with openBrowserWindow.</p>
    <button id="download4" class="ms-Button">
        <span class="ms-Button-label">Run</span>
    </button>
  language: html
style:
  content: |-
    section.samples {
        margin-top: 20px;
    }
    section.samples .ms-Button, section.setup .ms-Button {
        display: block;
        margin-bottom: 5px;
        margin-left: 20px;
        min-width: 80px;
    }
  language: css
libraries: |
  https://appsforoffice.microsoft.com/lib/1/hosted/office.js
  @types/office-js
  [email protected]/dist/css/fabric.min.css
  [email protected]/dist/css/fabric.components.min.css
  [email protected]/client/core.min.js
  @types/core-js
  [email protected]
  @types/[email protected]