如何在AngularJS中實現文件下載的進度跟蹤

在AngularJS中實現文件下載的進度跟蹤，可以通過以下步驟來完成：

1. 創建一個服務來處理文件下載： 首先，你需要創建一個服務來處理文件下載的邏輯。這個服務將負責發送HTTP請求以獲取文件，并能夠跟蹤下載進度。

2. 使用$http服務發送文件下載請求： 在你的服務中，使用AngularJS的$http服務來發送文件下載請求。你可以設置一個監聽器來跟蹤請求的進度事件。

3. 監聽HTTP請求的進度事件： $http服務提供了一些事件，如onUploadProgress和onDownloadProgress，可以用來監聽上傳和下載的進度。你可以通過這些事件來更新一個進度條或顯示下載進度。

4. 在控制器中注入服務并綁定進度跟蹤： 在你的AngularJS應用中，創建一個控制器來管理用戶界面。在這個控制器中，注入你創建的服務，并使用它來觸發文件下載并跟蹤進度。

5. 更新用戶界面以顯示下載進度： 當下載進度發生變化時，你需要更新你的用戶界面來反映當前的下載狀態。這可能包括更新一個進度條、顯示已下載的字節數或提供下載完成的提示。

下面是一個簡單的示例代碼，展示了如何在AngularJS中實現文件下載的進度跟蹤：

// 文件下載服務
app.service('FileDownloadService', ['$http', function($http) {
    this.downloadFile = function(url, progressCallback) {
        var req = $http({
            method: 'GET',
            url: url,
            responseType: 'blob', // 獲取二進制文件
            onUploadProgress: function(event) {
                if (event.lengthComputable) {
                    var percentComplete = Math.round((event.loaded / event.total) * 100);
                    progressCallback(percentComplete);
                }
            },
            onDownloadProgress: function(event) {
                if (event.lengthComputable) {
                    var percentComplete = Math.round((event.loaded / event.total) * 100);
                    progressCallback(percentComplete);
                }
            }
        });

        req.then(function(response) {
            // 文件下載成功后的處理
            var blob = new Blob([response.data], {type: 'application/octet-stream'});
            var url = window.URL.createObjectURL(blob);
            var a = document.createElement('a');
            a.href = url;
            a.download = 'downloaded_file.ext'; // 設置下載文件名
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
            document.body.removeChild(a);
        }, function(error) {
            // 文件下載失敗后的處理
            console.error('File download failed:', error);
        });
    };
}]);

// 控制器
app.controller('DownloadController', ['$scope', 'FileDownloadService', function($scope, FileDownloadService) {
    $scope.downloadProgress = 0;

    $scope.downloadFile = function() {
        FileDownloadService.downloadFile('path/to/your/file', function(progress) {
            $scope.$apply(function() {
                $scope.downloadProgress = progress;
            });
        });
    };
}]);

在這個示例中，FileDownloadService服務負責處理文件下載，并通過onDownloadProgress事件回調來更新下載進度。控制器DownloadController注入了這個服務，并在用戶點擊下載按鈕時觸發文件下載，同時更新頁面上顯示的下載進度。