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

Question

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

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

res.data是文件的base64字符串。文件已下载，但无法打开。错误消息是 "file is corrupted or damaged"。文本文件已下载并可以打开，但始终为空白，没有任何内容。我是不是做错了什么。

Answer 1

如果不能测试实际的 request/response，很难知道哪里出了问题。

我会尝试记录不同的对象并分析输出，也许将响应直接投射到 new Blob，看看会发生什么。

另一个技巧可能是在不使用 file-saver 的情况下进行测试。也许是这样的：

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

来源：

Answer 2

像这样调用组件中的函数：

 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' });
        });
}

Answer 3

原来我以错误的方式将 base64 转换为 blob。这 base64 to blob 帮助了我。

Answer 4

对于Angular 6 +

1 - 安装显示 save/open 文件弹出窗口的依赖项

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()))
    }

3- 在组件中用 'file-saver'

解析 blob

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");
      }
    );
  }

这对我有用！

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

Download File in Angular4 using file-saver

filesaver.js

angular