Question

您好我正在尝试以csv文件的形式导出动态表。我面临两个问题

只有表格的第一页显示在导出的文件中。由于它是一个动态填充的表，因此可以有多个页面。我每页允许10个项目。
导出的文件不是csv格式。它采用某种默认文件格式。

如果有人可以提供帮助。如果您需要任何其他详细信息，请与我们联系：

代码：

function exportTableToCSV() {
    var tab = $('#searchObjectTableTabs').tabs('getSelected');// selecting the table
    var tabIndex = $('#searchObjectTableTabs').tabs('getTabIndex', tab);
    var data;
    var rows;
    if (tabIndex == '0') // first index of the tab under which the table will be displayed
    {
        data = $('#dg').first(); //Only one table
        rows = $('#dg').datagrid('getRows');
    } else if (tabIndex == '1') // second index
    {
        data = $('#doc').first(); //Only one table
        rows = $('#doc').datagrid('getRows');
    }

    var csvData = [];
    var tmpArr = [];
    var tmpStr = '';
    data.find("tr").each(function () {
        if ($(this).find("th").length) {
            $(this).find("th").each(function () {
                tmpStr = $(this).text().replace(/"/g, '""');
                tmpArr.push('"' + tmpStr + '"');
            });


            csvData.push(tmpArr);
        }
        tmpArr = [];
        $.each(exportArray, function (index, value) {
            csvData.push(exportArray[index].ID + "," + exportArray[index].itemrev + "," + exportArray[index].type + "," + exportArray[index].status + "," + exportArray[index].desc + "," + exportArray[index].owner + "," + exportArray[index].ogrp);

        });
        csvData.push(tmpArr.join('\n'));
        // printObject(tmpArr);
    });

    var output = csvData.join('\n');
    var uri = 'data:application/csv;charset=UTF-8,' + encodeURIComponent(output);
    window.open(uri);
}

Answer 1

请尝试这个：

$(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(/"/g, '""'); // 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
    });
});

Demo

Answer 2

感谢您的回答。我做了一些编辑，现在我能够检索csv文件。但是我只获取第一页的值。例如：如果我的表格中有20页。导出仅发生在第一页

是不是因为代码的这一部分：我们可以使用不同的语法

       {
            data = $('#dg').first(); //Only one table
            rows = $('#dg').datagrid('getRows');
        }

完整代码：

       function exportTableToCSV(filename) {
        var tab = $('#searchObjectTableTabs').tabs('getSelected');// selecting the table
        var tabIndex = $('#searchObjectTableTabs').tabs('getTabIndex', tab);
        var data;
        var rows;
        alert('inside');
        if (tabIndex == '0') // first index of the tab under which the table will be displayed
        {
            data = $('#dg').first(); //Only one table
            rows = $('#dg').datagrid('getRows');
        } else if (tabIndex == '1') // second index
        {
            data = $('#doc').first(); //Only one table
            rows = $('#doc').datagrid('getRows');
        }

        var csvData = [];
        var tmpArr = [];
        var tmpStr = '';
        data.find("tr").each(function () 
        {
            if ($(this).find("th").length) {
                $(this).find("th").each(function () {
                    tmpStr = $(this).text().replace(/"/g, '""');
                    tmpArr.push('"' + tmpStr + '"');
                });                 


                csvData.push(tmpArr);
            }
            tmpArr = [];
            $.each(exportArray, function (index, value) 
            {

            csvData.push(exportArray[index].type + "," + exportArray[index].status + "," + exportArray[index].ID + "," + exportArray[index].itemrev + "," + exportArray[index].desc + "," + exportArray[index].owner + "," + exportArray[index].ogrp);
             });
            csvData.push(tmpArr.join('\n')); 
            // printObject(tmpArr);
        });
        alert('before this');
            var output = csvData.join('\n');
         csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(output);

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

    alert('done');
}


$(".export").on('click', function (event) {
    // CSV
    exportTableToCSV.apply(this,['export.csv']);
  });

导出到CSV问题

2 个答案: