Office Add-in JavaScript FileDownload not working with MAC

[KeyurPatel268]

FileSaver library not work office add-ins with mac.

Expected Behavior It should allow to us download file from word office add-ins on mac using filesaver javascript library , same as we can do with safari browser(version 10.1) with same code.

Current Behavior We can't download file from word office add-ins on mac. it is getting error with open application dialog as in screen shot.

Steps to Reproduce, or Live Example

1. Create word office add-ins

2. Create html button to invoke download file.

3. Create API with return content data

4. Call API in word office add-ins with XMLHttpRequest()

5. Install FileSaver.JS using NPM command or insert manually. npm install file-saver --save bower install file-saver Additionally, typscript definitions can be installed via: npm install @types/file-saver --save-dev

6. Construct your content in Blob Type same as following var blob = new Blob([oReq.response], { type: "application/octet-binary" });

7. Use SaveAs method for FileSaver.js as following saveAs(blob, 'Test1234.docx');

`var getMessageUrl = "https://test.xxx.xxx/api/xxx/testcontroller/GetTest?id=121212121212";

        var oReq = new XMLHttpRequest();

        oReq.open("GET", getMessageUrl, true);
        oReq.responseType = "arraybuffer";
        oReq.setRequestHeader('X_ConnectTo', 'X-Author-CRM');
        oReq.setRequestHeader('Access-Control-Allow-Origin', '*');
        oReq.setRequestHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE,OPTIONS');
        oReq.setRequestHeader('Access-Control-Allow-Headers', 'Authorization, Content-Type,Accept, Origin');
        oReq.setRequestHeader('Authorization', 'Bearer XXXXXXXXX-Token-XXXXXXX');
        oReq.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
        oReq.onload = function (oEvent) {
            var blob = new Blob([oReq.response], { type: "application/octet-binary" }); 
            saveAs(blob, 'Test1234.docx');
        };

        oReq.send();`

Context This is really important for us to deliverable this to our customer. we can't use document.createElement('a') for download file , as we already have this implementation in our current code but for security reason, we must removed this document.createElement('a'); from current code and use with filesaver javascript library approach but now , we are block with this issue.

Your Environment

OS - X EI Capitan (Version 10.11.6) Office version :15.32 Safari version : 10.1.1

Useful logs Refer my link for more details https://stackoverflow.com/questions/44922159/office-add-in-javascript-filedownload-not-working-with-mac

[radhikaalone]

I am getting same issue for word web add ins, On Mac file not downloaded, getting same error but on window desktop its work fine.

[pupaxxo]

Same with outlook. Please fix it!

[Hombr33]

Has this been fixed, or possibly an workaround ? Thanks in advance!

[SanketDG]

@weshi Since you are assigned, is there any update on this? We are facing the issue where javascript file download is not working for Outlook for Mac.

[shubhashishtiwari]

@weshi : This issue is blocking the major development for Outlook Web addin on Mac devices. For windows we have a backup solution of VSTO addin. But for Mac we only have Web addin which is getting blocked because of above issue. Is it possible for you to let us know the tentative timeline of this fix.

[weshi]

@shubhashishtiwari Is this for Outlook or Word?

[weshi]

@JuaneloJuanelo it seems this is for Outlook. Please help to reassign. Thanks.

[shubhashishtiwari]

@weshi : Thanks for the reply.
To your question asked above: Yes, this is issue is coming for outlook.

Details about the issue : We are using displayDialogasync to display our HTML. In that HTML we have our custom files which are showing as attachment. On these attachment, we want to provide users, a functionality of being able to download these files directly. In implementation, we created a Blob URL Object of the attachment and then trying to save it. But during save, download up does not show. Ideally while trying to call the Blob URL object we expected the Mac Download Popup to show up. The above functionality on Windows outlook client is working perfectly fine. Please let me know if you need more details on the issue

[exextoc]

@shubhashishtiwari Could you please share the code snippet used for download and also let us know the Mac Outlook version in which you are facing this? It would also be helpful if you share a sample attachment you are using to download.

[ghost]

This issue has been automatically marked as stale because it is marked as needing author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your interest in Office Add-ins!

[shubhashishtiwari]

Thanks for the reply.

Mac Version on which we verified this issue : High Sierra 10.13.6 and Mojave 10.14.6

Details about the issue : We are using displayDialogasync(From office.js) to display our HTML. This HTML is rendering our decrypted email content. Our decrypted email might contain an attachment. So we want to provide user way to download this attachment from our HTML (Displayed using displayDialogasync).

In implementation : We created a Blob URL Object of the attachment from base64 and then trying to save it using saveAs function of library Filesaver.js. But during save, download up does not show. Ideally while trying to call the Blob URL object we expect the Native Mac Download Popup to show up.

Code snippet : High level code(We have stripped some part as part of security but we have written everything which is important from understanding the functionality)

function downloadFile(file) { blobData = atob (file.fileContent); blob = new Blob(blobData, { type: contentType }); saveAs(blob, file.fileName); }

The above functionality on Windows outlook client is working perfectly fine and we are able to see Native Windows download popup while downloading the attachment. On clicking OK, the attachment is saved successfully. But in case of Mac Native download up does not show up at all.

We tried below more approaches but all failed on Mac Outlook and worked fine on Windows Outlook:

• Blob
• data URL
• btoa - atob
• A tag with download variable

Apart from above approaches we tried other libraries also but all failed on Mac Outlook.

If you want to simulate this issue then from any sample outlook addin you can create a HTML pop using displayDialogasync(from office.js). From that HTML file you can try and download any doc file embedded in that HTML file

Let me know if you need more information

[ghost]

This issue has been automatically marked as stale because it is marked as needing author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your interest in Office Add-ins!

[ahmedkhalid1710]

We're facing the same issue with outlook on MAC

[ghost]

This issue has been automatically marked as stale because it is marked as needing author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your interest in Office Add-ins!

[SanketDG]

@exextoc Could you pick up on this? Seems like this happens to a lot of users on Mac Outlook.

[ghost]

This issue has been automatically marked as stale because it is marked as needing author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your interest in Office Add-ins!

[ghost]

This issue has been closed due to inactivity. Please comment if you still need assistance and we'll re-open the issue.

[ahmedkhalid1710]

we're in a long run relationship with office.js. we're using it on multiple hosts word,office,powerpoint,excel. we're facing this issue on outlook for MAC. it's very important for us to be solved. Thanks.

[shubhashishtiwari]

Cant understand why Microsoft guys are asking all the questions but not relpying at all. @Microsoft : Every one is asking question but no one is replying. I have given all the details and the issue looks straightforward to understand but no one is taking it up. Please help to resolve this issue

[exextoc]

@shubhashishtiwari Sorry for the delay in response.

Thanks for reporting this issue. After careful consideration, our team has decided to not fix this issue in the short term. We are blocked by a WebKit bug. When we hear back on the WebKit bug, we will re-activate as needed.

[exextoc]

@shubhashishtiwari We would like to suggest a workaround solution for this issue as mentioned in #503. You can call Office.context.ui.openBrowserWindow(URL); with a URL that you own and from there once the full browser opens, create your blob object and get the browser to download the file. Office.context.ui.openBrowserWindow(url) should be available in office-js-api version: 20200812.3 or later in macOS.

[sajaadkhan7]

I m using word office js add-in on Mac. File download link is not working for me. I am getting no console errors at all. It just does nothing. I m using following code..

const handleOpenFile = () => {
    var blob = new Blob([fileContent], {
      type: "application/octet-stream",
    });
    var link = document.createElement("a");
    link.href = URL.createObjectURL(blob);
    link.download = pdfFile?.name ? pdfFile.name.replace(/\.pdf$/i, ".docx") : "";
    link.click();
  };

Same code works perfectly for windows version.

[exextoc]

@sajaadkhan7 Can you create a new issue for the problem you are facing, as it seems like different issue and current issue has been closed already.

[mailchecktool-admin]

@exextoc When using Office.context.ui.openBrowserWindow(URL), can I specify a blob object for the url? It didn't work.

[exextoc]

@mailchecktool-admin , can you specify what is the URL you are using which does not work?

[mailchecktool-admin]

@exextoc I created a URL for a very simple text file. The sample code is as follows:

const blob = new Blob(["Hello, blob!"], {type: 'text/plain'}); const fileURL = URL.createObjectURL(blob); console.info(fileURL); Office.context.ui.openBrowserWindow(fileURL); console.info("window.open is done"); Is this source code incorrect? If so, what changes should be made to the source code to make it work correctly? Please provide specific guidance on how to write the source code, as I will provide the source code for a sample add-in. https://drive.google.com/file/d/1et0uKHX_2e8R4UVtCif9KiaevDyG9tG4/view?usp=drive_link

The reproduction steps are as follows.

1. Download "downloadSample(window.open).zip" and place it in your desired location.
2. Launch the command prompt and navigate to the corresponding directory.
3. Run "npm install".
4. Run "npm run dev-server".
5. Upload "manifest.xml" in Outlook on the web to install the add-in. (The XML file is stored in downloadSample(window.open).zip)
6. Create and send an email. .7 Click "download TextFile" button.

[exextoc]

@mailchecktool-admin Office.context.ui.openBrowserWindow does not work with file URLs. This is by design. We track Outlook add-in feature requests on our Tech Community Page. Please submit your request there and choose the appropriate label(s). Feature requests on Tech Community are considered, when we go through our planning process.