在 Angular 2 中下载文件答案

【问题标题】：Download a file in Angular 2在 Angular 2 中下载文件
【发布时间】：2017-11-10 20:27:48
【问题描述】：

我想在 Angular 2 中下载 pdf 格式的文件，我正在使用 FileSaver.js 将文件另存为 pdf。

(response) => {
    var mediaType = 'application/pdf';
    let pdfContent = response["_body"];

    var blob = new Blob([pdfContent], {type: mediaType});
    var filename = 'test.pdf';
    //setTimeout(FileSaver.saveAs(blob, filename),10000); //Tried this but no result
    //  FileSaver.saveAs(blob(), "docitt-report-" + documentNo + ".pdf"); //tried this too
  },

但是下载的 pdf 文件是空的，我想可能是资源需要时间所以我尝试了setTimeout，但它仍然没有帮助。尽管响应中有数据，我可以在控制台中看到response._body。

让我知道我哪里出错了。

【问题讨论】：

什么是pdfContent？
它是一个加密字符串，出现在响应的“_body”中。
您为什么期望“加密字符串”会生成.pdf 文件？该字符串是“加密字符串”还是base64 字符串？
乍一看，数据似乎是“加密的”。您可以将数据请求为Blob 或ArrayBuffer，请参阅How to build PDF file from binary string returned from a web-service using javascript、Displaying pdf from arraybuffer
文件保护程序似乎无法转换为pdf。 github.com/eligrey/FileSaver.js/issues/186

标签： javascript angular filesaver.js

【解决方案1】：

我得到了它的工作，这是我的答案：

downloadDocument(docId){
  const headers = new Headers({responseType:ResponseContentType.Blob});
  headers.append('authorization','Bearer '+token);
  this.http.get(url,{headers:headers,responseType:ResponseContentType.Blob}).subscribe(
    (response) => {    
     FileSaver.saveAs(response.blob(), "Document-" + docId+ ".pdf");
    }
  );
}

导入 FilSaver

import * as FileSaver from 'file-saver';

【讨论】：

【解决方案2】：

  import 'rxjs/Rx' ;




this._reportService.getReport().subscribe(data => this.downloadFile(data)),//console.log(data),
                 error => console.log("Error downloading the file."),
                 () => console.info("OK");
                 
   When the request is ready it will call the function "downloadFile" that is defined as follows
downloadFile(data: Response){
  var blob = new Blob([data], { type: 'text/csv' });
  var url= window.URL.createObjectURL(blob);
  window.open(url);
}

【讨论】：