Question

我正在尝试在我的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字符串。该文件已下载，但无法打开。错误消息是“文件已损坏或损坏”。文本文件被下载并可以打开，但总是空白而没有内容。我做错了什么。

Answer 1

如果不能测试实际的请求/响应，很难知道出了什么问题。

我会尝试记录不同的对象并分析输出，可能会直接将响应转换为new Blob，看看会发生什么。

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

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

来源：How do I download a file with Angular2

Answer 2

对于Angular 6 +

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

3-在组件中，使用“文件保护程序”解析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");
      }
    );
  }

这对我有用！

Answer 3

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

 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 4

原来我以不正确的方式将base64转换为blob。这base64 to blob帮助了我。

使用文件保护程序

4 个答案: