0
  • フラスコで提供され、トークンベースの認証で保護されたファイルがあります。
  • angularアプリからダウンロードを提供したい
  • トークンはAngularセッションに保存され、各 $http.get または post のヘッダーに入れられます

しかし、フラスコパスへのリンクを配置しただけでは、角度のある $http.get() ではないため、トークンはリクエストヘッダーに追加されませんが、これを行うことはできません (右?)。

URLにトークンをクエリ文字列パラメーターとして渡したくありません。ユーザーにダウンロードを提供するにはどうすればよいですか? 最初に $http.get() で角度を付けてから、ファイルのダウンロードとしてトンネルを通過する必要がありますか?

ログイン後のトークン ストレージ:

$window.sessionStorage.token = results.response.user.authentication_token;

各 $http get または post に挿入されます。

config.headers['Authentication-Token'] = $window.sessionStorage.getItem('token');

フラスコ（フラスコセキュリティ付き）部分：

@app.route("/download", methods=['GET'])
@auth_token_required
def download():
    response = make_response(open('filename.ext').read())
    response.headers["Content-Disposition"] = "attachment; filename=download.ext"
    return response

これを解決するにはどうすればよいですか？

4

1 に答える 1

0

まず、$http.get() 経由でデータを取得します

次に、私が見つけた2つのアプローチがあります。

  1. href 属性内に base64 でエンコードされたデータとしてデータを挿入します。

  2. データを JavaScript BLOB として挿入し、blob リンクを href 属性に配置します。

最初の方法は、コメントで @Christian が推奨する記事で提案されました。私はそれを実装しました。以下のコードを見つけることができます。ただし、この方法では大きなファイル (この場合は csv ファイル) で Chrome がクラッシュします。明らかにこれはchrome の制限です。ですので、方法２をお勧めします。

方法 2

Angular (この場合の csv ファイルの場合、タイプを変更します: 'text/csv' 他のファイルに応じて:

$http.get('/downloadpath').
    success(function(downloadresult){
        fileData = new Blob([downloadresult], { type: 'text/csv' }); 
        fileUrl = URL.createObjectURL(fileData);
        $scope.download_href = fileUrl;
    });

HTML:

<a href="{{download_href}}" download="filename.ext">download</a>

フラスコ：

@app.route("/downloadpath", methods=['GET'])
@auth_token_required
def download():
    response = open('filename.ext','br').read()
    return response

最後に、方法 1 を次に示します。

方法 1

 $http.get('/downloadpath').
    success(function(downloadresult){
        $scope.download_href = downloadresult;
    });

そしてhtmlについても同じ：

<a href="{{download_href}}" download="filename.ext">download</a>

Flask (csv ファイルの例。別のファイルがある場合は「data:text/csv」を変更します):

@app.route("/downloadpath", methods=['GET'])
@auth_token_required
def download():
    encoded = base64.b64encode(open('export.csv','br').read())
    response = 'data:text/csv;base64,{}'.format(str(encoded, encoding='utf-8'))
    return response

両方の方法の角度要件

方法 2 の blob プロトコルと方法 1 のデータ プロトコルをホワイトリストに登録する必要があります。

var app = angular.module('myApp', []);

app.config( [
    '$compileProvider',
    function( $compileProvider )
    {   
        $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|data|blob):/);
    }
]);
于 2015-03-31T14:47:23.377 に答える