Angular 5中如何从URL下载PDF文件？已耗时1天仍未解决

嘿，折腾一天没搞定这个问题肯定超闹心！你遇到的ERROR TypeError: req.responseType.t...错误，根源是混用了旧版的Http模块和不正确的响应类型配置，咱们一步步来修正：

问题分析 #

Angular 5已经推荐使用HttpClient模块（从Angular 4.3开始引入），而你代码里用的ResponseContentType.Blob是旧Http模块的枚举值，在HttpClient中，响应类型需要用字符串形式指定，直接传枚举会触发类型不匹配的错误。

解决步骤 #

1. 确保导入HttpClientModule
   先在你的根模块（比如app.module.ts）中导入并注册HttpClientModule：

   import { HttpClientModule } from '@angular/common/http';
   
   @NgModule({
     imports: [
       // ...其他模块（比如BrowserModule）
       HttpClientModule
     ]
   })
   export class AppModule { }
   

2. 替换Http为HttpClient，修改请求代码
   在你的组件/service中，用HttpClient替代旧的Http，并调整responseType的配置：

   import { HttpClient } from '@angular/common/http';
   import { saveAs } from 'file-saver';
   
   // ...
   
   constructor(private http: HttpClient) { } // 注入HttpClient
   
   leadGenSubmit() {
     this.http.get('http://kmmc.in/wp-content/uploads/2014/01/lesson2.pdf', { 
       responseType: 'blob' as 'json' // 类型断言用于绕过TypeScript编译检查
     })
     .subscribe((data: Blob) => {
       console.log('获取到的Blob数据:', data);
       // 直接用返回的Blob对象保存，无需重新包装
       saveAs(data, "testData.pdf");
     }, err => {
       console.error('下载失败:', err);
     });
   }
   

额外注意点 #

• 如果你还没安装file-saver，记得先执行命令：npm install file-saver --save，若需要类型支持，再安装@types/file-saver：npm install @types/file-saver --save-dev
• 检查跨域问题：如果你的前端域名和PDF所在域名不同，需要确保目标服务器配置了CORS，允许你的前端域名访问，否则会出现跨域错误。

内容的提问来源于stack exchange，提问作者Pranab V V