使用动态创建的链接在AngularJS中下载文件

Use dynamically created link to download file in AngularJS

本文关键字：AngularJS 下载 文件 链接 动态 创建      更新时间：2023-09-26

我正在使用ng-click调用一个函数，该函数向服务器发出post http请求，然后创建链接。如何使用此创建的链接下载附加到它的文件？

我的模板

<button ng-click="getFile(row)">Download</button>

我的控制器

$scope.getFile = function(row){
    row.isSelected = true;
    var link = null;
    var postData = {
        "data" : {
            "type": "member_report",
            "relationships": {
                "member" : {
                    "data": {
                        "type": "user",
                        "id": memberID
                    }
                }
            }
        }
    }
    ajaxRequest.ajaxPost('http://someApi.com', postData).then(
        function(jsonAPI) {
            link = jsonAPI.links.download; //here is the response link
            //todo something with it to download file   
        },
        function(errorResponse) {           
        }
    );
}

顺便说一下，ajaxRequest 只是一个简单的$http服务包装器。

如果我理解你，那么我想你想在动态获得链接后立即启动下载，然后你可以继续如下

$scope.getFile = function(row){
    row.isSelected = true;
    var link = null;
    var postData = {
        "data" : {
            "type": "member_report",
            "relationships": {
                "member" : {
                    "data": {
                        "type": "user",
                        "id": memberID
                    }
                }
            }
        }
    }
    ajaxRequest.ajaxPost('http://someApi.com', postData).then(
        function(jsonAPI) {
            link = jsonAPI.links.download;
            // Now we want to download the link 
           var downloadLink = document.createElement('a');
                downloadLink .href = link;
                // now set the visibility to hidden so that it doesnt effect the frontend layout
                downloadLink .style = 'visibility:hidden';
                downloadLink .download = 'file_name';
                // now append it to the document, generate click and remove the link
                document.body.appendChild(downloadLink );
                downloadLink .click();
                document.body.removeChild(downloadLink );
        },
        function(errorResponse) {           
        }
    );
}

尝试将链接保存在$scope中。然后，使用这个：

<a target="_self" href={{your variable}} download="foo.pdf">

另请查看文档：http://docs.angularjs.org/guide/

答案从这里取：

你如何使用AngularJS或Javascript提供文件下载？

我设法使用$window服务做到了这一点。 

ajaxRequest.ajaxPost('http://someApi.com', postData).then(
    function(jsonAPI) {
        link = jsonAPI.links.download;
        $window.location.href = link;
    },
    function(errorResponse) {           
    }
);

只需要添加$window作为依赖项

相关文章：