使用文件保护程序下载Angular4中的文件

我正在尝试在angular 4应用程序中实现下载文件功能。我的api返回我从SharePoint下载的文件的base 64字符串。我正在使用文件保护程序模块下载文件。下面是使用的代码

let byteArray = new Uint8Array(res.data)
 , blob = new Blob([byteArray], {type: 'application/pdf'});
 saveAs(blob, "test.pdf");

res.data是文件的base64字符串。

---

但是，下载的文件无法打开。错误消息为“文件已损坏或损坏”。文本文件可以下载并打开，但始终为空，没有任何内容。我做错了什么。

如果不能够测试实际的请求/响应，就很难知道什么是错的

我会尝试记录不同的对象并分析输出，可能会将响应直接投射到

新Blob

，然后看看会发生什么

另一个提示可能是在不使用文件保护程序的情况下进行测试。 也许是这样的：

downloadFile(data: Response){
  var blob = new Blob([data], { type: 'application/pdf' });
  var url= window.URL.createObjectURL(blob);
  window.open(url);
}

---

来源：

调用组件中的函数，如下所示：

 getPdf(form) {
   this.formService.getFormPdf(form.id).subscribe(data => {
     saveAs(data, form.name + '_' + form.surname + '.pdf');
     this.toastr.toastrSuccess.next('PDF fetched');
   });
 }

然后在http服务中实现，如下所示：

  getFormPdf(formNumber): Observable<any> {
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('Authorization', 'Token ' + localStorage.getItem('token'));
    return this.http.get(this.PDFForm + formNumber, { headers: headers, responseType: ResponseContentType.Blob }).map(
        (res) => {
            return new Blob([res.blob()], { type: 'application/pdf' });
        });
}

getFormPdf（formNumber）：可观察{
let headers=新的headers（）；
headers.append（'Content-Type'，'application/json'）；
headers.append（'Authorization'，'Token'+localStorage.getItem（'Token'））；
返回this.http.get（this.PDFForm+formNumber，{headers:headers，responseType:ResponseContentType.Blob}）.map(
（res）=>{
返回新的Blob（[res.Blob（）]，{type:'application/pdf'}）；
});
}

结果表明，我以错误的方式将base64转换为blob。这对我很有帮助。

+

1-安装显示保存/打开文件弹出窗口的依赖项

npm install file-saver --save
npm install @types/file-saver --save

2-使用此功能创建服务以接收数据

import { RequestOptions, ResponseContentType, Http } from '@angular/http';
import { map } from 'rxjs/operators';
    constructor(private http: Http) { }

    downloadFile(id): Observable<Blob> {
        let options = new RequestOptions({responseType: ResponseContentType.Blob });
        return this.http.get(this.baseUrl + `coursepurchased/receipt/` + bookingId, options)
        .pipe(map(res => res.blob()))
    }

---

这对我有用

事实证明，我以错误的方式将base64转换为blob。这对我很有帮助。我正在关注你的答案，我无法理解它的行为。有时它会下载文件，但大多数情况下不会。我尝试了同样的方法，得到了以下生成错误：生成错误“saveAs”不是由node_modules/file saver/dist/FileSaver.min.js导出的

import {saveAs as importedSaveAs} from "file-saver";

 getCourseReceipt(bookingId) {
    this.studentInfoService.getCourseInvoice(bookingId).subscribe(
      blob => {
        var fileName = 'test.pdf';
        importedSaveAs(blob, fileName)
      },
      error => {
        console.log(error);
        this.alertService.showAlert(error.message, "error");
      }
    );
  }