如何用JavaScript（AngularJS）下载API返回URL对应的文件？

我来给你捋捋在AngularJS里实现这个文件下载需求的几个靠谱办法，亲测好用的那种～

方案一：利用隐藏标签直接触发下载（同源场景优先用） #

这个方法简单粗暴，不需要额外依赖，核心就是动态创建带download属性的<a>标签，模拟点击后再清理掉它——完美解决浏览器直接预览PDF/Excel等文件而不下载的问题。

具体实现代码 #

在你的AngularJS控制器里可以这么写：

angular.module('yourApp').controller('FileDownloadCtrl', function($scope, $http) {
    $scope.downloadFile = function() {
        // 调用API获取文件URL
        $http.get('/api/get-file-url')
            .then(function(response) {
                const fileUrl = response.data;
                // 创建隐藏的a标签
                const link = document.createElement('a');
                link.style.display = 'none';
                link.href = fileUrl;
                // 从URL里提取文件名，也可以自定义文件名
                const fileName = fileUrl.split('/').pop();
                link.download = fileName;
                // 添加到DOM并模拟点击
                document.body.appendChild(link);
                link.click();
                // 清理DOM元素
                document.body.removeChild(link);
            })
            .catch(function(error) {
                console.error('获取文件URL失败:', error);
            });
    };
});

然后在HTML里绑定按钮点击事件：

<button ng-click="downloadFile()">下载文件</button>

注意：如果你的文件URL是跨域的，浏览器可能会忽略download属性，直接打开预览而不是下载。这时候就需要用下面的方案二。

方案二：通过Blob对象下载（跨域场景适用） #

跨域的时候，我们可以先通过$http获取文件的二进制数据，转换成Blob对象，再创建临时URL触发下载。这种方式需要后端配合允许跨域请求（比如设置CORS头），并且请求要指定responseType: 'blob'。

具体实现代码 #

angular.module('yourApp').controller('FileDownloadCtrl', function($scope, $http, $window) {
    $scope.downloadFile = function() {
        $http.get('/api/get-file-url')
            .then(function(urlResponse) {
                const fileUrl = urlResponse.data;
                // 再次请求文件二进制数据
                return $http.get(fileUrl, { responseType: 'blob' });
            })
            .then(function(fileResponse) {
                const blob = fileResponse.data;
                // 创建Blob临时URL
                const blobUrl = $window.URL.createObjectURL(blob);
                // 同样创建a标签触发下载
                const link = document.createElement('a');
                link.style.display = 'none';
                link.href = blobUrl;
                // 提取文件名，也可以从后端响应头的Content-Disposition里获取更准确的名称
                const fileName = fileUrl.split('/').pop();
                link.download = fileName;
                document.body.appendChild(link);
                link.click();
                // 清理临时URL和DOM元素，避免内存泄漏
                $window.URL.revokeObjectURL(blobUrl);
                document.body.removeChild(link);
            })
            .catch(function(error) {
                console.error('下载失败:', error);
            });
    };
});

小技巧：如果后端返回文件时设置了Content-Disposition响应头（比如Content-Disposition: attachment; filename="dailystock.pdf"），你可以从fileResponse.headers()里提取这个头信息来获取准确的文件名，比从URL里提取更可靠。

额外注意事项 #

• 确保后端API返回的文件URL是有效的，并且当前用户有足够的访问权限。
• 对于超大文件，方案二可能会占用较多内存，这时候可以考虑让后端直接返回文件流，而不是先返回URL，这样能优化性能。
• 现代主流浏览器（Chrome、Firefox、Edge）都支持上述方案，兼容性不用担心。

内容的提问来源于stack exchange，提问作者Mithun Pattankar