downloading a docx file from ajaxResponse

Question

So I tried to download a docx document as a report . by converting ajax response to a blob then an url ! the result is a document word that display a message , " we're sorry . we can't open because we found a problem with it's content . there the main : onDownloadReport: function (oEvent) {

var oAjaxBody = {
    SessionId: this.getModel("sessionModel").getData().SessionId,
    CustomerName: encodeURIComponent(this.getModel("sessionModel").getData().CustomerName.split("\n")[0]),
    TenantInfo: encodeURIComponent(this.getModel("sessionModel").getData().TenantInfo)
        };
var sServiceUrl = "/SDC_XS_TEMP/APPL/SDC/services/serviceRuntime/xsjs/SDC_REPORT_GENERATE_MM.xsjs";

var me = this;
$.ajax({
    url: sServiceUrl,
    type: "POST",
    responseType:'arraybuffer',
    contentType: "application/json",
    data: JSON.stringify(oAjaxBody),
    // dataType: "json",
    success: function (oAjaxResponse) {
        var content = oAjaxResponse;
        var fileName = 'rapport.docx'; // You can use the .txt extension if you want
        me.downloadwithpost(fileName, content);
    },
    error: function (oError) {
        console.log("failure");
    }

});

and this is the function

downloadwithpost: function (filename, content) {
    var link = document.createElement('a');        
    var bytes = new Array(content.length);
    // var bytes = new Array(content.length);
    for (var i = 0; i < content.length; i++) {
        bytes[i] = content.charCodeAt(i);
    }
    var byteArray = new Uint8Array(bytes);
    var blob = new Blob([byteArray], {
        type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"                   
    });
    var url = URL.createObjectURL(blob);
    var oItem = {
        documentId: url,
        fileName: "rapport.docx",
        thumbnailUrl: "",
        url: url,
        selected: true
    };
    var oUploadCollection = this.getView().byId("uploadCollection");
    var newItem = new sap.m.UploadCollectionItem(oItem);
    oUploadCollection.addItem(newItem);
    oUploadCollection.downloadItem(newItem, true);
}

Just wondering if the document is an existing document, or if you're generating it? — Jorg, Nov 20 '18 at 11:30

Miller Cy Chan · Answer 1 · 2018-11-20T08:10:41.680

function downloadDoc(filename, sServiceUrl, oAjaxBody){
    var xhr = new XMLHttpRequest();
    xhr.open('POST', sServiceUrl, true);
    xhr.responseType = 'blob';
    xhr.send(JSON.stringify(oAjaxBody));   
    xhr.onreadystatechange = function(){
        if (xhr.readyState == 4){
            //$.unblockUI();
            if(xhr.status == 200) {
                var blob = new Blob([xhr.response], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
                if (navigator.msSaveOrOpenBlob)
                    navigator.msSaveOrOpenBlob(blob, filename);
                else {
                    var link = document.createElement('a');                     
                    var URL = window.URL || window.webkitURL;
                    var downloadUrl = URL.createObjectURL(blob);
                    link.href = downloadUrl;
                    link.style = "display: none";
                    link.download = filename;
                    document.body.appendChild(link);
                    link.click();
                    setTimeout(function(){
                        document.body.removeChild(link);
                        window.URL.revokeObjectURL(downloadUrl);  
                    }, 100);
                }
            }
            else {
                console.log("failure");
            }
        }            
    }
}

so as params , we don't have an url , just an oAjaxResponse . — Alexis sanchez, Nov 19 '18 at 10:27
Why use XMLHttpRequest? Please refer to https://stackoverflow.com/questions/17657184/using-jquerys-ajax-method-to-retrieve-images-as-a-blob — Miller Cy Chan, Nov 20 '18 at 07:28

score 0 · Answer 2 · answered Nov 20 '18 at 06:34

Take a look at this example, I worked with an hexadecimal data format, but you can change it as you see fit. Let me know if you need any help with this example or have any questions.

   doAfterSuccess: function(result, fileName, fileType) {       
            var filedata = result.ARRAY[0].FILEDATA; // get data from response
            // ------------------------------- hex data, rapport, docx
            var createdFile = this.createFile(filedata, fileName, fileType); 
            this.downloadFile(createdFile, fileName, fileType);
    },

    createFile: function(hexContent, filename, type) {
        var data = this.convertHexToBinary(hexContent); // skip if your data is not hex
        var file = new Blob([data], {
            name: filename,
            type: type
        });
        return file;
    },

    convertHexToBinary: function(hexContent) {
        return new Uint8Array(hexContent.match(/.{2}/g).map(function(e) 
        {
            return parseInt(e, 16);
        }));
    },
    downloadFile: function(file, filename, type){
        if (window.navigator.msSaveOrOpenBlob)
            window.navigator.msSaveOrOpenBlob(file, filename);
        else { // Others
            var a = document.createElement("a"),
                url = URL.createObjectURL(file);
            a.href = url;
            a.download = filename + "." + type;
            document.body.appendChild(a);
            a.click();
            setTimeout(function() {
                document.body.removeChild(a);
                window.URL.revokeObjectURL(url);
            }, 0);
        }
    },

downloading a docx file from ajaxResponse

2 Answers2