web-dev-qa-db-ja.com

JSONデータを含むPOSTを介してファイルをダウンロードするためのJavaScript / jQuery

私はjqueryベースの単一ページのWebアプリケーションを持っています。 AJAX呼び出しを介してRESTful Webサービスと通信します。

私は次のことを達成しようとしています。

  1. JSONデータを含むPOSTをREST urlに送信します。
  2. 要求がJSON応答を指定している場合は、JSONが返されます。
  3. 要求がPDF/XLS/etc応答を指定している場合は、ダウンロード可能なバイナリが返されます。

1と2が動作しています。クライアントのjqueryアプリは、JSONデータに基づいてDOM要素を作成することによって、返されたデータをWebページに表示します。私はWebサービスの観点からも＃3の作業をしています。つまり、正しいJSONパラメータが与えられればバイナリファイルを作成して返すということです。しかし、私はクライアントのJavaScriptコードで＃3を扱うための最良の方法がわからない。

このようなajax呼び出しからダウンロード可能なファイルを取り戻すことは可能ですか？ファイルをダウンロードして保存するにはどうすればよいですか。

$.ajax({
    type: "POST",
    url: "/services/test",
    contentType: "application/json",
    data: JSON.stringify({category: 42, sort: 3, type: "pdf"}),
    dataType: "json",
    success: function(json, status){
        if (status != "success") {
            log("Error loading data");
            return;
        }
        log("Data loaded!");
    },
    error: function(result, status, err) {
        log("Error loading data");
        return;
    }
});

サーバーは次のヘッダーで応答します。

Content-Disposition:attachment; filename=export-1282022272283.pdf
Content-Length:5120
Content-Type:application/pdf
Server:Jetty(6.1.11)

もう1つのアイデアは、PDFを生成してサーバーに格納し、ファイルへのURLを含むJSONを返すことです。次に、ajax成功ハンドラーで別の呼び出しを発行して、次のようなことをします。

success: function(json,status) {
    window.location.href = json.url;
}

しかし、それを行うには、サーバーに複数の呼び出しを行う必要があり、私のサーバーはダウンロード可能なファイルを作成し、それらをどこかに保存してから、定期的にそのストレージ領域をクリーンアップする必要があります。

これを達成するためのもっと簡単な方法がなければなりません。アイデア？

編集：$。ajaxのドキュメントを確認した後、レスポンスdataTypeはxml, html, script, json, jsonp, textのうちの1つのみになることができるので、バイナリファイルを@VinayCの回答で提案されているようにData URIスキームを使用します（これは私がやりたいことではありません）。

だから私は私のオプションがあると思います：

  1. Ajaxを使用せずに、代わりにフォームの投稿を送信し、私のJSONデータをフォームの値に埋め込んでください。おそらく隠れたiframeなどを台無しにする必要があるでしょう。

  2. Ajaxを使用せず、代わりに私のJSONデータをクエリ文字列に変換して標準のGETリクエストを構築し、window.location.hrefをこのURLに設定します。ブラウザのURLがアプリケーションのURLから変更されないようにするには、クリックハンドラでevent.preventDefault（）を使用する必要があります。

  3. 上記の私の他の考えを使用しなさい、しかし@naikusの答えからの提案と高められる。 Webサービスにこれがajax呼び出しを介して呼び出されていることを知らせる何らかのパラメーターを指定してAJAX要求を送信します。 Webサービスがajax呼び出しから呼び出された場合は、生成されたリソースへのURLを指定してJSONを返すだけです。リソースが直接呼び出された場合は、実際のバイナリファイルを返します。

私はそれについて考えるほど、私はより多くの最後の選択肢が好きです。このようにして、リクエストに関する情報（生成時間、ファイルサイズ、エラーメッセージなど）を取得し、ダウンロードを開始する前にその情報に基づいて行動することができます。欠点は、サーバー上の余分なファイル管理です。

これを達成するための他の方法はありますか？私が知っておくべきこれらの方法の賛否両論？

javascriptjqueryajaxrest
232
Tauren

letronjeの解決法は非常に単純なページに対してのみ有効です。 document.body.innerHTML +=は本文のHTMLテキストを受け取り、iframe HTMLを追加し、ページのinnerHTMLをその文字列に設定します。これは、あなたのページが持っているイベントバインディングなどを消去します。要素を作成し、代わりにappendChildを使用してください。

$.post('/create_binary_file.php', postData, function(retData) {
  var iframe = document.createElement("iframe");
  iframe.setAttribute("src", retData.url);
  iframe.setAttribute("style", "display: none");
  document.body.appendChild(iframe);
});

あるいはjQueryを使う

$.post('/create_binary_file.php', postData, function(retData) {
  $("body").append("<iframe src='" + retData.url+ "' style='display: none;' ></iframe>");
});

これが実際に何をしているのか：変数postDataのデータを使って/create_binary_file.phpへの投稿を実行します。その投稿が正常に完了したら、ページの本文に新しいiframeを追加します。仮定は/create_binary_file.phpからの応答が生成されたPDF/XLS/etcファイルがそこからダウンロードされることができるURLである値 'url'を含むであろうということです。そのURLを参照するページにiframeを追加すると、Webサーバーに適切なMIMEタイプ設定があると仮定して、ブラウザがユーザーにファイルのダウンロードを促します。

166
SamStephens

ブロブを使用する別のオプションを試してきました。私はテキスト文書をダウンロードするためにそれを手に入れました、そして私はPDFをダウンロードしました（しかしそれらは壊れています）。

BLOB APIを使用すると、次のことが可能になります。

$.post(/*...*/,function (result)
{
    var blob=new Blob([result]);
    var link=document.createElement('a');
    link.href=window.URL.createObjectURL(blob);
    link.download="myFileName.txt";
    link.click();

});

これはIE 10+、Chrome 8+、FF 4+です。 https://developer.mozilla.org/en-US/docs/Web/API/URL.createObjectURL を参照してください。

Chrome、Firefox、およびOperaでのみファイルがダウンロードされます。これは、アンカータグのdownload属性を使用してブラウザにダウンロード属性を強制的にダウンロードさせます。

36
JoshBerke

私はこの種の古いものを知っています、しかし私は私がもっとエレガントな解決策を思いついたと思います。私はまったく同じ問題を抱えていました。私が提案した解決策に関して抱えていた問題は、すべてのファイルがサーバーに保存されることを必要とすることでしたが、私は他の問題を導入した認証されていないユーザー、クリーンアップ：どのようにしていつファイルを削除しますか。あなたのように、私のデータは複雑で入れ子になったJSONオブジェクトであり、フォームに入れるのは難しいでしょう。

私がしたことは2つのサーバー機能を作成することでした。最初のデータを検証しました。エラーがあった場合は返されます。それがエラーではなかった場合、私はbase64文字列としてシリアル化/エンコードされたすべてのパラメータを返しました。それから、クライアントでは、隠し入力が1つだけあり、2番目のサーバー関数に投稿するフォームがあります。隠し入力をbase64文字列に設定し、フォーマットを送信します。 2番目のサーバー関数は、パラメーターをデコード/逆シリアル化してファイルを生成します。フォームはページ上の新しいウィンドウまたはiframeに送信することができ、ファイルが開きます。

もう少し作業が増えて、おそらくもう少し処理が増えていますが、全体的に見て、私はこのソリューションの方がずっと気分が良いと感じました。

コードはC＃/ MVCにあります

    public JsonResult Validate(int reportId, string format, ReportParamModel[] parameters)
    {
        // TODO: do validation

        if (valid)
        {
            GenerateParams generateParams = new GenerateParams(reportId, format, parameters);

            string data = new EntityBase64Converter<GenerateParams>().ToBase64(generateParams);

            return Json(new { State = "Success", Data = data });
        }

        return Json(new { State = "Error", Data = "Error message" });
    }

    public ActionResult Generate(string data)
    {
        GenerateParams generateParams = new EntityBase64Converter<GenerateParams>().ToEntity(data);

        // TODO: Generate file

        return File(bytes, mimeType);
    }

クライアント上

    function generate(reportId, format, parameters)
    {
        var data = {
            reportId: reportId,
            format: format,
            params: params
        };

        $.ajax(
        {
            url: "/Validate",
            type: 'POST',
            data: JSON.stringify(data),
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            success: generateComplete
        });
    }

    function generateComplete(result)
    {
        if (result.State == "Success")
        {
            // this could/should already be set in the HTML
            formGenerate.action = "/Generate";
            formGenerate.target = iframeFile;

            hidData = result.Data;
            formGenerate.submit();
        }
        else
            // TODO: display error messages
    }
15
amersk

もっと簡単な方法は、フォームを作成して投稿することです。これは、戻りのMIMEタイプがブラウザで開くようなものであれば、ページをリセットする危険性がありますが、csvなどでは完璧です。

例にはアンダースコアとjqueryが必要です

var postData = {
    filename:filename,
    filecontent:filecontent
};
var fakeFormHtmlFragment = "<form style='display: none;' method='POST' action='"+SAVEAS_PHP_MODE_URL+"'>";
_.each(postData, function(postValue, postKey){
    var escapedKey = postKey.replace("\\", "\\\\").replace("'", "\'");
    var escapedValue = postValue.replace("\\", "\\\\").replace("'", "\'");
    fakeFormHtmlFragment += "<input type='hidden' name='"+escapedKey+"' value='"+escapedValue+"'>";
});
fakeFormHtmlFragment += "</form>";
$fakeFormDom = $(fakeFormHtmlFragment);
$("body").append($fakeFormDom);
$fakeFormDom.submit();

HTML、テキストなどの場合は、MIMEタイプがapplication/octet-streamのようなものであることを確認してください。

pHPコード

<?php
/**
 * get HTTP POST variable which is a string ?foo=bar
 * @param string $param
 * @param bool $required
 * @return string
 */
function getHTTPPostString ($param, $required = false) {
    if(!isset($_POST[$param])) {
        if($required) {
            echo "required POST param '$param' missing";
            exit 1;
        } else {
            return "";
        }
    }
    return trim($_POST[$param]);
}

$filename = getHTTPPostString("filename", true);
$filecontent = getHTTPPostString("filecontent", true);

header("Content-type: application/octet-stream");
header("Content-Disposition: attachment; filename=\"$filename\"");
echo $filecontent;
9
aqm

要するに、もっと簡単な方法はありません。 PDF fileを表示するには、サーバーに別の要求を出す必要があります。しかし、代替案はほとんどありませんが、完全ではなく、すべてのブラウザで機能するわけではありません。

  1. データURIスキーム を見てください。バイナリデータが小さい場合は、おそらくJavaScriptを使用してURIでデータを渡すウィンドウを開くことができます。
  2. Windows/IEのみの解決策は、データをローカルファイルシステムに保存してそこから開くための.NETコントロールまたはFileSystemObjectを持つことです。
8
VinayC

この質問がされてからしばらく経ちましたが、私は同じ課題を抱えており、自分の解決策を共有したいと思います。それは他の答えからの要素を使用しますが、私は全体としてそれを見つけることができませんでした。フォームやiframeは使用しませんが、post/getリクエストのペアが必要です。リクエスト間でファイルを保存する代わりに、投稿データを保存します。シンプルで効果的なようです。

クライアント

var apples = new Array(); 
// construct data - replace with your own
$.ajax({
   type: "POST",
   url: '/Home/Download',
   data: JSON.stringify(apples),
   contentType: "application/json",
   dataType: "text",

   success: function (data) {
      var url = '/Home/Download?id=' + data;
      window.location = url;
   });
});

サーバ

[HttpPost]
// called first
public ActionResult Download(Apple[] apples)
{
   string json = new JavaScriptSerializer().Serialize(apples);
   string id = Guid.NewGuid().ToString();
   string path = Server.MapPath(string.Format("~/temp/{0}.json", id));
   System.IO.File.WriteAllText(path, json);

   return Content(id);
}

// called next
public ActionResult Download(string id)
{
   string path = Server.MapPath(string.Format("~/temp/{0}.json", id));
   string json = System.IO.File.ReadAllText(path);
   System.IO.File.Delete(path);
   Apple[] apples = new JavaScriptSerializer().Deserialize<Apple[]>(json);

   // work with apples to build your file in memory
   byte[] file = createPdf(apples); 

   Response.AddHeader("Content-Disposition", "attachment; filename=juicy.pdf");
   return File(file, "application/pdf");
}
7
Frank Rem
$scope.downloadSearchAsCSV = function(httpOptions) {
  var httpOptions = _.extend({
    method: 'POST',
    url:    '',
    data:   null
  }, httpOptions);
  $http(httpOptions).then(function(response) {
    if( response.status >= 400 ) {
      alert(response.status + " - Server Error \nUnable to download CSV from POST\n" + JSON.stringify(httpOptions.data));
    } else {
      $scope.downloadResponseAsCSVFile(response)
    }
  })
};
/**
 * @source: https://github.com/asafdav/ng-csv/blob/master/src/ng-csv/directives/ng-csv.js
 * @param response
 */
$scope.downloadResponseAsCSVFile = function(response) {
  var charset = "utf-8";
  var filename = "search_results.csv";
  var blob = new Blob([response.data], {
    type: "text/csv;charset="+ charset + ";"
  });

  if (window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveBlob(blob, filename); // @untested
  } else {
    var downloadContainer = angular.element('<div data-tap-disabled="true"><a></a></div>');
    var downloadLink      = angular.element(downloadContainer.children()[0]);
    downloadLink.attr('href', window.URL.createObjectURL(blob));
    downloadLink.attr('download', "search_results.csv");
    downloadLink.attr('target', '_blank');

    $document.find('body').append(downloadContainer);

    $timeout(function() {
      downloadLink[0].click();
      downloadLink.remove();
    }, null);
  }

  //// Gets blocked by Chrome popup-blocker
  //var csv_window = window.open("","","");
  //csv_window.document.write('<meta name="content-type" content="text/csv">');
  //csv_window.document.write('<meta name="content-disposition" content="attachment;  filename=data.csv">  ');
  //csv_window.document.write(response.data);
};
6
James McGuigan

元の投稿に対する完全な回答ではありませんが、jsonオブジェクトをサーバーに投稿してダウンロードを動的に生成するための迅速で汚い解決策です。

クライアントサイドのjQuery：

var download = function(resource, payload) {
     $("#downloadFormPoster").remove();
     $("<div id='downloadFormPoster' style='display: none;'><iframe name='downloadFormPosterIframe'></iframe></div>").appendTo('body');
     $("<form action='" + resource + "' target='downloadFormPosterIframe' method='post'>" +
      "<input type='hidden' name='jsonstring' value='" + JSON.stringify(payload) + "'/>" +
      "</form>")
      .appendTo("#downloadFormPoster")
      .submit();
}

..そして、サーバサイドでjson-stringをデコードし、ダウンロード用のヘッダを設定します（PHPの例）。

$request = json_decode($_POST['jsonstring']), true);
header('Content-Type: application/csv');
header('Content-Disposition: attachment; filename=export.csv');
header('Pragma: no-cache');
3
ralftar

私は最善のアプローチは組み合わせを使用することだと思います。あなたの2番目のアプローチはブラウザが関与しているところで優雅な解決策のようです。

電話のかけ方によって異なります。 （ブラウザであろうとウェブサービス呼び出しであろうと）あなたはブラウザにURLを送ることと他のウェブサービスクライアントに生データを送ることで、2つの組み合わせを使うことができます。

2
naikus

私は今、2日間起きてajax呼び出しでjqueryを使ってファイルをダウンロードする方法を見つけようとしています。私が得たすべてのサポートは私がこれを試みるまで私の状況を助けることができなかった。

クライアントサイド

function exportStaffCSV(t) {
   
    var postData = { checkOne: t };
    $.ajax({
        type: "POST",
        url: "/Admin/Staff/exportStaffAsCSV",
        data: postData,
        success: function (data) {
            SuccessMessage("file download will start in few second..");
            var url = '/Admin/Staff/DownloadCSV?data=' + data;
            window.location = url;
        },
       
        traditional: true,
        error: function (xhr, status, p3, p4) {
            var err = "Error " + " " + status + " " + p3 + " " + p4;
            if (xhr.responseText && xhr.responseText[0] == "{")
                err = JSON.parse(xhr.responseText).Message;
            ErrorMessage(err);
        }
    });

}

サーバーサイド

 [HttpPost]
    public string exportStaffAsCSV(IEnumerable<string> checkOne)
    {
        StringWriter sw = new StringWriter();
        try
        {
            var data = _db.staffInfoes.Where(t => checkOne.Contains(t.staffID)).ToList();
            sw.WriteLine("\"First Name\",\"Last Name\",\"Other Name\",\"Phone Number\",\"Email Address\",\"Contact Address\",\"Date of Joining\"");
            foreach (var item in data)
            {
                sw.WriteLine(string.Format("\"{0}\",\"{1}\",\"{2}\",\"{3}\",\"{4}\",\"{5}\",\"{6}\"",
                    item.firstName,
                    item.lastName,
                    item.otherName,
                    item.phone,
                    item.email,
                    item.contact_Address,
                    item.doj
                    ));
            }
        }
        catch (Exception e)
        {

        }
        return sw.ToString();

    }

    //On ajax success request, it will be redirected to this method as a Get verb request with the returned date(string)
    public FileContentResult DownloadCSV(string data)
    {
        return File(new System.Text.UTF8Encoding().GetBytes(data), System.Net.Mime.MediaTypeNames.Application.Octet, filename);
        //this method will now return the file for download or open.
    }

がんばろう。

1
Otis-iDev

HTML5では、アンカーを作成してそれをクリックするだけです。それを子として文書に追加する必要はありません。

const a = document.createElement('a');
a.download = '';
a.href = urlForPdfFile;
a.click();

全部できた。

ダウンロードに特別な名前を付けたい場合は、それをdownload属性に渡してください。

const a = document.createElement('a');
a.download = 'my-special-name.pdf';
a.href = urlForPdfFile;
a.click();
1
rewritten

ファイルをサーバーに保存して取得する代わりに、もう1つの方法として、.NET 4.0以降のObjectCacheを有効期限の短い2回目のActionまで使用する方法があります。この呼び出しにJQuery Ajaxを使用したいのは、非同期だからです。動的なPDFファイルを作成するにはかなりの時間がかかります。その間、忙しいスピナーダイアログを表示します（他の作業も可能です）。 "success："で返されたデータを使ってBlobを作成するというアプローチは、確実には機能しません。 PDFファイルの内容によって異なります。 Ajaxで処理できるのは、テキスト全体ではない場合、応答内のデータによって簡単に破損します。

0
Wray Smallwood

ずっと前にそれを見つけて、それは完全に動作します！

let payload = {
  key: "val",
  key2: "val2"
};

let url = "path/to/api.php";
let form = $('<form>', {'method': 'POST', 'action': url}).hide();
$.each(payload, (k, v) => form.append($('<input>', {'type': 'hidden', 'name': k, 'value': v})) );
$('body').append(form);
form.submit();
form.remove();
0
Den Nikitin