非公式投稿にjsonデータを含める

Question

私は、ユーザーにデータを表示するJavaScriptピボットテーブルを持っています。ユーザーは列/行などを選択できます。Excelのボタンにエクスポートを追加しました。これはピボットテーブルの現在のデータ/ビュー（jsonデータ）でajaxポストを実行します。それは私のサーバーにそれをExcelファイルに変換するデータをポストします。

ファイルを作成すると問題はありませんが、問題はファイルをユーザーに取得していることです。私が読んだところでは、ajax投稿の後にユーザーにファイルを送ることはできません。

プレーンなHTMLポストを使用してもうれしいです（実際には、ユーザーをファイルにリダイレクトすることができるので、私が望むものです）が、ピボットテーブルのデータをフォームではないので投稿してください。

私はファイルをローカルに保存してURLを送り返すことができますが、これは事を複雑にし、私はそれを避けたいと思います。

ファイルをローカルに保存せずに、ファイルがある場所にURLを送信することなく、これを行うことはできますか？

Answer 1

ブラウザは（まだ）フォームのJSONシリアル化をサポートしていないため、純粋なフォームを使用してJSONをバックエンドに送信することは実際には不可能です。

1）簡単な解決策は、JavaScriptで目に見えないフォームを生成名前jsonの隠し入力を作成して送信するためにJSONコンテンツを移入するために、次のようになります。

は、私は、サーバー上のファイルを保存する必要はありません2つのソリューションを持っていますサーバーに送信します。サーバー側では、フォームデータを読み込み、データに格納されているJSONを解析します。次に、ファイルを生成し、そのファイルを応答として送信します。ブラウザがダウンロードダイアログを表示します。

var form = document.createElement('form'); 
form.method = 'post'; 
form.action = 'url'; 
var input = document.createElement('input'); 
input.type = 'hidden'; 
textarea.name = 'json'; 
textarea.value = JSON.stringify(your_json); 
form.appendChild(input); 
document.body.appendChild(form); 
form.submit(); 
form.parentNode.removeChild(form); 

2）2番目のオプションは、サーバーにデータを送信するためにajaxを使用します。しかし、ブラウザはいくつかのAPIをサポートする必要があります。

あなたはいつものようにJSONリクエストを行い、サーバはヘッダContent-Type: here-the-MIME-type-of-your-fileとレスポンス本文のファイル内容で応答する必要があります。

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

var json = JSON.stringify({here: ['your', 'json', 'to', 'send', 'to', 'server']}); 
var xhr = new XMLHttpRequest(); 
xhr.open('POST', '/your/api/url', true); 
xhr.setRequestHeader('Content-type', 'application/json'); 
xhr.responseType = 'arraybuffer'; 
xhr.addEventListener('load', function() { 
    var blob = new Blob([this.response], { // reading response, not responseText 
    type: this.getResponseHeader('Content-Type') 
    }); 

    var url = URL.createObjectURL(blob); 
    var a = document.createElement('a'); 
    a.href = url; 
    a.download = 'file_name.txt'; // set proper extension 
    document.body.appendChild(a); // it needs to be added to the document in order to work 
    a.click(); 
    a.parentNode.removeChild(a); 
}); 

xhr.send(json); 

また、作成したURLオブジェクトは、そうでない場合は、ページをリロードするまで存在しますが、ある時点で取り消されるべきです。しかし、私は彼らがファイルをダウンロードする前に取り消すことはできないと思う。だから、上記のコードではまだ1つのタスクがあります。