8

ロード画面を表示するためにAngular jsを使用しています。ファイルをダウンロードするための REST サービスを除くすべての REST サービス呼び出しで機能します。ダウンロードのために $resource; を使用してサービス呼び出しを行っていないため、機能しない理由を理解しています。その代わりに、ファイルをダウンロードするために通常のアプローチを使用しているため、Angular js コードはサービス リクエストの開始/終了を制御できません。$resource を使用してこの REST サービスにアクセスしようとしましたが、このサービスからデータを取得しています。この場合、読み込み画面は正常に機能していましたが、このデータを使用してユーザーに表示し、角度を付けてダウンロードする方法がわかりません。以下は必須の詳細です。助けてください。

iframe アプローチを使用したアプローチ 1: 

 /*Download file */
            scope.downloadFile = function (fileId) {
                //Show loading screen. (Somehow it is not working)
                scope.loadingProjectFiles=true;
                var fileDownloadURL = "/api/files/" + fileId + "/download";
                downloadURL(fileDownloadURL);
              //Hide loading screen
                scope.loadingProjectFiles=false;
            };

            var $idown;  // Keep it outside of the function, so it's initialized once.
            var downloadURL = function (url) {
                if ($idown) {
                    $idown.attr('src', url);
                } else {
                    $idown = $('<iframe>', { id: 'idown', src: url }).hide().appendTo('body');
                }
            };

$resource を使用したアプローチ 2 (データを画面に表示してダウンロードする方法がわからない)

/*Download file */
            scope.downloadFile = function (fileId) {
                //Show loading screen (Here loading screen works).  
                scope.loadingProjectFiles=true;                 
                  //File download object
                    var fileDownloadObj = new DownloadFile();
                 //Make server call to create new File
                    fileDownloadObj.$get({ fileid: fileid }, function (response) {
                        //Q? How to use the response data to display on UI as download popup
                        //Hide loading screen
                        scope.loadingProjectFiles=false;
                    });

            };
4

2 に答える 2

1

これは $resource サービスの正しいパターンです。

scope.downloadFile = function (fileId) {
    //Show loading screen (Here loading screen works).  
    scope.loadingProjectFiles=true;                 
    var FileResource = $resource('/api/files/:idParam', {idParam:'@id'});
    //Make server call to retrieve a file
    var yourFile = FileResource.$get({ id: fileId }, function () {
        //Now (inside this callback) the response data is loaded inside the yourFile variable
        //I know it's an ugly pattern but that's what $resource is about...
        DoSomethingWithYourFile(yourFile);
        //Hide loading screen
        scope.loadingProjectFiles=false;
    });
 };

これは奇妙なパターンであり、ダウンロードされたデータがコールバック関数のパラメーターに割り当てられる他の A​​PI とは異なるため、混乱することに同意します。

パラメーターの名前とケースに注意してください。ここには 2 つのマッピングが含まれていることがわかります。1 つは $resource オブジェクトの呼び出し元とオブジェクト自体の間、もう 1 つはこのオブジェクトとダウンロード用に作成する URL の間です。実際のデータ。

于 2015-11-16T08:33:18.813 に答える
0

2 番目のアプローチのアイデアを次に示します。ダウンロード後にユーザーにリンクを提示できます。

  • 「データURL」付き。おそらく大きなファイルには適していません。
  • 「filesystem:mydownload.zip」のような URL の場合、最初にファイルシステム API を使用してファイルを保存する必要があります。html5rocksでインスピレーションを得ることができます
于 2013-11-27T13:36:34.153 に答える