Download Excel in Backbone.js

Question

  //Download SKU logic
  downloadSku: function (e) {
    e.preventDefault();
    var checkedValues = this.$el.find('.chk:checked').map(function () {
      return this.value;
    }).get();
    var options = {
      success: function (model, response) {
        console.log(response);
        var blob = new Blob([response], { type: 'application/vnd.ms-excel' });

        var downloadUrl = URL.createObjectURL(blob);
        var a = document.createElement("a");
        a.href = downloadUrl;
        a.download = "downloadFile.xlsx";
        document.body.appendChild(a);
        a.click();
      }
    };
    var obj = {};
    obj["sku_ids"] = checkedValues;
    this.downloadSkuModel.set(obj, { validate: true });
    this.downloadSkuModel.save({}, options);

  }

services.js

    var services = {

    sync: function (method, model, options) {
        var self = this;
        var api_token = mainJs.get_api_token();
        var access_token;
        if (api_token == null) {
            access_token = api_token;

        } else {
            access_token = api_token.access_token;
        }

        options || (options = {});

        var beforeSend = options.beforeSend;
        options.beforeSend = function (xhr) {
            xhr.setRequestHeader('Authorization', 'Bearer ' + access_token)
            if (beforeSend) return beforeSend.apply(this, arguments);
        };

        switch (method) {
            case "read":
                options.url = options.readUrl;
                break;
            case "delete":
                options.url = options.deleteUrl;
                break;
            case "update":
                options.url = options.updateUrl;
                options.contentType = 'application/json';
                break;
            case "create":
                options.url = options.createUrl;
                options.contentType = 'application/json';
                break;
        }

        options.error = function (xhr, statusTxt, thrown) {
            switch (xhr.status) {
                case 401:
                    console.log("Unauthorized error");
                    break;
                default:
                    var messageText = JSON.parse(xhr.responseText);;
                    console.log("Status code: " + xhr.status + " Error: " + messageText.message);
            }

        }

        if (options.url)
            return Backbone.sync.call(model, method, model, options);

    }

}


module.exports = services;

My response headers:

  HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Access-Control-Allow-Origin: *
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Pragma: no-cache
Expires: 0
Strict-Transport-Security: max-age=31536000 ; includeSubDomains
X-Frame-Options: DENY
Content-Disposition: attachment;filename=sku_list.xlsx
Content-Type: application/octet-stream;charset=UTF-8
Transfer-Encoding: chunked
Date: Tue, 15 Sep 2015 14:56:58 GMT

I am getting a response from the server but it isn't coming on the View.

If i use Javascript in my view it works:

 var obj = {};
    obj["sku_ids"] = checkedValues;
    var xhr = new XMLHttpRequest();
    xhr.open('POST', Urls.sku.download, true);
    xhr.responseType = 'blob';

    xhr.setRequestHeader("Authorization", "Bearer " + "somethign");
    xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
    xhr.onload = function (e) {
      if (this.status == 200) {
        var blob = new Blob([this.response], { type: 'application/vnd.ms-excel' });
        var downloadUrl = URL.createObjectURL(blob);
        var a = document.createElement("a");
        a.href = downloadUrl;
        a.download = "downloadSku.xlsx";
        a.setAttribute("data-bypass", "");
        document.body.appendChild(a);
        a.click();
      } else {
        alert('Unable to download excel.')
      }
    };
    xhr.send(JSON.stringify(obj));

The error i am getting with backbone is as below:

SyntaxError: Unexpected token P at Object.parse (native) at K.parseJSON 

Answer 1

I solved my issue:

This is what i did

I changed my options.dataType = 'text' as by default backbone was assuming it to be a json response and was doing a Object.parse