web-dev-qa-db-ja.com

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

更新20140702：

（ただし、他の回答の1つを自分の代わりに受け入れられたものとしてマークします。

HTTPリクエストヘッダーの設定は、<a href="...">を使用したリンクでは不可能であり、XMLHttpRequestを使用してのみ設定できるようです。

ただし、リンク先のURLはダウンロードする必要があるファイルです（ブラウザーはそのURLに移動しないでください）。これがAJAXを使用して実行できるかどうかはわかりません。

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

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

編集：リンク切れを修正

javascriptajaxhttp-headersdownload
51
bguiz

試してみる

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/

13
guest271314

2つの方法があり、ファイルをダウンロードしますヘッダーを設定します。

最初のクレジットは@ guest271314に、2番目のクレジットは@dandavisに割り当てられます。

最初の方法は、HTML5ファイルAPIを使用して一時的なローカルファイルを作成することであり、2つ目は、base64エンコードをデータURIと組み合わせて使用​​することです。

私のプロジェクトで使用したソリューションは、小さなファイルに対してbase64エンコードアプローチを使用します。FileAPIが使用できない場合は、File APIアプローチを使用します。

解決：

        var id = 123;

        var req = ic.ajax.raw({
            type: 'GET',
            url: '/api/dowloads/'+id,
            beforeSend: function (request) {
                request.setRequestHeader('token', 'token for '+id);
            },
            processData: false
        });

        var maxSizeForBase64 = 1048576; //1024 * 1024

        req.then(
            function resolve(result) {
                var str = result.response;

                var anchor = $('.vcard-hyperlink');
                var windowUrl = window.URL || window.webkitURL;
                if (str.length > maxSizeForBase64 && typeof windowUrl.createObjectURL === 'function') {
                    var blob = new Blob([result.response], { type: 'text/bin' });
                    var url = windowUrl.createObjectURL(blob);
                    anchor.prop('href', url);
                    anchor.prop('download', id+'.bin');
                    anchor.get(0).click();
                    windowUrl.revokeObjectURL(url);
                }
                else {
                    //use base64 encoding when less than set limit or file API is not available
                    anchor.attr({
                        href: 'data:text/plain;base64,'+FormatUtils.utf8toBase64(result.response),
                        download: id+'.bin',
                    });
                    anchor.get(0).click();
                }

            }.bind(this),
            function reject(err) {
                console.log(err);
            }
        );

生のXMLHttpRequestを使用しておらず、代わりに ic-ajax を使用しており、jQuery.ajaxソリューションと非常によく似ていることに注意してください。

また、text/binと.binを、ダウンロードするファイルの種類に対応するものに置き換えてください。

FormatUtils.utf8toBase64の実装 ここにあります

45
bguiz

別のオプションを追加しています。上記の回答は私にとって非常に有用でしたが、ic-ajaxの代わりにjQueryを使用したかった（bowerを介してインストールしようとしたときにEmberと依存関係があるようです）。このソリューションは最新のブラウザでのみ機能することに注意してください。

これをjQueryに実装するために、 jQuery BinaryTransport を使用しました。これは、バイナリ形式でAJAX応答を読み取るための素晴らしいプラグインです。

次に、これを実行してファイルをダウンロードし、ヘッダーを送信します。

$.ajax({
    url: url,
    type: 'GET',
    dataType: 'binary',
    headers: headers,
    processData: false,
    success: function(blob) {
        var windowUrl = window.URL || window.webkitURL;
        var url = windowUrl.createObjectURL(blob);
        anchor.prop('href', url);
        anchor.prop('download', fileName);
        anchor.get(0).click();
        windowUrl.revokeObjectURL(url);
    }
});

上記のスクリプトの変数の意味は次のとおりです。

  • url：ファイルのURL
  • headers：送信するヘッダーを持つJavascriptオブジェクト
  • fileName：ファイルのダウンロード時にユーザーに表示されるファイル名
  • アンカー：この場合、jQueryでラップする必要があるダウンロードをシミュレートするために必要なDOM要素です。たとえば、$('a.download-link')。
12
dgaviola

私はAngularJS、ASP.NET MVCで行われたソリューションをここに投稿したいと思います。このコードは、認証を使用してファイルをダウンロードする方法を示しています。

WebApiメソッドとヘルパークラス：

[RoutePrefix("filess")]
class FileController: ApiController
{
    [HttpGet]
    [Route("download-file")]
    [Authorize(Roles = "admin")]
    public HttpResponseMessage DownloadDocument([FromUri] int fileId)
    {
        var file = "someFile.docx"// asking storage service to get file path with id
        return Request.ReturnFile(file);
    }
}

static class DownloadFIleFromServerHelper
{
    public static HttpResponseMessage ReturnFile(this HttpRequestMessage request, string file)
    {
        var result = request.CreateResponse(HttpStatusCode.OK);

        result.Content = new StreamContent(new FileStream(file, FileMode.Open, FileAccess.Read));
        result.Content.Headers.Add("x-filename", Path.GetFileName(file)); // letters of header names will be lowercased anyway in JS.
        result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
        result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
        {
            FileName = Path.GetFileName(file)
        };

        return result;
    }
}

Web.configファイルが変更され、カスタムヘッダーでファイル名を送信できるようになりました。

<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Methods" value="POST,GET,PUT,PATCH,DELETE,OPTIONS" />
                <add name="Access-Control-Allow-Headers" value="Authorization,Content-Type,x-filename" />
                <add name="Access-Control-Expose-Headers" value="Authorization,Content-Type,x-filename" />
                <add name="Access-Control-Allow-Origin" value="*" />

Angular JSサービスパーツ：

function proposalService($http, $cookies, config, FileSaver) {
        return {
                downloadDocument: downloadDocument
        };

    function downloadFile(documentId, errorCallback) {
    $http({
        url: config.apiUrl + "files/download-file?documentId=" + documentId,
        method: "GET",
        headers: {
            "Content-type": "application/json; charset=utf-8",
            "Authorization": "Bearer " + $cookies.get("api_key")
        },
        responseType: "arraybuffer"  
        })
    .success( function(data, status, headers) {
        var filename = headers()['x-filename'];

        var blob = new Blob([data], { type: "application/octet-binary" });
        FileSaver.saveAs(blob, filename);
    })
    .error(function(data, status) {
        console.log("Request failed with status: " + status);
        errorCallback(data, status);
    });
};
};

FileUploadのモジュール依存関係：angle-file-download（gulp install angular-file-download --save）。登録は以下のようになります。

var app = angular.module('cool',
[
    ...
    require('angular-file-saver'),
])
. // other staff.
6
Siarhei Kuchuk

純粋なjQuery。

$.ajax({
  type: "GET",
  url: "https://example.com/file",
  headers: {
    'Authorization': 'Bearer eyJraWQiFUDA.......TZxX1MGDGyg'
  },
  xhrFields: {
    responseType: 'blob'
  },
  success: function (blob) {
    var windowUrl = window.URL || window.webkitURL;
    var url = windowUrl.createObjectURL(blob);
    var anchor = document.createElement('a');
    anchor.href = url;
    anchor.download = 'filename.Zip';
    anchor.click();
    anchor.parentNode.removeChild(anchor);
    windowUrl.revokeObjectURL(url);
  },
  error: function (error) {
    console.log(error);
  }
});
0
Eugene Maysyuk