Skip to Content
Author's profile photo Angel Puertas

Export sap.ui.table.Table as CSV

Hi all!,

This is an example to create a link to download a sap.ui.table.Table to CSV at client side (JS, supported by HTML5 browsers).

The next JS code, extracts header and content from table column&binding definition to generate a CSV B64 string. The download link uses ‘download’ HTML5 attr and Data Uri scheme (Data URI scheme – Wikipedia, the free encyclopedia) to export a filename at client side.

table_and_link.PNG

file_csv.PNG

Html:

<!DOCTYPE HTML>

<html>

  <head>

  <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

  <script src=”resources/sap-ui-core.js”

  id=”sap-ui-bootstrap”

  data-sap-ui-libs=”sap.ui.commons,sap.ui.table”

  data-sap-ui-theme=”sap_goldreflection”>

  </script>

  <!– add sap.ui.table,sap.ui.ux3 and/or other libraries to ‘data-sap-ui-libs’ if required –>

  <script src=”util/Base64.js”></script>

  <script>

  //Default view PortalUserView

  sap.ui.localResources(“view”);

  var view = sap.ui.view({id:”ExampleView”, viewName:”view.ExampleView”, type:sap.ui.core.mvc.ViewType.JS});

  view.placeAt(“content”);

  </script>

  </head>

  <body class=”sapUiBody” role=”application”>

  <div id=”content”></div>

  </body>

</html>

View:

sap.ui.jsview(“view.ExampleView”, {

  /** Specifies the Controller belonging to this View.

  * In the case that it is not implemented, or that “null” is returned, this View does not have a Controller.

  * @memberOf view.ExampleView

  */

  getControllerName : function() {

  return “view.ExampleView”;

  },

  /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.

  * Since the Controller is given to this method, its event handlers can be attached right away.

  * @memberOf view.ExampleView

  */

  createContent : function(oController) {

  //Define some sample data

  var aData = [

  {lastName: “Dente”, name: “Al”, checked: true, linkText: “www.sap.com”, href: “http://www.sap.com“, gender: “male”, rating: 4},

  {lastName: “Friese”, name: “Andy”, checked: true, linkText: “www.sap.com”, href: “http://www.sap.com“, gender: “male”, rating: 2},

  {lastName: “Mann”, name: “Anita”, checked: false, linkText: “www.sap.com”, href: “http://www.sap.com“,  gender: “female”, rating: 3},

  {lastName: “Schutt”, name: “Doris”, checked: true, linkText: “www.sap.com”, href: “http://www.sap.com“,  gender: “female”, rating: 4},

  {lastName: “Open”, name: “Doris”, checked: true, linkText: “www.sap.com”, href: “http://www.sap.com“,  gender: “female”, rating: 2},

  {lastName: “Dewit”, name: “Kenya”, checked: false, linkText: “www.sap.com”, href: “http://www.sap.com“,  gender: “female”, rating: 3},

  {lastName: “Zar”, name: “Lou”, checked: true, linkText: “www.sap.com”, href: “http://www.sap.com“,  gender: “male”, rating: 1},

  {lastName: “Burr”, name: “Tim”, checked: true, linkText: “www.sap.com”, href: “http://www.sap.com“, gender: “male”, rating: 2},

  {lastName: “Hughes”, name: “Tish”, checked: true, linkText: “www.sap.com”, href: “http://www.sap.com“,  gender: “male”, rating: 5},

  {lastName: “Lester”, name: “Mo”, checked: true, linkText: “www.sap.com”, href: “http://www.sap.com“,  gender: “male”, rating: 3},

  {lastName: “Case”, name: “Justin”, checked: false, linkText: “www.sap.com”, href: “http://www.sap.com“,  gender: “male”, rating: 3},

  {lastName: “Time”, name: “Justin”, checked: true, linkText: “www.sap.com”, href: “http://www.sap.com“,  gender: “male”, rating: 4},

  {lastName: “Barr”, name: “Gaye”, checked: true, linkText: “www.sap.com”, href: “http://www.sap.com“,  gender: “male”, rating: 2},

  {lastName: “Poole”, name: “Gene”, checked: true, linkText: “www.sap.com”, href: “http://www.sap.com“, gender: “male”, rating: 1},

  {lastName: “Ander”, name: “Corey”, checked: false, linkText: “www.sap.com”, href: “http://www.sap.com“,  gender: “male”, rating: 5},

  {lastName: “Early”, name: “Brighton”, checked: true, linkText: “www.sap.com”, href: “http://www.sap.com“,  gender: “male”, rating: 3},

  {lastName: “Noring”, name: “Constance”, checked: true, linkText: “www.sap.com”, href: “http://www.sap.com“,  gender: “female”, rating: 4},

  {lastName: “Haas”, name: “Jack”, checked: true, linkText: “www.sap.com”, href: “http://www.sap.com“,  gender: “male”, rating: 2},

  {lastName: “Tress”, name: “Matt”, checked: true, linkText: “www.sap.com”, href: “http://www.sap.com“, gender: “male”, rating: 4},

  {lastName: “Turner”, name: “Paige”, checked: true, linkText: “www.sap.com”, href: “http://www.sap.com“,  gender: “female”, rating: 3}

  ];

  var oTable = createTable(aData);

  var csvText = generateTableCSV(oTable, aData);

  var oLink  = createDownloadLink(csvText);

  var layout = new sap.ui.commons.layout.VerticalLayout(“layout”, {

         content: [oLink, oTable]

  });

  return layout;

  }

});

/**

* Example table creation.

* See https://sapui5.netweaver.ondemand.com/sdk/#test-resources/sap/ui/table/demokit/Table.html#__2

* @param aData Table json data

*/

function createTable(aData) {

  //Create an instance of the table control

  var oTable = new sap.ui.table.Table({

  title: “Table Example”,

  visibleRowCount: 7,

  firstVisibleRow: 3,

  selectionMode: sap.ui.table.SelectionMode.Single

  });

  //Define the columns and the control templates to be used

  var oColumn = new sap.ui.table.Column({

  label: new sap.ui.commons.Label({text: “lastName”}),

  template: new sap.ui.commons.TextView().bindProperty(“text”, “lastName”),

  sortProperty: “lastName”,

  filterProperty: “lastName”,

  width: “200px”

  });

  var oCustomMenu = new sap.ui.commons.Menu();

  oCustomMenu.addItem(new sap.ui.commons.MenuItem({

  text:”Custom Menu”,

  select:function() {

  alert(“Custom Menu”);

  }

  }));

  oColumn.setMenu(oCustomMenu);

  oTable.addColumn(oColumn);

  oTable.addColumn(new sap.ui.table.Column({

  label: new sap.ui.commons.Label({text: “firstName”}),

  template: new sap.ui.commons.TextField().bindProperty(“value”, “name”),

  sortProperty: “name”,

  filterProperty: “name”,

  width: “100px”

  }));

  oTable.addColumn(new sap.ui.table.Column({

  label: new sap.ui.commons.Label({text: “checked”}),

  template: new sap.ui.commons.CheckBox().bindProperty(“checked”, “checked”),

  sortProperty: “checked”,

  filterProperty: “checked”,

  width: “75px”,

  hAlign: “Center”

  }));

  oTable.addColumn(new sap.ui.table.Column({

  label: new sap.ui.commons.Label({text: “website”}),

  template: new sap.ui.commons.Link().bindProperty(“text”, “linkText”).bindProperty(“href”, “href”),

  sortProperty: “linkText”,

  filterProperty: “linkText”

  }));

  oTable.addColumn(new sap.ui.table.Column({

  label: new sap.ui.commons.Label({text: “gender”}),

  template: new sap.ui.commons.ComboBox({items: [

  new sap.ui.core.ListItem({text: “female”}),

  new sap.ui.core.ListItem({text: “male”})

  ]}).bindProperty(“value”,”gender”),

  sortProperty: “gender”,

  filterProperty: “gender”

  }));

  oTable.addColumn(new sap.ui.table.Column({

  label: new sap.ui.commons.Label({text: “rating”}),

  template: new sap.ui.commons.RatingIndicator().bindProperty(“value”, “rating”),

  sortProperty: “rating”,

  filterProperty: “rating”

  }));

  //Create a model and bind the table rows to this model

  var oModel = new sap.ui.model.json.JSONModel();

  oModel.setData({modelData: aData});

  oTable.setModel(oModel);

  oTable.bindRows(“/modelData”);

  //Initially sort the table

  oTable.sort(oTable.getColumns()[0]);

  //Bring the table onto the UI

  return oTable;

}

/**

* Export table header and data into a CSV string.

*/

function generateTableCSV(table, jsonData) {

  var info = ”;

  for (var i =0; i<table.getColumns().length; i++) {

  info+= encodeURIComponent(table.getColumns()[i].getLabel().getText()) + ‘;’;

  }

  info += ‘\r\n’;

  if (jsonData.length != undefined) {

  for (var j=0; j<jsonData.length; j++) {

  for (var i =0; i<table.getColumns().length; i++) {

  if (table.getColumns()[i].getTemplate() != undefined && table.getColumns()[i].getTemplate().getBinding(‘text’) != undefined) {

  var valor = eval(‘jsonData[j].’+table.getColumns()[i].getTemplate().getBinding(‘text’).sPath);

  info+= encodeURIComponent(valor) + ‘;’;

  } else if (table.getColumns()[i].getTemplate() != undefined && table.getColumns()[i].getTemplate().getBinding(‘value’) != undefined) {

  var valor = eval(‘jsonData[j].’+table.getColumns()[i].getTemplate().getBinding(‘value’).sPath);

  info+= encodeURIComponent(valor) + ‘;’;

  } else

  info+= ‘;’;

  }

  info += ‘\r\n’;

  }

  } else {

  $.each(jsonData, function(key,value){

  for (var i =0; i<table.getColumns().length; i++) {

  if (table.getColumns()[i].getTemplate() != undefined && table.getColumns()[i].getTemplate().getBinding(‘text’) != undefined) {

  var valor = eval(‘jsonData[j].’+table.getColumns()[i].getTemplate().getBinding(‘text’).sPath);

  info+= encodeURIComponent(valor) + ‘;’;

  } else if (table.getColumns()[i].getTemplate() != undefined && table.getColumns()[i].getTemplate().getBinding(‘value’) != undefined) {

  var valor = eval(‘jsonData[j].’+table.getColumns()[i].getTemplate().getBinding(‘value’).sPath);

  info+= encodeURIComponent(valor) + ‘;’;

  } else

  info+= ‘;’;

  }

  info += ‘\r\n’;

  });

  }

  return info;

}

/**

* Creates a link target to base64 data

*/

function createDownloadLink(b64text) {

  var oLink = new sap.ui.commons.Link(“linkExportCsv”, {

  text: ‘Download as CSV’,

  href: ‘data:application/csv;charset=utf-8;base64,’ + (Base64.encode(b64text))

  });

  initDownloadAttr(‘FileName-Example.csv’)

  return oLink;

}

/**

* Creates download attribute to set filename

*/

function initDownloadAttr() {

  if ($( “#linkExportCsv” ).length > 0) {

  $( “#linkExportCsv” ).attr(‘download’, ‘filename.csv’);

  } else {

  setTimeout(initDownloadAttr, 1000);

  }

}


Base 64 util:


/**

*

*  Base64 encode / decode

http://www.webtoolkit.info/

*

**/

var Base64 = {

  // private property

  _keyStr : “ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=”,

  // public method for encoding

  encode : function (input) {

  var output = “”;

  var chr1, chr2, chr3, enc1, enc2, enc3, enc4;

  var i = 0;

  input = Base64._utf8_encode(input);

  while (i < input.length) {

  chr1 = input.charCodeAt(i++);

  chr2 = input.charCodeAt(i++);

  chr3 = input.charCodeAt(i++);

  enc1 = chr1 >> 2;

  enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);

  enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);

  enc4 = chr3 & 63;

  if (isNaN(chr2)) {

  enc3 = enc4 = 64;

  } else if (isNaN(chr3)) {

  enc4 = 64;

  }

  output = output +

  this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +

  this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);

  }

  return output;

  },

  // public method for decoding

  decode : function (input) {

  var output = “”;

  var chr1, chr2, chr3;

  var enc1, enc2, enc3, enc4;

  var i = 0;

  input = input.replace(/[^A-Za-z0-9\+\/\=]/g, “”);

  while (i < input.length) {

  enc1 = this._keyStr.indexOf(input.charAt(i++));

  enc2 = this._keyStr.indexOf(input.charAt(i++));

  enc3 = this._keyStr.indexOf(input.charAt(i++));

  enc4 = this._keyStr.indexOf(input.charAt(i++));

  chr1 = (enc1 << 2) | (enc2 >> 4);

  chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);

  chr3 = ((enc3 & 3) << 6) | enc4;

  output = output + String.fromCharCode(chr1);

  if (enc3 != 64) {

  output = output + String.fromCharCode(chr2);

  }

  if (enc4 != 64) {

  output = output + String.fromCharCode(chr3);

  }

  }

  output = Base64._utf8_decode(output);

  return output;

  },

  // private method for UTF-8 encoding

  _utf8_encode : function (string) {

  string = string.replace(/\r\n/g,”\n”);

  var utftext = “”;

  for (var n = 0; n < string.length; n++) {

  var c = string.charCodeAt(n);

  if (c < 128) {

  utftext += String.fromCharCode(c);

  }

  else if((c > 127) && (c < 2048)) {

  utftext += String.fromCharCode((c >> 6) | 192);

  utftext += String.fromCharCode((c & 63) | 128);

  }

  else {

  utftext += String.fromCharCode((c >> 12) | 224);

  utftext += String.fromCharCode(((c >> 6) & 63) | 128);

  utftext += String.fromCharCode((c & 63) | 128);

  }

  }

  return utftext;

  },

  // private method for UTF-8 decoding

  _utf8_decode : function (utftext) {

  var string = “”;

  var i = 0;

  var c = c1 = c2 = 0;

  while ( i < utftext.length ) {

  c = utftext.charCodeAt(i);

  if (c < 128) {

  string += String.fromCharCode(c);

  i++;

  }

  else if((c > 191) && (c < 224)) {

  c2 = utftext.charCodeAt(i+1);

  string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));

  i += 2;

  }

  else {

  c2 = utftext.charCodeAt(i+1);

  c3 = utftext.charCodeAt(i+2);

  string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));

  i += 3;

  }

  }

  return string;

  }

}

Assigned Tags

      52 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo KANNAN PRESANNA KUMAR
      KANNAN PRESANNA KUMAR

      Thanks for the great post.It was really helpful. 🙂

      Does the current code download the data from the JSON Model(i.e. initial data bound to the the Table)?

      I was wondering is there a way to download changed/new data from the Table after the changes are made to the Table by user.

      Cheers,

      Kannan

      Author's profile photo Angel Puertas
      Angel Puertas
      Blog Post Author

      Hi Kannan, thank you!

      You could update link href property after your model is updated.

      Kind regards

      Author's profile photo Chandrashekhar Mahajan
      Chandrashekhar Mahajan

      Hi Angel,

      This is very nice blog and thanks for sharing it.

      Regards,

      Chandra

      Author's profile photo Former Member
      Former Member

      Hi Angel,

      can you please explain the purpose of the below code ?

      if{}

      else

      $.each(jsonData, function(key,value){

      for(var I=0; I< table.getColumns().length; I++)

      if(table.getColumns()[I].getTemplate()!= undefined && table.getColumns()[I].getTemplate().getBindin('text') != undefined){

      --------------------

      ------------------

      }

      I didn't understand in which scenario the above code in the else condtion gets executed.

      and also can you please explain href:'data:application/CSV;charset=utf-8;base64,'+(Base64.encode(b64text));

      here we are encoding it to base64 format don't we need to decode it ?

      or the browser has the capability to decode it ?

      Many Thanks,

      Pandu.

      Author's profile photo Angel Puertas
      Angel Puertas
      Blog Post Author

      Hi Pandu!

      If you don't bind your SAPUI component property 'text' to model this sentence will produce undefined. For example:

      //Define the columns and the control templates to be used

      var oColumn = new sap.ui.table.Column({

      label: new sap.ui.commons.Label({text: "Fixed value column"}),

      template: new sap.ui.commons.TextView({text: 'Fixed value'}),

      width: "200px"

      });

      This sentence, is a standard URI convention (RFC 2397 - The &quot;data&quot; URL scheme). Any compatible browser will decode the value to open  :

      data:application/CSV;charset=utf-8;base64,'+(Base64.encode(b64text));


      Kind regards!


      Author's profile photo Former Member
      Former Member

      Thanks For the quick Reply Angel -

      I am sort to say , I still didn't Understand Why $.each(jsonData, Function(Key,Value){

      _______

      _______

      }

      this Method has been called . what is the Purpose  function(Key, Value ) ?

      Many Thanks ,

      Pandu.

      Author's profile photo Angel Puertas
      Angel Puertas
      Blog Post Author

      Ah ok, I didn't understand you too.


      $.each(jsonData, Function(Key,Value){

      It's a way of looping json data. For each json element function is called, then Key is the name of the attr and value is the value of corresponding attr.


      Kind regards

      Author's profile photo Former Member
      Former Member

      Angel

      In the IF part of the code ,as you Explained we have done binding between sap ui Component "text" to  model . I am clear about that.

      If there is some data in jsonData, jsonData.length will not be equal to Undefined. My Understanding is that when we have some data in the JsonData It will not come to else Part. Is  there any scenario where it will come to else part ?

      Many Thanks,

      pandu.

      Author's profile photo Angel Puertas
      Angel Puertas
      Blog Post Author

      Hi again Pandu,


      I think this sentence could produce undefined if data binding is not done in column. But jsonData doesn't take part in this sentence.


      if(table.getColumns()[I].getTemplate()!= undefined && table.getColumns()[I].getTemplate().getBindin('text') != undefined){

      I'm not sure if we are talking about the same problem.

      Kind regards!

      Author's profile photo sridevi garapati
      sridevi garapati

      Hi,

      In my application I am using MatrixLayout and Textarea and arranged it in a table  format.

      Now I want to export this application to Excel. But I am not getting proper format.

      Please check the below thread for further details.

      How to export SAPUI5 form to Excel ?

      Please help me to solve this one.

      Thanks&Regards

      Sridevi

      Author's profile photo Angel Puertas
      Angel Puertas
      Blog Post Author

      Hi Sridevi,

      To format a XSL file, you must generate this file in server side (ABAP or JAVA, depending on your architecture). 

      Java: You must create a service (for example a servlet) and use an XLS generator like Apache Poi to format this Excel (if you are deploying on a Java WAS).

      ABAP: I'm not an ABAP expert but I think you could generate an ITS service to generate XLS file throught an ABAP function.

      Kind regards

      Author's profile photo Former Member
      Former Member

      Hi Angel,

      Thanks for your post.It helped me a lot.

      One Problem:

      Doesn't work with IE9. Do you have one solution?

      Thanks and regards,

      Alex

      Author's profile photo Angel Puertas
      Angel Puertas
      Blog Post Author

      Hi Alexander,

      Could you post a JSBin with your code? I've tested succesfully on >=IE9. IE8 doesn't interpret data uri scheme.

      Kind regards

      Author's profile photo Former Member
      Former Member

      Hi Angel,

      not my code but it's the same problem there:

      Edit fiddle - JSFiddle

      Clicking "Download CSV" one new IE window appears with "data:text/csv;charset=utf-8,%22Id%22%2C%22UserName%22%0D%0A%221%22%2C%22Sam%20Smith%22%0D%0A%222%22%2C%22Fred%20Frankly%22%0D%0A%221%22%2C%22Zachary%20Zupers%22%0D%0A" in the url field. No download window - no csv ...

      With Firefox, all works fine. I use IE 9.0.23. - which IE9 do you use?

      Author's profile photo Angel Puertas
      Angel Puertas
      Blog Post Author

      Hi Alexander,

      You are right. On IE9 it seems to not work. In order to work on IE>=9 you must set download attribute to link in order to dowload a file with complete filename.

      This is the reference for IE Data URI:

      http://msdn.microsoft.com/en-us/library/cc848897(v=vs.85).aspx

      There's a comment indicating IE cannot open content in new tabs.

      Kind regards

      Author's profile photo Former Member
      Former Member

      Hi Angel,

      thanks for your help.

      Please note, I'm a newbie regarding javascript developing. What do you you mean in detail with:

      ...you must set download attribute to link in order to dowload a file with complete filename.

      Maybe you've got an example for me!?!

      Thanks and regards,

      Alex

      Author's profile photo Angel Puertas
      Angel Puertas
      Blog Post Author

      Hi again Alexander!

      Your example download a file without name. You need to set download attribute to your link in order to get a file with name e.g: download.csv

      <a href="data:...." download="filename.csv">Download</a>

      In the example I've blogged you could see this on function:

      /**

      * Creates a link target to base64 data

      */

      function createDownloadLink(b64text) {

        var oLink = new sap.ui.commons.Link("linkExportCsv", {

        text: 'Download as CSV',

        href: 'data:application/csv;charset=utf-8;base64,' + (Base64.encode(b64text))

        });

        initDownloadAttr('FileName-Example.csv')

        return oLink;

      }


      Kind regards

      Author's profile photo Former Member
      Former Member

      Hi Angel,

      I do not know, what's wrong: I copied your code in one new project and deployed it. All works fine: I see the table with dummy data, I'm able to download the table with firefox, but if I call the table with the help of my IE9 and click the download link - nothing happens: I just get one empy side with "about:blank" in the url field. 😐

      Some colleagus have the same problems with IE9 too.

      Author's profile photo Angel Puertas
      Angel Puertas
      Blog Post Author

      Hi Alexander,

      I've create a JSBin code with full example:

      http://jsbin.com/fuwicopa/1/edit

      Hope it helps,

      Kind regards

      Author's profile photo Former Member
      Former Member

      Hi Angel,

      thanks for your investigations.

      It really doesn't work for me. My colleague has also IE9 - does not work too. 🙁

      Author's profile photo Former Member
      Former Member

      Hi were you able to fix the issue ?? I am facing the same issue so I was wondering if you have done it , then you can help me with the same.

      Author's profile photo Mr Ram
      Mr Ram

      Hi Angel,

      Its great blog.

      But I am not getting a formatted one. How to format it?

      /wp-content/uploads/2014/05/excel_453296.png

      Author's profile photo Former Member
      Former Member

      HI Ram,

      You should Use , instead of ; in the code.

      Hope this helps.

      Regards,

      pandu.

      Author's profile photo Mr Ram
      Mr Ram

      Thanks a lot Pandu.

      It works with your suggetion.

      Author's profile photo Former Member
      Former Member

      Hi Angel,

      thanks for the blog! really great work!

      I copied the code, but unfortunately my code downloads the file without name.

      In the function initDownloadAttr() my ($( "#linkExportCsv" ).length is always 0; Any ideas how i could fix that?


      Regards,

      Georgi

      Author's profile photo Former Member
      Former Member

      HI Georgi,

      In chrome's new version it wont work. try FF or chrome version 32 or below. it will work.

      Author's profile photo Former Member
      Former Member

      Hi Jacob,

      Thanks for your replay!

      I tested in FF but i still get the length 0.

      Is there any workaround or another way to set the file format to csv?

      Regards

      Georgi

      Author's profile photo Mr Ram
      Mr Ram

      Hi,

      pls look in to this. I thin kit will solve your issues 🙂

      http://jsfiddle.net/hybrid13i/JXrwM/

      http://jsfiddle.net/lesson8/wVejP/

      Regards,

      Ram

      Author's profile photo Former Member
      Former Member

      It does not work in IE 10 . I saw the above comments but they were not of much help.

      Please help me regarding the same. Your help would be appreciated.

      Author's profile photo Former Member
      Former Member

      Hi Mohit,

      i decided to export it through the server with REST.

      Regards,

      Georgi

      Author's profile photo Former Member
      Former Member

      I'm having some trouble setting the filename, Once I click the link the file is downloaded under the name "download" and of no type. Once I change the file extension to .csv everything works fine. Is there anyway I could modify this could to do that automatically? Thanks.

      Author's profile photo Chandrashekhar Mahajan
      Chandrashekhar Mahajan

      Hello,

      With version 1.22, you can export data in the form of CSV out of the box.

      Data Export:

      • The data binding concept can not only be used to display data but also to export it in a specific format so that it can be used in other programs. Only the CSV type is initially supported.
      • Example
      • Documentation
      • Export API and ExportTypeCSV API

      Reference - http://openui5.tumblr.com/post/91942465212/new-release-openui5-1-22

      Regards,

      Chandra

      Author's profile photo Former Member
      Former Member

      Extremely helpful thanks for the quick information

      Author's profile photo Former Member
      Former Member

      Have you had any success implementing this example in your own code? I am using a JS view cannot get this to work in my code. The error goes away once I remove the include statements but then nothing works after

      jQuery.sap.require("sap.ui.core.util.Export");
      jQuery.sap.require("sap.ui.core.util.ExportTypeCSV");
      jQuery.sap.require("sap.m.TablePersoController");
      jQuery.sap.require("sap.m.sample.TableExport.DemoPersoService");
      jQuery.sap.require("sap.m.sample.TableExport.Formatter");

      Author's profile photo Former Member
      Former Member

      Hi Michael,

      Remove the last two require from your code and it will work.

      just use the below code.

      jQuery.sap.require("sap.ui.core.util.Export");

      jQuery.sap.require("sap.ui.core.util.ExportTypeCSV");

      jQuery.sap.require("sap.m.TablePersoController");

      no need of

      jQuery.sap.require("sap.m.sample.TableExport.DemoPersoService");

      jQuery.sap.require("sap.m.sample.TableExport.Formatter");

      Author's profile photo Former Member
      Former Member

      Thank you for your information!!!

      Author's profile photo Former Member
      Former Member

      but it seems only for the sap.m library,

      if I want to use this way for sap.ui.table, it doesn't work.

      the error like this :



      GET http://127.0.0.1:3000/openui5/resources/sap/ui/core/util/Export/library-preload.json 404 (Not Found) sap-ui-core.js:27send sap-ui-core.js:27Q.extend.ajax sap-ui-core.js:27jQuery.sap.preloadModules sap-ui-core.js:80(anonymous function) sap-ui-core.js:134Q.extend.each sap-ui-core.js:16E.extend.constructor sap-ui-core.js:134(anonymous function) sap-ui-core.js:134(anonymous function) sap-ui-core.js:134(anonymous function) sap-ui-core.js:80Z sap-ui-core.js:80sap.ui.define sap-ui-core.js:80(anonymous function) sap-ui-core.js:134

      2014-10-20 12:50:19 failed to preload 'sap.ui.core.util.Export.library-preload': Not Found -  sap.ui.ModuleSystem sap-ui-core.js:80

      GET http://127.0.0.1:3000/openui5/resources/sap/ui/core/util/ExportTypeCSV/library-preload.json 404 (Not Found) sap-ui-core.js:27

      2014-10-20 12:50:19 failed to preload 'sap.ui.core.util.ExportTypeCSV.library-preload': Not Found -  sap.ui.ModuleSystem sap-ui-core.js:80

      GET http://127.0.0.1:3000/openui5/resources/sap/ui/core/util/Export/library.js 404 (Not Found) sap-ui-core.js:27

      Uncaught Error: failed to load 'sap/ui/core/util/Export/library.js' from /openui5/resources/sap/ui/core/util/Export/library.js: 404 - Not Found sap-ui-core.js:80

      Uncaught Error: Core must be initialized sap-ui-core.js:134

      Is there ExportTypeCSV  function for sap.ui.table?

      Author's profile photo Former Member
      Former Member

      I see, these two libs is required:

      jQuery.sap.require("sap.ui.core.util.Export");

      jQuery.sap.require("sap.ui.core.util.ExportTypeCSV");

      Author's profile photo Former Member
      Former Member

      great post!

      the initDownloadAttr attribute function didn't work for me though.

      instead i use this to modify the link attribute after DOM is ready.

      ---------------------------------------------------------------------

      function setDownloadFileName(id, filename){

        function waitForLinkReady(cb) {

        var callback = cb;

        function wait() {

        if ($(id).attr('id'))

        callback();

        else

        window.setTimeout(wait, 100)

        }

        wait();

        }

        waitForLinkReady(function() {

        $(id).attr('download',filename)

        });

      }

      Author's profile photo Vibhor Bhatnagar
      Vibhor Bhatnagar

      Hi, I am sorry if i am asking a silly question, but i am a beginner and would like to ask where is the code under "Base 64 util"placed. It is a seperate js file under webcontent/view or is it placed somewhere else.

      Thanks and Regards

      Author's profile photo Former Member
      Former Member

      Hi Vibhor,

      Please see the below screen shots which might give you a fair idea.

      Yes, it is a seperate js file

      excel.JPG webcontent.JPG

      Cheers

      JP

      Author's profile photo Vibhor Bhatnagar
      Vibhor Bhatnagar

      /wp-content/uploads/2014/10/excel_564880.pngHi,

      Thankyou. I implemented it, but when i open as excel. am getting it like this and not in seperate cells. I even replaced semicolon with comma.

      Author's profile photo Former Member
      Former Member

      It will be downloaded in this format only.
      if you want you can go to the data tab in the excel and use text to data option to see the data in column format.
      Untitled.png

      Hope it helps.

      Author's profile photo Former Member
      Former Member

      Hi Everyone,

      Is there any solution to download the table in IE 11.

      Author's profile photo Former Member
      Former Member

      HI kamalpreet ,

      Try the below option

      JSON to CSV/Excel Convert - JSFiddle

      Cheers

      pandu

      Author's profile photo S P
      S P

      Hi Pandu,

      It is not working in IE9.

      Any suggestions for IE?

      Author's profile photo Mahesh Z
      Mahesh Z

      Hi All,

      I tried the same example however its not displaying the table data, instead its displaying ,,,,,,, for me for all table data, headers are coming fine.

      Can anyone please let me know what is the issue here ?

      Error.jpg

      Author's profile photo Former Member
      Former Member

      Hi Mahesh,

      Can you see if there are any errors in your browser console ?

      press f12  to the console (prefer chrome).

      alternatively you may try this code.

      Using Data Binding for Data Export

      Cheers

      Pandu

      Author's profile photo Mahesh Z
      Mahesh Z

      Hi Pandu ,

      Thanks for your reply, There is no error on console however , following lines are returning values as Undefined hence its not going inside.

      table.getColumns()[i].getTemplate().getBinding('text')

      table.getColumns()[i].getTemplate().getBinding('value')

      Its inside the if condition.

      Thanks & Regards,

      Mahesh Zeple.

      Author's profile photo Former Member
      Former Member

      Hi Mahesh ,

      I too have the same issue.If u find any solution please share it.

      it will be grateful.

      Thanks & Regrds,

      Rosemol Francis

      Author's profile photo Michael Appleby
      Michael Appleby

      Mahesh Z and Rosemol Francis,

      Your Comment to a Document will not receive the same scrutiny from knowledgeable experts as a Discussion marked as a Question.  Many of those experts ignore comments on Documents.  See the Getting Started link at the top right to see the differences between Blogs, Discussions, and Documents and when each should be used.  If your question relates to a specific blog or document, put in a link to it.  With the creation of a Discussion, you will also be able to reward the Helpful and Correct Answers with points. You can also turn on notifications so that whenever someone posts to your Discussion, you will get an email of the update and its contents.

      .

      NOTE: Getting the link is easy enough for both the author and document.  Simply MouseOver the item, Right Click, and select Copy Shortcut.  Paste it into your Discussion.  You can also click on the url after pasting.  Click on the A to expand the options and select T (on the right) to Auto-Title the url.

      Cheers, Mike (Moderator)

      Author's profile photo Jayanchanthres Murugesan
      Jayanchanthres Murugesan

      Hi All,

         I have tried same code as mentioned above but I am getting excel like this.

      Screenshot_1.png

      I can only get the table header.Can any one help me how to fix this issue?

      Thanks

      JayanChanthres