Angular js中的文件下载

Posted 2023-05-06

【中文标题】Angular js中的文件下载

【英文标题】：File download in angular js

【发布时间】：2019-05-20 14:33:57

【问题描述】：

如何在移动设备中下载文件，同时从服务器提供 URL，在 Angularjs 移动应用程序（Platform Cordova）中。文件可以是pdf、图片等类型...

【问题讨论】：

您是否能够在您的应用中清理并生成有效的 URL？

是的。我从 Web API 获取 URL，我已经在浏览器上检查了它及其工作

当您将手指按住链接（在移动设备上）时...您看到了什么？您是否（来自操作系统）要求您在另一个应用程序中打开它？

没有。当我点击链接时没有任何反应。即使 '' 用于重定向，设备中也没有发生任何事情，但在浏览器中，它会转到链接页面

将此添加到您的页面...

【参考方案1】：

你必须这样做：

这是 Angular JS 部分：

import  Http, ResponseContentType  from '@angular/http';
...

constructor(
  private http: Http,
)  

downloadFile() 
  return this.http
    .get('http://www.africau.edu/images/default', 
      responseType: ResponseContentType.Blob,
      search: // query string if have
    )
    .map(res => 
      return 
        filename: 'sample.pdf',
        data: res.blob()
      ;
    )
    .subscribe(res => 
        console.log('start download:',res);
        var url = window.URL.createObjectURL(res.data);
        var a = document.createElement('a');
        document.body.appendChild(a);
        a.setAttribute('style', 'display: none');
        a.href = url;
        a.download = res.filename;
        a.click();
        window.URL.revokeObjectURL(url);
        a.remove(); // remove the element
      , error => 
        console.log('download error:', JSON.stringify(error));
      , () => 
        console.log('Completed file download.')
      );

这是 html 部分：

<button class="btn btn-primary" (click)="downloadFile()"><i class="fa fa-file-pdf-o"></i> Download</button>