0

The answer can be found in this post: Anchor tag download attribute not working :Bug in Chrome 35.0.1916.114

I upgraded my Chrome to Version 35.0.1916.153 today, and then this jsfiddle http://jsfiddle.net/terryyounghk/KPEGU/ is partially broken after this upgrade. It is supposed to export an html table to csv file named "export.csv", It still generated the file with the correct content in it, but the filename is called download now without .csv. Is there any workaround to solve this issue?

HTML:

    <a href="https://stackoverflow.com/questions/16078544/export-to-csv-using-jquery-and-html" target="_blank">Export to CSV using jQuery and html</a>

    <hr>
    <div id="dvData">
        <table>
            <tr>
                <th>Column One</th>
                <th>Column Two</th>
                <th>Column Three</th>
            </tr>
            <tr>
                <td>row1 Col1</td>
                <td>row1 Col2</td>
                <td>row1 Col3</td>
            </tr>
            <tr>
                <td>row2 Col1</td>
                <td>row2 Col2</td>
                <td>row2 Col3</td>
            </tr>
            <tr>
                <td>row3 Col1</td>
                <td>row3 Col2</td>
                <td>row3 Col3</td>
            </tr>
        </table>
    </div>
    <br/>
    <a href="#" class="export">Export Table data into Excel</a>

    <br/>
    <br/>
    <!-- Notes below -->
    <hr>
    <p>Notes</p>
    <ul>
        <li style="font-weight:bold;">You can style your link to look like a button. I'll leave this effort to you</li>
        <li>For issues and support in IE, see this: <a href="https://stackoverflow.com/questions/7405345/data-uri-scheme-and-internet-explorer-9-errors">https://stackoverflow.com/questions/7405345/data-uri-scheme-and-internet-explorer-9-errors</a>

        </li>
        <li>About the &quot;download&quot; attribute, see this: <a href="http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download" target="_blank">http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download</a>. In case you need to detect, see this: <a href="https://stackoverflow.com/questions/12112844/how-to-detect-support-for-the-html5-download-attribute" target="_blank">https://stackoverflow.com/questions/12112844/how-to-detect-support-for-the-html5-download-attribute</a> and this <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=676619" target="_blank">https://bugzilla.mozilla.org/show_bug.cgi?id=676619</a>

        </li>
        <li>Safari does not seem to have implemented the download attribute yet, but renaming the downloaded file and opening it confirms the CSV file is intact</li>
    </ul> 

Javascript:

 $(document).ready(function () {

        function exportTableToCSV($table, filename) {

            var $rows = $table.find('tr:has(td)'),

                // Temporary delimiter characters unlikely to be typed by keyboard
                // This is to avoid accidentally splitting the actual contents
                tmpColDelim = String.fromCharCode(11), // vertical tab character
                tmpRowDelim = String.fromCharCode(0), // null character

                // actual delimiter characters for CSV format
                colDelim = '","',
                rowDelim = '"\r\n"',

                // Grab text from table into CSV formatted string
                csv = '"' + $rows.map(function (i, row) {
                    var $row = $(row),
                        $cols = $row.find('td');

                    return $cols.map(function (j, col) {
                        var $col = $(col),
                            text = $col.text();

                        return text.replace('"', '""'); // escape double quotes

                    }).get().join(tmpColDelim);

                }).get().join(tmpRowDelim)
                    .split(tmpRowDelim).join(rowDelim)
                    .split(tmpColDelim).join(colDelim) + '"',

                // Data URI
                csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);

            $(this)
                .attr({
                'download': filename,
                    'href': csvData,
                    'target': '_blank'
            });
        }

        // This must be a hyperlink
        $(".export").on('click', function (event) {
            // CSV
            exportTableToCSV.apply(this, [$('#dvData>table'), 'export.csv']);

            // IF CSV, don't do event.preventDefault() or return false
            // We actually need this to be a typical hyperlink
        });
    });

CSS:

a.export, a.export:visited {
    text-decoration: none;
    color:#000;
    background-color:#ddd;
    border: 1px solid #ccc;
    padding:8px;
}
Community
  • 1
  • 1
tonystarkix
  • 67
  • 2
  • 10
  • Duplicate of [Anchor tag download attribute not working :Bug in Chrome 35.0.1916.114](http://stackoverflow.com/questions/23816005/anchor-tag-download-attribute-not-working-bug-in-chrome-35-0-1916-114) –  Jun 11 '14 at 23:42
  • filenames from blobs linked using window.URL.createObjectURL() still seem to work, so search for a dataURL2Blob() tool, i found several – dandavis Jun 11 '14 at 23:43
  • Thanks @JeremyMiller and dandavis, this blob solution in the original post works for me! – tonystarkix Jun 12 '14 at 00:02
  • This bug has been fixed in Chrome 36, released July 16, 2014. – bunting Jul 18 '14 at 15:40
  • Thanks for the heads up, @bunting – tonystarkix Jul 20 '14 at 07:25

0 Answers0