如何在 angular 2 中下载 pdf 文件

Question

这是在 angular 2 中下载 pdf 文件的功能，当我下载 Pdf 文件时它是损坏的文件。那么我该如何解决这个问题。它像这样显示损坏的数据。 %PDF-1.5 %�� ↵66 0 对象 <> 内对象

downloadFile() {
    //this.http.get('https://contactsapi.apispark.net/v1/companies/').subscribe(
    this.http.get('assets/Files/booking.pdf').subscribe(
      (response: any) => {
        console.log(response);
        let parsedResponse =(response)
        var blob = new Blob([response], {type: 'application/pdf'});
        var filename = 'booking.pdf';
        saveAs(blob, filename);
      });
  }

Answer 1

我们需要这个文件保护程序包，你可以像"npm install file-saver --save"那样安装，然后你可以这样试试

 public downloadCSVFile(){
    this.downloadPdf().subscribe(
        (res) => {      
            saveAs(res,'test.pdf')
        }
    );


}

public downloadPdf(): any {
    let url='your url'
    let headers = new Headers();
    headers.append('Authorization', 'JWT ' + localStorage.getItem('id_token'));
    return this.http.get(url,{  headers: headers,responseType: ResponseContentType.Blob }).map(
        (res) => {
            return new Blob([res.blob()], { type: 'application/pdf' })
        })
}

Answer 2

In Angular 6、In service downloadPdfFile.service.ts 并创建以下东西。

导入语句

import {
  HttpClient,
  HttpHeaders
} from '@angular/common/http';

import { map } from 'rxjs/operators';

pdf下载方法

downloadPDF(dataObj) {

    let headerOptions = new HttpHeaders({
        'Content-Type': 'application/json',
        'Accept': 'application/pdf'
        //   'Accept': 'application/octet-stream', // for excel file
    });

    let requestOptions = { headers: headerOptions, responseType: 'blob' as 'blob' };
    // post or get depending on your requirement
    this.http.post(serviceURL, dataObj, requestOptions).pipe(map((data: any) => {

        let blob = new Blob([data], {
            type: 'application/pdf' // must match the Accept type
            // type: 'application/octet-stream' // for excel 
        });
        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = 'samplePDFFile.pdf';
        link.click();
        window.URL.revokeObjectURL(link.href);

    })).subscribe((result: any) => {
    });

}

组件文件只调用方法

downloadPdf()
{
     let dataObj={}
     this.downoloadPdfFileService.downloadPDF(dataObj);
   
}

Answer 3

如果你想要一个简单的解决方案，试试这个：

<a download="b82d8486-a931-421c-b594-f4d3129746e5.pdf" target="_blank" href="/assets/files/b82d8486-a931-421c-b594-f4d3129746e5.pdf">
                Download pdf
              </a>

如何在 angular 2 中下载 pdf 文件

How to download pdf file in angular 2

angular2-services