8

How do I change the name of file while exporting data to Excel?

<div id="example" class="k-content"> <button type="button"id="btnExport">Export to csv!</button> <div id="grid"></div> </div> <script> $("#btnExport").click(function (e) { var result = "data:application/vnd.ms-excel,"; window.open(result); e.preventDefault(); }); </script> 

When I click the export button I am getting as download.xls. Is it possible to set the file name as data.xls? Can any one explain me where I need to configure that?

2
  • hai I had checked with the response.addheader but no use.Is there any alternative to change the name of the file Commented Mar 12, 2013 at 6:42
  • when I add the response.Addheader it was showing an error like undefined identifier Commented Mar 12, 2013 at 12:18

6 Answers 6

10

here is an example which demonstrates Export HTML Table to Excel With Custom File Name: http://www.kubilayerdogan.net/javascript-export-html-table-to-excel-with-custom-file-name/

Sign up to request clarification or add additional context in comments.

Comments

6

Not only for excel, in addition, for many kind of format can useable.

 var element = document.createElement('a'); element.setAttribute('href', 'data:application/vnd.ms-excel,' + encodeURIComponent(htmlTable)); element.setAttribute('download', fileName); element.style.display = 'none'; document.body.appendChild(element); element.click(); document.body.removeChild(element); 

https://ourcodeworld.com/articles/read/189/how-to-create-a-file-and-generate-a-download-with-javascript-in-the-browser-without-a-server

Comments

3

I had the same issue, and since the new format (maybe not supported by every browser) <a download=""></a> the following worked fine for me. This use directly HTML/Javascript without the PHP server part, because using a submit form is too heavy for big data tables.

  • changing <button> to <a>
  • no more window.open()
  • using the basic <a> behavior (so, no more e.preventDefault()) but changing href to data:blabla and adding download="filename" :
<div id="example" class="k-content"> <a href="#" id="btnExport" >Export to csv!</a> <div id="grid"></div> </div> <script> $("#btnExport").click(function (e) { var result = "data:application/vnd.ms-excel,"; this.href = result; this.download = "my-custom-filename.xls"; return true; }); </script> 

1 Comment

It works great, but for some reason changing button to a caused Windows to block the file (weblogs.asp.net/dixin/…). Any idea how to work around this issue?
1

You can't do this with client-side JavaScript, you need to set the response header...

.NET

Response.AddHeader("Content-Disposition", "inline;filename=filename.xls") 

Or PHP

$filename = 'somehting.xls'; header('Content-Disposition: attachment; filename="'.$filename.'"'); 

2 Comments

jsfiddle.net/SZBrt/11 I placed the code but i am getting error can you please update in this fiddle
yes I tried with the response.Add header when i add it the button export is not working
1
Response.AddHeader "Content-Disposition", "attachment; filename=C:\YOURFILENAME.xls;" 

1 Comment

While this answers the question, an explanation helps everyone understand what's going on.
0
var a = document.createElement('a'); //getting data from our div that contains the HTML table var data_type = 'data:application/vnd.ms-excel'; a.href = data_type + ', ' + encodeURIComponent(tab_text); //setting the file name a.download = 'SupervisorReport.xls'; //triggering the function a.click(); //just in case, prevent default behaviour e.preventDefault(); return (a); 

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.