jquery table to excel file

I have a html jqgrid table that I make into csv data.  I then want to write that csv to excel.   I believe the issue is in this line:
window.open('data:application/csv;charset=utf-8,' + encodeURIComponent(html));

Open in new window

It does some wacky stuff on people's PCs, I dont know why, I think it it because they do not have *.csv associated with anything maybe.  But, in C# I do other data and it works well.  Question is, assuming my csv data inside the html variable is good, how do I open it in Excel, and possibly with a friendlier filename.  It seems to make a wacky filename like "XXvZZr12HJ.csv.csv".  I would be fine with a static filename like "hello.csv".

In C# I would do this code, and it would open a nice Excel file:
     Response.Clear();
      Response.Buffer = true;
      Response.AddHeader("content-disposition", "attachment;filename=GridViewExport.csv");
      Response.Charset = "";
      Response.ContentType = "application/text";
      Response.Output.Write(sb.ToString());
      Response.Flush();
      Response.End();

Open in new window

DemosthenesAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rainer JeschorCommented:
Hi,

do you want to do this purely on the client side? Or using C# / ASP.NET on the server side?
For server side creation of a "real" Excel file (using Office OpenXML) please have a look here:
http://www.codeproject.com/Articles/784342/Export-data-from-jqGrid-into-a-real-Excel-file
Very good article.

For the client side version (assuming you have already created the HTML) the following should work:
// Used to "host" the necessary options	
var link = document.createElement('a');
// Set the ID of the link (used for removal later on)
link.id = 'LinkDownloadExcel';
// Set the content and type
link.href = 'data:application/vnd.ms-excel,' + encodeURIComponent(html);
// Set the file name option
link.download = 'jqGridDownload.xls';
// Add the download link to the document
document.body.appendChild(link);
// Fire the Excel file download
link.click(); 
// Remove the download link
document.getElementById('LinkDownloadExcel').remove();

Open in new window


HTH
Rainer
Julian HansenCommented:
You can do this by dynamically modifying an <a> element like so

HTML - link
<a id="download" href="#">Click</a>

Open in new window

HTML - Data
    <pre id="data">
      1,2,3,4,5
      6,7,8,9,10
    </pre>

Open in new window

jQuery
<script>
$(function() {
  $('#download').click(function(e) {
    var html = $('#data').text();
    $(this).attr('href', 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(html)).attr('download', 'testfile.csv');
  });
});
</script>

Open in new window

Note the application/vnd.ms-excel instead of application/csv - see if that helps with connecting the csv to Excel.

The above can be changed dynamically depending on what you want to do re filenames and data etc.
Working sample here

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
DemosthenesAuthor Commented:
This seems to work, I found it right after I posted this q

        var uri = 'data:text/csv;charset=utf-8,' + html;
        var downloadLink = document.createElement("a");
        downloadLink.href = uri;
        downloadLink.download = "Export.csv";
        document.body.appendChild(downloadLink);
        downloadLink.click();
        document.body.removeChild(downloadLink);

Open in new window

DemosthenesAuthor Commented:
Hey guys this doesn't seem to work in IE.  Either solution.
Julian HansenCommented:
IE specifically does not support this citing security reasons
https://msdn.microsoft.com/en-us/library/cc848897%28v=vs.85%29.aspx
For security reasons, data URIs are restricted to downloaded resources. Data URIs cannot be used for navigation, for scripting, or to populate frame or iframe elements.

The right way of doing this would be to send the data to the server and have the server send back the file. Either that or disqualify IE as a target browser.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.