0

私の MVC アプリケーションには、csv ファイルの JSON 表現を返す C# 関数があります。私はそれをjavascriptでキャッチしてファイルを開こうとしています。基本的に、私はブラウザにそのことをさせて、ユーザーがそれを開くか、保存するか、キャンセルするかを決定できるようにします。ファイルを開くように求めるポップアップが表示されません。以下は機能です

C# 関数

[HttpPost]
public ActionResult ExportToCsv(string fileContents, string fileName)
{
    fileContents = fileContents.Replace("-CARRIAGE-", "\r\n");
    return Json(new { url = File(Encoding.UTF8.GetBytes(fileContents), "text/csv", fileName) }); ;
}

これは、関数への ajax 呼び出しを行っている JavaScript です。

$("#btnExport").click(function (event) {
    event.preventDefault();
    var csv = table2csv(noteTypeTable, "full", "Table.dataTable", "noteTypes");
    $.ajax({
        url: "/Admin/Admin/ExportToCsv/?fileContents=" + csv + "&fileName=NoteTypes.csv",
        type: 'Post',
        success: function (result) {
            window.open(result.url);
        }
    });
});

私は何かが欠けていることを知っています。誰か助けてください。

編集

すべての潜在的な回答とコメントを読んだ後、これが私が達成しようとしていることです。したがって、私のコードがすべてひどく間違っている場合は、お知らせください。

グリッドがあり、Excel へのエクスポート ボタンがあります。必要なデータをJavaScript自体のコンマ区切りテキストに変換するメソッドがあります。これをダウンロード可能な csv ファイルとしてユーザーに提示する必要があります。このために、コントローラー メソッドを使用して File オブジェクトを作成していました。以前の化身は Get メソッドであり、クエリ文字列の長さの制限による制限に直面しました。だから私はそれを POST メソッドに変換しようとしましたが、うまくいきません。

これは、少量のデータで機能する以前のバージョンのコードです

Javascript

   $("#btnExport").click(function (event) {
            event.preventDefault();
            var csv = table2csv(noteTypeTable, "full", "Table.dataTable", "noteTypes");
            window.location.href = "/Admin/Admin/ExportToCsv/?fileContents=" + csv + "&fileName=NoteTypes.csv";
        });

C# 関数

    [HttpGet]
    public ActionResult ExportToCsv(string fileContents, string fileName)
    {
        fileContents = fileContents.Replace("-CARRIAGE-", "\r\n");
        return File(Encoding.UTF8.GetBytes(fileContents), "text/csv", fileName);
    }

これで、より多くのコンテキストが得られることを願っています。基本的に、GET メソッドを POST メソッドに変換し、Javascript から使用する必要がありました。

4

3 に答える 3

0

ajax を使用してバイナリ ファイルを保存することはできません。セキュリティ上の理由から制限されています。ユーザーにファイルを保存してもらいたい場合は、データを JSON 形式で送り返すときに、コントローラーからバイナリ ストリームを返します (つまり、ユーザーがファイルを保存したい場合)。

ここで同様のことを行いました: .net MVC4 で動的に生成されたバイナリ *.xlsx ファイルを適切に作成およびダウンロードする方法は?

于 2013-11-14T23:14:57.393 に答える
0

代わりにjsonファイルとして保存し、現在のページのDOMにロードしてください。私は混乱していますが、CSV ファイルへの URL を含む JSON 応答がありませんか?これは CSV ファイルであり、CSV の JSON 表現ではありませんか?

$("#btnExport").click(function (event) {
        event.preventDefault();
        var csv = table2csv(noteTypeTable, "full", "Table.dataTable", "noteTypes");
        $.ajax({
            url: "/Admin/Admin/ExportToCsv/?fileContents=" + csv + "&fileName=NoteTypes.json",
            type: 'Post',
            success: function (result) {
                var myDummyElement = $('<div>'); //dummy div so you can call load
                myDummyElement .load('result.url #myJson');
            }
        });
    });

<div id="myJson"></div>

[HttpPost]
    public ActionResult ExportToCsv(string fileContents, string fileName)
    {
        //change fileName to be a .json extension
        fileContents = fileContents.Replace("-CARRIAGE-", "\r\n");
        return Json(new { url = File(Encoding.UTF8.GetBytes(fileContents), "text/csv", fileName) }); ;
    }
于 2013-11-14T23:16:57.350 に答える
0

を使用する場合ajaxは、結果をコードで処理することが期待されます。ただし、その方法でファイルのダウンロードを (直接) トリガーすることはできません。

代わりに、 (hidden) を作成して (hidden)formにポストし ( aiframeを与え、それを の として指定することにより)、応答で header が指定されていることを確認します。これにより、ブラウザがファイルの保存を提案します。必要に応じて、ヘッダー値に追加することで、ヘッダーでファイルのファイル名を提案できます。例。iframenametargetformContent-Disposition: attachment; filename="fname.ext"Content-Disposition: attachment; filename="fname.ext"

クライアント側は次のようになります。

$("#btnExport").click(function (event) {
    event.preventDefault();
    var csv = table2csv(noteTypeTable, "full", "Table.dataTable", "noteTypes");
    var frame = $('iframe[name="formreceiver"]');
    if (!frame.length) {
        frame = $('<iframe name="formreceiver"></iframe>').appendTo(document.body).css("display", "none");
    }
    var form = $("#senderform");
    if (!form.length) {
        form = $('<form id="senderform"></form>').appendTo(document.body);
    }
    form = form[0]; // Raw DOM element rather than jQuery wrapper
    form.target = "formreceiver";
    form.action = "/Admin/Admin/ExportToCsv/?fileContents=" + csv + "&fileName=NoteTypes.csv";
    form.method = "POST";
    form.submit();
});

Content-Dispositionサーバー側は、ヘッダー付きの標準形式の応答です。

私は、IE6 以降のブラウザーでこの手法を何年も使用してきました。私の通常のセットアップiframeでは、(上記のように作成するのではなく) マークアップに既に が含まれていますが、それ以外は基本的に私が行うことです。

ユーザーによるボタンのクリックに応じてこれを行うことが重要であることに注意してください。そうでない場合は、ポップアップ ブロッカーの問題が発生します。

于 2013-11-14T23:21:15.880 に答える