Today I introduce about downloading pdf & image files using “Office.js”(Office Add-ins).

■GitHub
I published at github.
Go to Github

■Try Sample Code
If you want to try this sample, please download this manifest file and set your shared folder.
Go to Onedrive

■Capture

※Links “pdf download(Link) “, “pdf download(Link New Window) “, “pngImage download(Link) “, “pngImage download(Link New Window) ” are test codes, these are not work well.

■Explain
Office.js(Office Add-ins, Apps for Office) has a lot of kinds, internal.
・Client Office(Excel, Word, PowerPoint etc…)
・WebApp & IE Office(Excel, Word, PowerPoint etc…)
・WebApp & WebKit(Chrome, Safari…) Office(Excel, Word, PowerPoint etc…)
・Client Outlook
・WebApp & IE Outlook
・WebApp & WebKit(Chrome, Safari…) Outlook

These are little differences.
For example,
・We can’t use “download” attribute on “a” tag (Client Office, WebApp & IE)
・Because it uses “iframe” tag, we can’t use a lot of technology, ex. cookie, sandbox (WebApp Office & WebApp & Outlook)
So, we have to develop Office.js applications, carefully.

※Javascript

function xmlHttpRequestDownload(event) {
        var fileName = event.data.file;
        var oReq = new XMLHttpRequest();
        oReq.open("GET", fileName, true);
        oReq.responseType = "blob";

        oReq.onload = function (oEvent) {
            var blob = oReq.response; // Note: not oReq.responseText
            if (blob) {
                saveFile(blob, fileName);
            }
        };

        oReq.send(null);
    }

    function saveFile(blob, fileName) {
        if (window.navigator.msSaveOrOpenBlob) { //※(1)
            window.navigator.msSaveOrOpenBlob(blob, fileName);
        } else {//※(2)
            var link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = fileName;
            link.click();
        }
    }

※(1)
If you execute Client Office, WebApp & IE Office, Client Outlook or WebApp & IE Outlook, this “if” true.
“window.navigator.msSaveOrOpenBlob”is a function only IE.

If you execute WebApp & WebKit or WebApp & WebKit, this “if” false.
Then you can use “download” attribute, so you can download files.

So you can develop Office.js applications that has downloading files.