1

ページに複数のテーブルがある場合、table2CSV.js を使用してエクスポートできません。

最初のボタンは正しく機能しますが、他のボタンを使用すると空のファイルがエクスポートされます。何か案は？さらに情報が必要な場合は、アドバイスしてください。

正しく機能するのは、常にページの最初のテーブルであることを付け加えたいと思います...

シングルザコール（JS）を確認してください：

function getCSVData(tableName){
    var csv_value=$(tableName).table2CSV({delivery:'value'});
    $("#csv_text").val(csv_value);
}

そして、JS を呼び出すための HTML フォーム ボタン (ページ上にいくつかあります):

<form action="getCSV.php" method ="post" > 
    <input type="hidden" name="csv_text" id="csv_text">
    <input type="hidden" name="fileName" id="fileName" value="<?php echo($fileName); ?>">
    <input type="submit" value="Download Table 0" onclick="getCSVData('table#detail0')">
</form>


<form action="getCSV.php" method ="post" > 
    <input type="hidden" name="csv_text" id="csv_text">
    <input type="hidden" name="fileName" id="fileName" value="<?php echo($fileName); ?>">
    <input type="submit" value="Download Table 1" onclick="getCSVData('table#detail1')">
</form>

<form action="getCSV.php" method ="post" > 
    <input type="hidden" name="csv_text" id="csv_text">
    <input type="hidden" name="fileName" id="fileName" value="<?php echo($fileName); ?>">
    <input type="submit" value="Download Table 2" onclick="getCSVData('table#detail2')">
</form>

参照用にいくつかのテーブル オープン タグも示します。

参考までに、ここに getCSV.php ファイルがあります

<?php
    $file = $_REQUEST['fileName'];
    $filename = $file."_".date("Y-m-d_H-i",time());
    header("Content-type: application/vnd.ms-excel");
    header("Content-disposition: csv" . date("Y-m-d") . ".csv");
    header( "Content-disposition: filename=".$filename.".csv");

    $csv_output=stripcslashes($_REQUEST['csv_text']);
    print $csv_output;
    exit;   

?>

参考までに、table2CSV.js コードを次に示します。

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;
    }
};
4

1 に答える 1

1

フォームの3つの入力（非表示）すべてに同じIDを指定しているため、2番目と3番目のテーブルでは機能しません。

<input type="hidden" name="csv_text" id="csv_text">

IDは一意である必要があります

同じIDを持つ複数のHTMLElementがある場合、Javascriptで取得すると、最初から最初に見つかったものが取得されます。したがって、常に最初のフォームから1つを取得します。

次の各フォームの入力を変更します。

<input type="hidden" name="csv_text" id="csv_text_1" />

<input type="hidden" name="csv_text" id="csv_text_2" />

<input type="hidden" name="csv_text" id="csv_text_3" />

次に、関数を変更します。

function getCSVData(tableName, num){
    var csv_value=$(tableName).table2CSV({delivery:'value'});
    $("#csv_text_" + num).val(csv_value);
}

最後に通話を更新します。

<input type="submit" value="Download Table 0" onclick="getCSVData('table#detail0', '0')">

<input type="submit" value="Download Table 0" onclick="getCSVData('table#detail1', '1')">

<input type="submit" value="Download Table 0" onclick="getCSVData('table#detail2', '2')">

個人的な意見：PHPサーバーのおかげで、ファイル添付ヘッダーを追加するためだけに、テーブルのすべてのコンテンツを送信することは少し役に立たないようです。ネットワークを使用して、変更なしで（ヘッダーを追加するためだけに）再送信されるデータを送信しています。

このようなプロセスを実行する必要がある場合は、特定のPHPスクリプトに単純なGETリクエストを送信して、正しいヘッダーを送信してから、CSVコンテンツを生成し、データベースからデータを取得します。

于 2013-03-04T00:36:13.420 に答える