Creating CSV on Client

Dynamically Creating CSV Files on the Client

HTML

<form action="" method="">
    <table>
        <tr>
            <th>Name</th>
            <th>Cookies</th>
        </tr>
        <tr>
            <td><input type="text" class="nameField" /></td>
            <td><input type="text" class="cookieField" /></td>
        </tr>
        <tr>
            <td><input type="text" class="nameField" /></td>
            <td><input type="text" class="cookieField" /></td>
        </tr>
    </table>
    <a href="#" id="dataLink"></a>
    <input type="button" id="downloadLink" value="Create Excel" /> 
</form>

JavaScript

// Source: Raymond Camden's Blog
// http://www.raymondcamden.com/2014/04/03/Dynamically-Creating-CSV-Files-on-the-Client
$(document).ready(function() {
	var $link = $("#dataLink");
	var $nameFields = $(".nameField");
	var $cookieFields = $(".cookieField");
	
	$("#downloadLink").on("click", function(e) {
		var csv = "";
		//we should have the same amount of name/cookie fields
		for(var i = 0; i < $nameFields.length; i++) {
			var name = $nameFields.eq(i).val();
			var cookies = $cookieFields.eq(i).val();
			if(name !== '' && cookies !== '') csv += name + "," + cookies + "\r\n";	
		}
		console.log(csv);
		
		$link.attr("href", 'data:Application/octet-stream,' + encodeURIComponent(csv))[0].click();
	});
});