exporting html table with links to csv

Question

I am using the following function to export a table to a csv file for our users to export a copy of their purchases to a format they can use in quickbooks, excel, etc.

The function works great, except that the first column of our table contains urls and these columns appear blank in the export.

I am wondering how i could modify this so when a link is encountered as a field the text of that link would be added to the csv.

Example: <a href="example.php">an example</a> would add an example to the csv for that field.

        function exportTableToCSV($table, filename) {
            var $rows = $table.find('tr:has(td),tr:has(th)'),
            tmpColDelim = String.fromCharCode(11), // vertical tab character
            tmpRowDelim = String.fromCharCode(0), // null character
            colDelim = '","',
            rowDelim = '"\r\n"',
            csv = '"' + $rows.map(function (i, row) {
                var $row = $(row), $cols = $row.find('td,th');
                return $cols.map(function (j, col) {
                    var $col = $(col), text = $col.text();
                    return text.replace(/"/g, '""'); // escape double quotes
                }).get().join(tmpColDelim);
            }).get().join(tmpRowDelim).split(tmpRowDelim).join(rowDelim).split(tmpColDelim).join(colDelim) + '"',
            csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
            console.log(csv);

            if (window.navigator.msSaveBlob) { // IE 10+
                window.navigator.msSaveOrOpenBlob(new Blob([csv],
                {type: "text/plain;charset=utf-8;"}),
                "csvname.csv")
            } else {
                $(this).attr({ 'download': filename, 'href': csvData, 'target': '_blank' });
            }
        }

Javan · Accepted Answer · 2019-06-23 18:34:52Z

1

As far as I can see, your snippet should already support this. It iterates over all rows of the table and for each row over all of its column fields, where jQuery's text() function is applied in order to extract the text. This should return the text between a tags as well.

Example:

console.log($('<td><a href="test.html">Test page</a></td>').text());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

will return the string Test page.

This fiddle contains the function you provided and a dummy table with some anchor elements. In my opinion it already meets your requirements.

edited Jun 23, 2019 at 18:34

answered Jun 23, 2019 at 18:07

Javan

1891 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bruce Over a year ago

seems you are correct, for some reason excel has an issue importing our first column - can't figure out why. Works perfectly when I import to google sheets.

CIC92 · Accepted Answer · 2019-06-23 18:17:45Z

0

var a = document.createElement('a');
a.href = "http://example.php";
a.append("an example"); 
document.body.appendChild(a);

console.log(a.textContent);

answered Jun 23, 2019 at 18:17

CIC92

259 bronze badges

Collectives™ on Stack Overflow

exporting html table with links to csv

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related