78

HTML:

<a href="mysite.com/uploads/asd4a4d5a.pdf" download="foo.pdf">

実名がデータベースに保持されている間、アップロードは一意のファイル名を取得します。簡単なファイルダウンロードを実現したい。しかし、上記のコードは次の理由で / にリダイレクトします。

$routeProvider.otherwise({
    redirectTo: '/', 
    controller: MainController
});

で試しました

$scope.download = function(resource){
    window.open(resource);
}

しかし、これはファイルを新しいウィンドウで開くだけです。

任意のファイル タイプの実際のダウンロードを有効にする方法はありますか?

4

4 に答える 4

114

https://docs.angularjs.org/guide/$location#html-link-rewriting

次のような場合、リンクは書き換えられません。代わりに、ブラウザは元のリンクへのページ全体のリロードを実行します。

  • ターゲット要素を含むリンク 例:
    <a href="/ext/link?a=b" target="_self">link</a>

  • 別のドメインに移動する絶対リンク 例:
    <a href="http://angularjs.org/">link</a>

  • base が定義されている場合に別の base パスにつながる「/」で始まるリンク 例:
    <a href="/not-my-base/link">link</a>

したがって、あなたの場合、次のようなターゲット属性を追加する必要があります...

<a target="_self" href="example.com/uploads/asd4a4d5a.pdf" download="foo.pdf">
于 2013-05-21T13:40:13.120 に答える
32

また、認証が必要な API でも機能するソリューションを開発する必要がありました (この記事を参照してください) 。

AngularJS の使用方法を簡単に説明すると、次のようになります。

ステップ 1: 専用ディレクティブを作成する

// jQuery needed, uses Bootstrap classes, adjust the path of templateUrl
app.directive('pdfDownload', function() {
return {
    restrict: 'E',
    templateUrl: '/path/to/pdfDownload.tpl.html',
    scope: true,
    link: function(scope, element, attr) {
        var anchor = element.children()[0];

        // When the download starts, disable the link
        scope.$on('download-start', function() {
            $(anchor).attr('disabled', 'disabled');
        });

        // When the download finishes, attach the data to the link. Enable the link and change its appearance.
        scope.$on('downloaded', function(event, data) {
            $(anchor).attr({
                href: 'data:application/pdf;base64,' + data,
                download: attr.filename
            })
                .removeAttr('disabled')
                .text('Save')
                .removeClass('btn-primary')
                .addClass('btn-success');

            // Also overwrite the download pdf function to do nothing.
            scope.downloadPdf = function() {
            };
        });
    },
    controller: ['$scope', '$attrs', '$http', function($scope, $attrs, $http) {
        $scope.downloadPdf = function() {
            $scope.$emit('download-start');
            $http.get($attrs.url).then(function(response) {
                $scope.$emit('downloaded', response.data);
            });
        };
    }] 
});

ステップ 2: テンプレートを作成する

<a href="" class="btn btn-primary" ng-click="downloadPdf()">Download</a>

ステップ 3: 使用する

<pdf-download url="/some/path/to/a.pdf" filename="my-awesome-pdf"></pdf-download>

これにより、青いボタンがレンダリングされます。クリックすると、PDF がダウンロードされ (注意: バックエンドは Base64 エンコーディングで PDF を配信する必要があります!)、href に入れられます。ボタンが緑色に変わり、テキストがSaveに切り替わります。ユーザーがもう一度クリックすると、ファイルmy-awesome.pdfの標準のファイル ダウンロード ダイアログが表示されます。

この例では PDF ファイルを使用していますが、適切にエンコードされていれば、任意のバイナリ形式を提供できるようです。

于 2014-09-25T07:47:30.917 に答える