使用窗口对象下载CSV文件

Question

I am trying to create a link that will download a CSV file. My current solution is to listen for a click event on that link and then attach a hidden form, and submit that form. I would like to set the window object equal to the link to the handler that creates the CSV. However it doesn't seem to work, here is what I have so far. I AM NOT INTERESTED IN USING ANY ADDITIONAL LIBRARIES.

This is the handler code that is used to create a dummy CSV file:

else if(action == "exportalldata")
{
    context.Response.Clear();
    context.Response.ContentType = "application/csv";
    context.Response.AddHeader("Content-Disposition", "attachment;     filename=yourData.csv");
    context.Response.Write("\"ID\", \"Description\", \"DTA\"\n");
    context.Response.Write("\"\test1\",\"test2\",\"test3\"\n");   
    context.Response.End();    
}

Form method, when link is clicked that event triggers this(that works):

$form = $(document.createElement('form'))
        .attr({
              action: 'svc/export.ashx/exportAllData',
              method: 'POST'
         })
         .css('display', 'none')
         .appendTo('body');
$form.submit();
$form.empty().remove();

I would like to do the following:

<a id = "exportData" href="javascript:window.location='svc/export.ashx/exportAllData'">Export Variable List</a>

When I do that all that happens is I get a blank Screen and no CSV file ever downloads. It would be nice if the link would also not lead the user away from the page that contains the link as well. I tried setting target = "_blank" however that did not work.

Answer 1

I used a jQuery plugin to solve that exact problem:

http://johnculviner.com/category/jquery-file-download/

You use a simple link like you are already doing and attach a click event that triggers the download via the plugin.

The clever mechanism is detailed here .