Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/typescript/8.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angular 在中的“新建”选项卡中打开pdf文件_Angular_Typescript - Fatal编程技术网

Angular 在中的“新建”选项卡中打开pdf文件

Angular 在中的“新建”选项卡中打开pdf文件,angular,typescript,Angular,Typescript,我正在尝试在Angular 9的新选项卡中实现pdf文件打开。我以blob的形式从api接收文件。但是由于window.URL.createObjectURL(blob)已弃用。我收到此消息未能在“URL”上执行“createObjectURL”:未找到与提供的签名匹配的函数。错误。我知道现在我应该使用MediaStream()来执行他的操作,但我不知道如何使它与blob一起工作 我的代码现在看起来像这样,但缺少主要部分: downloadFile() { console.log('Fi

我正在尝试在Angular 9的新选项卡中实现pdf文件打开。我以blob的形式从api接收文件。但是由于
window.URL.createObjectURL(blob)
已弃用。我收到此消息
未能在“URL”上执行“createObjectURL”:未找到与提供的签名匹配的函数。
错误。我知道现在我应该使用
MediaStream()
来执行他的操作,但我不知道如何使它与blob一起工作

我的代码现在看起来像这样,但缺少主要部分:

downloadFile() {
    console.log('File download started.');
    const blob = this.agreementService.getPdfReport(this.agreementNumber);

    // Deprecated part
    const url = window.URL.createObjectURL(blob);
    const link = this.downloadZipLink.nativeElement;
    link.href = url;
    link.download = 'Agreement.pdf';
    link.click();
    window.URL.revokeObjectURL(url);
}
agreement.service.ts:

    getPdfReport(agreementNumber: string){
    this.requestUrl = `${configs.api}v1/reports/${agreementNumber}/Agreement.pdf`;
    let headers = new HttpHeaders();
    headers = headers.set('Accept', 'application/pdf');
    return this.http.get(this.requestUrl, {headers, responseType: 'blob'});
  }
  getPdfReport(agreementNumber: string) {
    this.requestUrl = `${configs.api}v1/reports/${agreementNumber}/Agreement.pdf`;
    return this.http.get(this.requestUrl, { responseType: 'blob', observe: 'response'}).pipe(
      map((res: any) => {
        return new Blob([res.body], { type: 'application/pdf' });
      })
    );
  }

从两个答案中得出我自己的解决方案。如果我做错了什么,请在评论中纠正我

agreement.service.ts:

    getPdfReport(agreementNumber: string){
    this.requestUrl = `${configs.api}v1/reports/${agreementNumber}/Agreement.pdf`;
    let headers = new HttpHeaders();
    headers = headers.set('Accept', 'application/pdf');
    return this.http.get(this.requestUrl, {headers, responseType: 'blob'});
  }
  getPdfReport(agreementNumber: string) {
    this.requestUrl = `${configs.api}v1/reports/${agreementNumber}/Agreement.pdf`;
    return this.http.get(this.requestUrl, { responseType: 'blob', observe: 'response'}).pipe(
      map((res: any) => {
        return new Blob([res.body], { type: 'application/pdf' });
      })
    );
  }
协议.component.ts:

this.agreementService.getPdfReport(this.agreementNumber).subscribe(res => {
  const fileURL = URL.createObjectURL(res);
  window.open(fileURL, '_blank');
});