Download a CSV from the Front-End

If you want to make your form entry data into a downloadable CSV, it's really easy. Just create a new View, to display All Entries or a Single Entry.

1) In the Before Content section, you'll add this:

<a class='my-button-class' download='My CSV Filename.csv' href="data:application/csv;charset=utf-8,Column1Heading%2CColumn2Heading%2CColumn3Heading%2CColumn4Heading%2CColumn5Heading%0A

Notice in the href attribute, after the initial settings of the application format and character set, each column heading is separated by %2C, which means a comma. When you get to the end of your row, you end it with %0A. If you need spaces in your column headings, separate them with %20, or else the spaces will be removed by the browser.

The download attribute will define your filename. If you want it to be dynamic, I do this using url query strings and a couple custom shortcodes, which I'll discuss at the end of this.

2) In the After Content section, you'll just add this:

">Download CSV</a>

3. In the Content section, you just do this:

[125]%2C[126]%2C[127]%2c[128]%2C[129]%0A

where the field ID shortcodes match the field IDs from your form that you want to throw into this CSV file. Note that each field-id shortcode is separated by the %2C, and at the end of the row, you use a %0A. Again, if you need to put a space in between two tags, use %20 like this: Say the first column is for a person's name, and you want it ordered LastName, FirstName:

[125],%20[126]%2C  //etc.

Note that if your field values themselves have spaces in them, they are going to be removed by the browser. I personally haven't had to use any fields that have spaces in them yet (just dates, times, monetary values, etc.), but to fix the problem you could do a little jQuery like this for instance (just tested):

jQuery(document).ready( function($) {
    $('a.my-button-class').each(function() {
        this.href = this.href.replace(/s/g,"%20");
    });
});

Just throw that in your header, or in between script tags, and it'll preserve the spaces. I wouldn't recommend it if you have lots of these on the same page though, just for the load. But whatever works.

Anyway, that's it. Then you just put whatever filters on your View that you want, and wherever you place that View's shortcode, you'll have a nice "Download CSV" button. I've tested it up to 225 rows of data, across ten columns, and it's instantaneous and doesn't miss a beat.

Now, if you want the title of the CSV document to be dynamic, the way I do it is by reference to url querystrings. I have a querystring params for the user's user id, and then for Begin and End date search parameters. So I use the following custom shortcodes to make the CSV document filename dynamic:

// USER ID CONVERTED TO NAME
add_shortcode('id2name', 'ssfc_id_to_name');
function ssfc_id_to_name($atts){
    extract(shortcode_atts(array('param' => '', 'before' => '', 'after' => '', 'ifempty' => ''), $atts));
	$uid = $_GET[$param];
	$user_info = get_userdata($uid);
	$name = $user_info->display_name;
	$output = $before.$name.$after;
	return 	($name == '' ? ($ifempty ? $ifempty : null ) : $output);
}

That shortcode converts the user_id into the display_name, and lets you optionally specify anything you want to put before or after the output (like H3 tags, for instance, which isn't relevant to our purposes here), and also optionally allows you to specify what to return if the value of the param is null. Using ifempty=Employee in the shortcode would supplement "Employee" if the user_id isn't found in the url.

Then I use this which is simpler:

// GET URL PARAM
add_shortcode('frm_get', 'ssfc_frm_get');
function ssfc_frm_get($atts){
    extract(shortcode_atts(array('param' => '', 'before' => '', 'after' => '', 'ifempty' => ''), $atts));
	$value = $_GET[$param];
	$output = $before.$value.$after;
	return 	($value == '' ? ($ifempty ? $ifempty : null ) : $output);
}

And that's what I use to grab the dates from the url.

So in my CSV View's Before Content, the download attribute in my CSV link looks like this:

download="[id2name param=employee_id] Mileage Reimbursements ([frm_get param=first] - [frm_get param=last]).csv"

where "first" and "last" are the param names for the dates specified in the search form.

And there you have it. A CSV download link with three simple lines of text, one in your Before Content, Content, and After Content sections respectively.