1. ホーム
  2. javascript

HTTP GETリクエストのヘッダーを設定し、ファイルのダウンロードをトリガーする方法は?

2023-11-26 05:29:38

質問

更新 20140702:

(しかし、私は自分の答えではなく、他の答えの1つを受理されたとマークしています。 というのも、その答えの半分は私のものであり、その努力に報いるためです。)


HTTP リクエストヘッダを設定するには、リンクに <a href="..."> を使用することで、HTTP リクエストヘッダを設定することができます。 XMLHttpRequest .

しかし、リンク先のURLはダウンロードされるべきファイルであり(ブラウザはそのURLに移動してはいけません)、私はこれがAJAXを使用して行うことができるかどうかわからないです。

さらに、返されるファイルはバイナリ ファイルであり、AJAX はそのためのものではありません。

カスタム ヘッダーを追加した HTTP リクエストでファイルのダウンロードをトリガーするにはどうしたらよいでしょうか。

edit: 壊れたリンクを修正しました。

どのように解決するのですか?

試してみてください。

html

<!-- placeholder , 
    `click` download , `.remove()` options ,
     at js callback , following js 
-->
<a>download</a>

js

        $(document).ready(function () {
            $.ajax({
                // `url` 
                url: '/echo/json/',
                type: "POST",
                dataType: 'json',
                // `file`, data-uri, base64
                data: {
                    json: JSON.stringify({
                        "file": "data:text/plain;base64,YWJj"
                    })
                },
                // `custom header`
                headers: {
                    "x-custom-header": 123
                },
                beforeSend: function (jqxhr) {
                    console.log(this.headers);
                    alert("custom headers" + JSON.stringify(this.headers));
                },
                success: function (data) {
                    // `file download`
                    $("a")
                        .attr({
                        "href": data.file,
                        "download": "file.txt"
                    })
                        .html($("a").attr("download"))
                        .get(0).click();
                    console.log(JSON.parse(JSON.stringify(data)));
                },
                error: function (jqxhr, textStatus, errorThrown) {
                  console.log(textStatus, errorThrown)
                }
            });
        });

jsfiddle http://jsfiddle.net/guest271314/SJYy3/