JavaScript Programming Example of Export to Excel, PDF, CSV, and PNG formats in SpreadSheet
With the programming example below you can export SpreadSheet data to Excel, PDF, CSV, and PNG formats. Note that the piece of code is free. Don't hesitate to use the coding samples by Webix for your web development projects.
JS Code
webix.ready(function(){ var buttons = { padding:10, margin:5, width:150, rows:[ { view:"button", value:"Export to Excel", click: function(){ webix.toExcel("ss1"); }}, { view:"button", value:"Export to PNG", click:function(){ webix.toPNG("ss1"); }}, { view:"button", value:"Export to PDF", click:function(){ webix.toPDF("ss1", {autowidth:true}); }}, { view:"button", value:"Export to CSV", click:function(){ webix.toCSV("ss1"); }}, {} ] }; webix.ui({ cols:[ buttons, { id:"ss1", view:"spreadsheet", toolbar: "full", data: sheet1_data }] }); });
HTML Code
<script> var sheet1_data = {"data":[["1","1","","wss8"],["1","2","","wss6"],["1","3","Sales","wss7"],["1","4","","wss6"],["1","5","Prediction","wss4"],["2","1","Department","wss1"],["2","2","2013","wss3"],["2","3","2014","wss3"],["2","4","2015","wss3"],["2","5","2016","wss3"],["3","1","Sport gears",""],["3","2","4550","wss5"],["3","3","4780","wss5"],["3","4","4920","wss5"],["3","5","5904","wss5"],["4","1","Gadgets",""],["4","2","2245","wss5"],["4","3","4483","wss5"],["4","4","7460","wss5"],["4","5","8952","wss14"],["5","1","Beverage",""],["5","2","750","wss5"],["5","3","640","wss5"],["5","4","755","wss5"],["5","5","830.5","wss5"],["6","1","Total","wss11"],["6","2","=SUM(B3:B5)","wss12"],["6","3","=SUM(C3:C5)","wss12"],["6","4","=SUM(D3:D5)","wss12"],["6","5","=SUM(E3:E5)","wss12"]],"styles":[["wss1",";#CEFEFE;"],["wss2",";#CEE6FE;"],["wss3","#000000;#CEE6FE;center"],["wss4","#000000;#CEFEFE;center"],["wss5",";;center"],["wss6","#000000;#CEFEE6;left"],["wss7","#000000;#CEFEE6;center"],["wss8","#000000;#FFFFFF;left"],["wss9","#FFFFFF;;"],["wss10","#FFFFFF;#424242;"],["wss11","#FFFFFF;#424242;right"],["wss12","#FFFFFF;#424242;center"],["wss13","#000000;#ffffff;left"],["wss14","#000000;#ffffff;center"]],"sizes":[["0","1","169"]],"spans":[]}; </script>