无法以 Angular 5 下载文件

Posted 2023-02-18

【中文标题】无法以 Angular 5 下载文件

【英文标题】：failed to download file in angular 5

【发布时间】：2018-10-06 04:33:50

【问题描述】：

我正在尝试从角度 5 中的 url 下载 pdf 文件。通过将 url 和“下载”属性添加到“a”标签，它在 html 中运行良好。当我尝试在角度 5 中执行相同操作时，但是它不工作。

service.ts

pdfDownload() 
         var options = new RequestOptions(responseType: ResponseContentType.Blob );

        // Process the file downloaded
        return this.http.get('https://.....test.pdf', options);
    

component.ts

this.rcycCommonService.pdfDownload().subscribe((res)=>
        this.saveFile(res.blob());
    )
saveFile (blobContent)  
        var blob = new Blob([blobContent],  type: 'application/pdf' );
        saveAs(blob,"mypdf.pdf");
    ;

但它显示以下错误。

ERROR in src/app/rcyc-services/rcyc-common/rcyc-common.service.ts(426,137): error TS2345: Argument of type 'RequestOptions' is not assignable to parameter of type ' headers?: HttpHeaders |  [header: string]: string | string[]; ; observe?: "body"; params?: Ht...'.
  Types of property 'headers' are incompatible.
    Type 'Headers' is not assignable to type 'HttpHeaders |  [header: string]: string | string[]; '.
      Type 'Headers' is not assignable to type ' [header: string]: string | string[]; '.
        Index signature is missing in type 'Headers'.

任何人都可以发布正确的代码以下载 angular 5 中的文件吗？

【问题讨论】：

到目前为止你尝试了什么？

我仍然无法从 url 创建 blob 对象

【参考方案1】：

这是一个 Typescript 编译错误。正如错误所说，this.http.get 的第二个参数应该是Headers、HttpHeaders 或字符串索引对象（不是RequestOptions）。

【讨论】：

你能在 Angular 5 中发布一个工作代码吗？我花了很多时间

您使用什么 IDE？您是否在 http.get 调用中获得语法高亮显示？在您尝试运行它之前，您应该会看到一个错误。

是的，我在 http.get 中得到了语法高亮

语法高亮是否告诉你为什么它不能编译？查看 Angular 文档，了解应该传递哪些参数 HttpClient.get。

【参考方案2】：

你可以使用 axios 来下载文件

你可以安装axios

npm i axios

并在您的服务中导入

import axios from 'axios';

return axios.get(`$URL`,headers , responseType:"blob").then(( data ) => 
      const downloadUrl = window.URL.createObjectURL(new Blob([data]));
      const link = document.createElement('a');
      link.href = downloadUrl;
      link.setAttribute('download', `$fileName.csv`); //any other extension and type you want
      document.body.appendChild(link);
      link.click();
      link.remove();
    );