javascript - 将 html 表格导出到 CSV 文件，总是返回空文件-6ren

javascript - 将 html 表格导出到 CSV 文件，总是返回空文件

转载作者：行者123 更新时间：2023-11-30 16:56:29

我正在开发一个 asp.net mvc5 网络应用程序。我需要实现将 Html 表导出到 .csv 文件的功能。所以我添加了以下链接:-

<a href="#" class="export">Export Table data into Excel</a >

我有以下脚本:-

$(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
    });
});

我在这个 link 上使用 tabletoCSV 插件, 如下:-

jQuery.fn.table2CSV = function (options) {
    var options = jQuery.extend({
        separator: ',',
        header: [],
        delivery: 'popup' // popup, value
    },
    options);

    var csvData = [];
    var headerArr = [];
    var el = this;

    //header
    var numCols = options.header.length;
    var tmpRow = []; // construct header avalible array

    if (numCols > 0) {
        for (var i = 0; i < numCols; i++) {
            tmpRow[tmpRow.length] = formatData(options.header[i]);
        }
    } else {
        $(el).filter(':visible').find('th').each(function () {
            if ($(this).css('display') != 'none') tmpRow[tmpRow.length] = formatData($(this).html());
        });
    }

    row2CSV(tmpRow);

    // actual data
    $(el).find('tr').each(function () {
        var tmpRow = [];
        $(this).filter(':visible').find('td').each(function () {
            if ($(this).css('display') != 'none') tmpRow[tmpRow.length] = formatData($(this).html());
        });
        row2CSV(tmpRow);
    });
    if (options.delivery == 'popup') {
        var mydata = csvData.join('\n');
        return popup(mydata);
    } else {
        var mydata = csvData.join('\n');
        return mydata;
    }

    function row2CSV(tmpRow) {
        var tmp = tmpRow.join('') // to remove any blank rows
        // alert(tmp);
        if (tmpRow.length > 0 && tmp != '') {
            var mystr = tmpRow.join(options.separator);
            csvData[csvData.length] = mystr;
        }
    }
    function formatData(input) {
        // replace " with â€œ
        var regexp = new RegExp(/["]/g);
        var output = input.replace(regexp, "â€œ");
        //HTML
        var regexp = new RegExp(/\<[^\<]+\>/g);
        var output = output.replace(regexp, "");
        if (output == "") return '';
        return '"' + output + '"';
    }
    function popup(data) {
        var generator = window.open('', 'csv', 'height=400,width=600');
        generator.document.write('<html><head><title>CSV</title>');
        generator.document.write('</head><body >');
        generator.document.write('<textArea cols=70 rows=15 wrap="off" >');
        generator.document.write(data);
        generator.document.write('</textArea>');
        generator.document.write('</body></html>');
        generator.document.close();
        return true;
    }
};

目前我得到了以下标记，其中显示了一个表格和导出超链接:-

<table id="dvData" class= "table table-striped table-bordered bootstrap-datatable datatable">
    <tr>
        <th></th>
        <th>
            Name
        </th>
        <th class="hidden-phone hidden-tablet">
             Description
        </th>
        <th>
            User Groups
        </th>
        <th>
            Security Roles
        </th>
        <th class="hidden-phone hidden-tablet">

        </th>
    </tr>

    <tr id = "234">
        <td>
            <a href="/SecurityGroup/Edit/234">Edit</a> 
 |
<a data-ajax="true" data-ajax-confirm="Are You sure You want to delete (de)" data-ajax-failure="deletionerror" data-ajax-method="Post" data-ajax-success="deletionconfirmation" href="/SecurityGroup/Delete/234">Delete</a>  </td>
        <td>
            <a href="/SecurityGroup/Details/234">de</a>
        </td>
        <td class="hidden-phone hidden-tablet">
            d
        </td>
        <td>
            The are <a href="/SecurityGroup/Details/234">0</a> Users.

        </td>
        <td>

        </td>
        <td class="center hidden-phone hidden-tablet">



            <a class="btn btn-success" href="/SecurityGroup/Details/234">
    <i class="icon-zoom-in icon-white"></i>
    Details
    </a>

        </td>
    </tr>
    <tr id = "233">
        <td>
            <a href="/SecurityGroup/Edit/233">Edit</a> 
  </td>
        <td>
            <a href="/SecurityGroup/Details/233">only me</a>
        </td>
        <td class="hidden-phone hidden-tablet">

        </td>
        <td>
            The are <a href="/SecurityGroup/Details/233">10</a> Users.

        </td>
        <td>

        </td>
        <td class="center hidden-phone hidden-tablet">



            <a class="btn btn-success" href="/SecurityGroup/Details/233">
    <i class="icon-zoom-in icon-white"></i>
    Details
    </a>

        </td>
    </tr>
    <tr id = "230">
        <td>
            <a href="/SecurityGroup/Edit/230">Edit</a> 
 |
<a data-ajax="true" data-ajax-confirm="Are You sure You want to delete (rwerwe)" data-ajax-failure="deletionerror" data-ajax-method="Post" data-ajax-success="deletionconfirmation" href="/SecurityGroup/Delete/230">Delete</a>  </td>
        <td>
            <a href="/SecurityGroup/Details/230">rwerwe</a>
        </td>
        <td class="hidden-phone hidden-tablet">

        </td>
        <td>
            The are <a href="/SecurityGroup/Details/230">0</a> Users.

        </td>
        <td>

        </td>
        <td class="center hidden-phone hidden-tablet">



            <a class="btn btn-success" href="/SecurityGroup/Details/230">
    <i class="icon-zoom-in icon-white"></i>
    Details
    </a>

        </td>
    </tr>
    <tr id = "231">
        <td>
            <a href="/SecurityGroup/Edit/231">Edit</a> 
  </td>
        <td>
            <a href="/SecurityGroup/Details/231">users</a>
        </td>
        <td class="hidden-phone hidden-tablet">

        </td>
        <td>
            The are <a href="/SecurityGroup/Details/231">1</a> Users.

        </td>
        <td>

        </td>
        <td class="center hidden-phone hidden-tablet">



            <a class="btn btn-success" href="/SecurityGroup/Details/231">
    <i class="icon-zoom-in icon-white"></i>
    Details
    </a>

        </td>
    </tr>
    <tr id = "232">
        <td>
            <a href="/SecurityGroup/Edit/232">Edit</a> 
  </td>
        <td>
            <a href="/SecurityGroup/Details/232">w</a>
        </td>
        <td class="hidden-phone hidden-tablet">
            w
        </td>
        <td>
            The are <a href="/SecurityGroup/Details/232">5</a> Users.

        </td>
        <td>

        </td>
        <td class="center hidden-phone hidden-tablet">



            <a class="btn btn-success" href="/SecurityGroup/Details/232">
    <i class="icon-zoom-in icon-white"></i>
    Details
    </a>

        </td>
    </tr>

</table></div></div></div>


<a href="#" class="export">Export Table data into Excel</a> </section>

但是当我单击导出超链接并保存文档时；文档大小仅为 1 kb，当我使用 excel 打开它时，它显示空白页，如果我使用记事本打开它，它将显示 ""那么任何人都可以提出建议吗？

最佳答案

我会在底部留下一个可用的 fiddle 示例。

需要做一些工作的部分主要是:

exportTableToCSV.apply(this, [$('#dvData>table'), 'export.csv']);

收件人:

exportTableToCSV.apply(this, [$('#dvData'), 'export.csv']);

然后是格式化结果的问题:

// 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().replace(/(\r\n|\n|\r)/gm,"").trim() + '"';
                return text //.replace('"', '""'); // escape double quotes
            }).get().join(tmpColDelim);
        }).get().join(tmpRowDelim)
            .split(tmpRowDelim).join(rowDelim)
            .split(tmpColDelim).join(colDelim),

它现在返回一个逗号分隔的列表，其中每一列都用引号引起来。

关于 jsFiddle 的示例

我会把微调留给你。

关于javascript - 将 html 表格导出到 CSV 文件，总是返回空文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29631019/