Angular 使用文件名触发对 api 响应的下载答案

【问题标题】：Angular trigger a download on api response with filenameAngular 使用文件名触发对 api 响应的下载
【发布时间】：2014-11-29 07:20:33
【问题描述】：

我正在使用 angular 和 laravel。在 post 请求中，PHP 创建一个文件并以文件名作为响应。如何使用该文件名并从 Angular 触发下载。

api 请求

    var promise = $http.post('api/admin/ecs/singleecs', data).
        success(function (response) {
             //trigger file download
    })

php

PDF::loadHTML($html)->setPaper('a4')->setWarnings(false)->save('public/temp/'.$filename.'.pdf');
return $filename;

【问题讨论】：

标签： javascript php angularjs

【解决方案1】：

为了解决这个问题，我会采取以下步骤：

在页面上创建一个隐藏的元素。

<a id="fileDownloadLink" ng-hide="true" ng-href={downloadUrl} />

使用以下代码设置下载地址并触发下载。

$scope.downloadUrl = response.data.fileName;

var fileDownloadLink = document.getElementById("fileDownloadLink");
fileDownloadLink.target = "_blank"; // Opens the file in a new window.
fileDownloadLink.click();

【讨论】：

你的代码很有帮助，我需要修改它。现在我得到了 url /home/abel/pro/public/sample.zip 但如果我点击它转到http://localhost:8000/home/abel/pro/public/sample.zip 如何删除 localhost:8000 它已为 laravel php 提供服务
你能告诉我你的响应对象返回了什么吗？
我正在返回创建文件的路径
这不会被大多数浏览器作为弹出窗口阻止吗？

【解决方案2】：

您可以使用$window.location 触发下载。仅当“Content-Disposition: attachment”位于 resource_url 的响应标头中时，这才有效：

var promise = $http.post('api/admin/ecs/singleecs', data)
                   .then(function (response) {
                     $window.location = response.resource_url;
                   });

注意：这是此处说明的 jQuery 模式的 Angular 版本：https://stackoverflow.com/a/11620720/271178

【讨论】：