Bookmarklet for Creating a CSV From an HTML Table
We have a wiki at work that we use for documentation called Confluence. It has the ability to export pages to Word or PDF, but a lacking feature is the ability to take a table and export it for Excel. So, I decided to create a bookmarklet that will allow you to select an HTML table on any web page and create a CSV file from that table that can be downloaded to your machine. Below is the bookmarklet. Just drag it to your bookmarks toolbar. Then give it a shot by clicking the bookmarklet and the below example table should get a link right before it that says “Export to CSV”. Click that link and you will be prompted to download the CSV version of that table. Let me know if it is useful for you.
On thing of note, this will not work correctly in Internet Explorer 9 and below as IE will not allow data uri’s for anything other than images.
Bookmarklet:
Export to CSV <- drag this to your bookmarks toolbar
Update:
05/08/2019 – Enhanced to not kill line breaks.
09/16/2016 – Now works with IE 10+.
04/19/2016 – Fixed issue with tables that have header cells not on top.
Example Table:
Heading 1 | Heading 2 | Heading 3 | Heading 4 | Heading 5 | Heading 6 |
---|---|---|---|---|---|
Data 1, 1 | Data 1, 2 | Data 1, 3 | Data 1, 4 | Data 1, 5 | Data 1, 6 |
Data 2, 1 | Data 2, 2 | Data 2, 3 | Data 2, 4 | Data 2, 5 | Data 2, 6 |
Data 3, 1 | Data 3, 2 | Data 3, 3 | Data 3, 4 | Data 3, 5 | Data 3, 6 |
Data 4, 1 | Data 4, 2 | Data 4, 3 | Data 4, 4 | Data 4, 5 | Data 4, 6 |
Data 5, 1 | Data 5, 2 | Data 5, 3 | Data 5, 4 | Data 5, 5 | Data 5, 6 |
Data 6, 1 | Data 6, 2 | Data 6, 3 | Data 6, 4 | Data 6, 5 | Data 6, 6 |
Bookmarklet Source:
javascript:(function(){ function getJavaScript(url, success) { var script = document.createElement('script'); script.src = url; var head = document.getElementsByTagName('head')[0], done = false; script.onload = script.onreadystatechange = function(){ if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) { done = true; success(); script.onload = script.onreadystatechange = null; head.removeChild(script); } }; head.appendChild(script); } function addCSVLinks() { jQuery('.csvLink').remove(); jQuery('table').each(function(index){ jQuery(this).attr('data-csvtable', index).before('<a href="#" class="csvLink" data-forcsvtable="' + index + '">Export to CSV</a>'); }); jQuery('.csvLink').click(function(){ var text = ''; var csvTableIndex = jQuery(this).attr('data-forcsvtable'); jQuery('table[data-csvtable="' + csvTableIndex + '"] tr').each(function(){ jQuery('td, th', this).each(function(index){ if(index != 0) { text += ','; } text += '"' + formatedText(jQuery(this).html()) + '"'; }); text += '\r\n'; }); jQuery('.csvLink').remove(); downloadCSVFile('TableExport.csv', 'text/csv', text); }); } function formatedText(html) { var ret = html; //replace line breaks ret = ret.replace(/\n/g, ' '); //replace tabs ret = ret.replace(/\t/g, ' '); //replace multiple spaces ret = ret.replace(/\s+/g, ' '); //Fix html encoded characters ret = decodeHtml(ret); //Deal with lines breaks and paragraphs ret = ret.replace(/<br>/ig, '\n<br>'); ret = ret.replace(/<br/ig, '\n<br '); ret = ret.replace(/<p/ig, '\n<p '); //Deal with quotes ret = ret.replace(/"/ig, '""'); //Deal first character being line break ret = ret.replace(/^\n/, ''); //Remove HTML tags ret = ret.replace(/(<([^>]+)>)/ig,""); return ret; } function decodeHtml(html) { var txt = document.createElement('textarea'); txt.innerHTML = html; return txt.value; } function downloadCSVFile(filename, mime, text) { if (window.navigator.msSaveOrOpenBlob){ // IE 10+ var blob = new Blob([decodeURIComponent(encodeURI(text))], { type: 'text/csv;charset=utf-8' }); window.navigator.msSaveBlob(blob, filename); } else { var pom = document.createElement('a'); pom.setAttribute('href', 'data:' + mime + ';charset=utf-8,' + encodeURIComponent(text)); pom.setAttribute('download', filename); document.body.appendChild(pom); pom.click(); document.body.removeChild(pom); } } if(typeof jQuery == 'undefined') { getJavaScript( '//code.jquery.com/jquery-latest.min.js', function(){ addCSVLinks(); } ) } else { addCSVLinks(); } })();