Question

我有Angular 2客户端从休息服务下载文件：

 downloadAPK(projectName: string): void {
    this.projectService.downloadAppFile(projectName).subscribe(blobContent => {
        var a = document.createElement("a");
        a.setAttribute('style', 'display:none;');
        document.body.appendChild(a);
        var url = window.URL.createObjectURL(blobContent);
        a.href = url;
        a.download = projectName + '.apk';
        a.click();
    });

}

客户端代码：

<div class="subTitleStatus">Ready 
    <a style="cursor:pointer" (click)="downloadAPK(project.name)"><i class="glyphicon glyphicon-download-alt"></i></a>
</div>

服务代码：

downloadAppFile(projectName: String): any {
    return this._http.get(this._productUrl + "/downloadAppFile/" + projectName,
        {responseType: ResponseContentType.Blob})
        .map(res => res.blob())
        .catch(this.handleError);
}

问题是，在客户端完成下载文件之前，用户没有任何迹象表明下载已开始。我正在谈论巨大的文件

当用户点击下载链接直到完成下载时，如何更改客户端代码以显示下载百分比？

由于

Answer 1

为什么不下载文件作为链接？

第一个解决方案（下载链接）：

您不需要通过服务下载，只需在新标签页中加载链接，浏览器就会下载它（如果您有正确的标题，如服务器的附件标题）

    <div class="subTitleStatus">Ready 
        <a style="cursor:pointer" [attr.href]="downloadAPK(project.name)" target="_blank">
            <i class="glyphicon glyphicon-download-alt"></i>
        </a>
    </div>

这个服务

    downloadAppFile(projectName: String): any {
        return this._productUrl + "/downloadAppFile/" + projectName;
    }

第二种解决方案（通过JavaScript）：你有另一个解决方案，但需要在服务器端进行一些更改请阅读How to get progress from XMLHttpRequest 更具体的角度2 Angular 2 HTTP Progress bar

第三种解决方案（通过Javascript - 不确定）：

downloadAppFile(projectName: String, start: ()=>void, stop: ()=>void): any {
    return this._http.get(this._productUrl + "/downloadAppFile/" + projectName,
        {responseType: ResponseContentType.Blob})
        .do(start)
        .map(res => res.blob())
        .finally(stop)
        .catch(this.handleError);
}

并在您的控制器中定义停止并启动

start可以是：

() => { this.showSpinner = true }

并停止：

() => { this.showSpinner = false }

所以最后的控制器是这样的：

downloadAPK(projectName: string): void {
    showSpinner = false;
    start = () => { this.showSpinner = true }
    stop = () => { this.showSpinner = false }
    this.projectService.downloadAppFile(projectName, this.start, this.stop).subscribe(blobContent => {
        var a = document.createElement("a");
        a.setAttribute('style', 'display:none;');
        document.body.appendChild(a);
        var url = window.URL.createObjectURL(blobContent);
        a.href = url;
        a.download = projectName + '.apk';
        a.click();
    });

}

并在视图中添加一个微调器并根据this.showSpinner变量

显示/隐藏它

如果您不从服务器发送文件大小，则无法确定下载的百分比

<强>更新

添加了第三个解决方案

第一个解决方案根据Angular2 set href in attribute directive

进行更新

在第一个解决方案中有一个类型，href更改为[attr.href]

Angular 2从休息服务下载文件

1 个答案: