CSV & javascript

五月 23, 2017
<a href="data:application/csv;charset=utf-8,test,tes,1,encodeURIComponent()"
download="test.csv" target="_blank"> CSV</a>

Reference: http://wijmo.com/topic/wijgrid-in-csv/
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!--jQuery References-->
    <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js" type="text/javascript"></script>

    <!--Theme-->
    <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />

    <!--Wijmo Widgets CSS-->
    <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20132.9.min.css" rel="stylesheet" type="text/css" />

    <!--Wijmo Widgets JavaScript-->
    <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20132.9.min.js" type="text/javascript"></script>
    <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20132.9.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#demo").wijgrid({
                allowColSizing: true,
                allowEditing: true
            });
            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'
                    });
            }

            
            $("#Export").on('click', function (event) {
                var $table = $("#demo").parent().html();
                exportTableToCSV.apply(this, [$($table), 'export.csv']);

            });
        });
    </script>
</head>
<body>
    <table id="demo">
        <thead>
            <tr>
                <th>EmployeeID</th>
                <th>LastName</th>
                <th>FirstName</th>
                <th>Title</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Davolio</td>
                <td>Nancy</td>
                <td>Sales Representative</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Fuller</td>
                <td>Andrew</td>
                <td>Vice President</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Leverling</td>
                <td>Janet</td>
                <td>Sales Representative</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Peacock</td>
                <td>Margaret</td>
                <td>Sales Representative</td>
            </tr>
            <tr>
                <td>5</td>
                <td>Buchanan</td>
                <td>Steven</td>
                <td>Sales Manager</td>
            </tr>
            <tr>
                <td>6</td>
                <td>Suyama</td>
                <td>Michael</td>
                <td>Sales Representative</td>
            </tr>
            <tr>
                <td>7</td>
                <td>King</td>
                <td>Robert</td>
                <td>Sales Representative</td>
            </tr>
        </tbody>
    </table>
    <br />
    <a id="Export" href="#">Export to CSV</a>

</body>
</html>
搜索此博客

辛淼 Jin

CSV & javascript

评论

发表评论

此博客中的热门博文

XML, XSL, HTML

Input in element.eleme.io

How do I load binary image data using Javascript and XMLHttpRequest?
