7

DHTMLXグリッドをcsvにエクスポートしていて、.CSVファイルを正常に作成できました。私が抱えている問題は、ファイルを保存/開くようにユーザーに促していないことです。JavaScriptからの$.post呼び出しを使用してCSV文字列をPHPに送信し、その文字列をcsvに書き込みます。何らかの理由で、ユーザーへのプロンプトは作成されていませんが、ファイルの書き込みとサーバーへの保存は正常に行われています。関連するコードは次のとおりです。

JS：

myGrid.csvParser = myGrid.csvExtParser;
myGrid.setCSVDelimiter('|');
myGrid.csv.row = "endOfRow";           
var gridCsvData = myGrid.serializeToCSV();

    $.post(
        "data/export.php", 
        { 
           csvdata: gridCsvData
        }
    );

PHP（export.php）：

$csvData = $_REQUEST['csvdata'];

$csv = explode('endOfRow',$csvData);

$myfile = "grid.csv";

$fh = fopen($myfile, 'w') or die("can't open file");

foreach($csv as $line) {
    fputcsv($fh, explode('|',$line),',','"');
}

fclose($fh);

//Redirect output to a client's web browser (csv)
header("Content-type: application/csv");
header("Content-Disposition: attachment; filename=grid.csv");
header("Pragma: no-cache");
header("Expires: 0");

このコードは、グリッドを希望どおりにエクスポートし、「grid.csv」に保存するという意味で完全に機能します。問題は、ファイルを保存するようにユーザーに促していないことです。これは私のPHPヘッダーの問題ですか、それとも成功を促すために$ .postに何かを入れる必要がありますか？助けてくれてありがとう！

4

2 に答える 2

14

AJAX呼び出しからファイルをダウンロードするようにユーザーに促すことはできません。できることの1つは、iFrameを作成し、それにフォームを入れてからPOSTすることです。そうすれば、AJAX呼び出しのように見えますが、ユーザーはファイルをダウンロードするように求められます。

// Create iFrame
var iframe = document.createElement('iframe');
iframe.style.display = "none";
document.body.appendChild(iframe);

// Get the iframe's document
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

// Make a form
var form = document.createElement('form');
form.action = 'data/export.php'; // Your URL
form.method = 'POST';

// Add form element, to post your value
var input = document.createElement('input');
input.type = 'hidden';
input.name = 'csvdata';
input.value = gridCsvData;  // Your POST data

// Add input to form
form.appendChild(input);

// Add form to iFrame
// IE doesn't have the "body" property
(iframeDoc.body || iframeDoc).appendChild(form);

// Post the form :-)
form.submit();

PS PHPコードは、実際にはCSVを画面にエコーするのではなく、ファイルに保存するだけです。

ヘッダーの呼び出し後、次のことを確認してください。

readfile($myfile);
于 2012-08-23T18:55:47.603 に答える
2

HTML5でこれを行う正しい方法は、FileAPIを使用することです。詳細については、http：//hackworthy.blogspot.com/2012/05/savedownload-data-generated-in.htmlを参照してください。

HTML5がオプションでない場合は、このアプローチを採用してください。

POSTを実行した後、以下を使用してファイルのGET要求を生成します。

document.location = "file.csv";

ブラウザに応じて、ファイルは保存されるか（Chrome）、またはユーザーは名前を付けて保存するファイル名を選択するように求められます。もちろん、POSTハンドラーはファイルをどこかに保存する必要があります。

$.ajax({
    type: "POST",
    url: "post.php",
    success: function() {
        console.log("Worked!");
        document.location = "test.csv";
    },
    error: function() {
        console.log("Failed!");
    }
});
于 2012-08-23T19:50:21.870 に答える