Question

我正在尝试从任何网址下载带有自定义名称的文件。

我在我的代码上尝试这个

downloadAttachment(attachment) {
    var a = document.createElement('a');
    a.href = attachment.url; //URL FOR DOWNLOADING
    a.download = 'CustomName.png';
    a.click();
}

从视图中<button (click)="downloadAttachment(attachment)"></button>

它正在下载文件，但仍然从网址中提取文件名。

如何为文件添加自定义名称？

Answer 1

使用 http.get：

下载文件

    let queryApi = someApi
    this.http.get(queryApi, { responseType: 'blob', observe: 'response' })
        .subscribe(respone => {

            // file-type
            let fileName = 'custom-file-name.fileExt';             

            var link = document.createElement('a');
            link.href = window.URL.createObjectURL(respone.body);
            link.download = fileName;
            link.click();
        });

Answer 2

如果HTTP标头Content-Disposition：存在并给出了与此属性不同的文件名，HTTP标头具有优先级超过这个属性。

检查响应标题。

Chrome Download Attribute not working

因此，如果可能，您必须更改存储文件的后端。

编辑： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

此属性仅适用于具有相同来源的资源的链接。

Edit2：

getImage(imageUrl: string): Observable<File> {
    return this.http
        .get(imageUrl, { responseType: ResponseContentType.Blob })
        .map((res: Response) => res.blob());
}

现在你的内存中有一个文件，你可以保存它。

Answer 3

以这种方式使用

<a [href]=URLoftheFile download="FilenameWithExtension">DownloadFile</a>

但不适用于交叉原点

要在Angular 2中下载的文件的自定义文件名

3 个答案: