Angular 10 环境下 ng2-pdf-viewer 无法加载 Blob URL 格式 PDF 问题

核心问题排查 #

• 接口请求未指定responseType: 'blob'：Angular HttpClient默认将响应解析为JSON格式，你拿到的retFileData不是原始二进制流，生成的Blob本身是损坏的，自然无法渲染PDF。
• 重复包装Blob造成资源异常：你在响应回调里已经生成了一次Blob，complete回调里又包了第二层，没必要且可能引入格式错误。
• 未处理Angular安全资源拦截：blob格式的URL属于本地动态生成资源，默认会被Angular的安全策略拦截，无法直接绑定到组件属性。
• contentType取值错误：如果该变量的值不是application/pdf，也会导致Blob格式识别失败。

修改后的代码示例 #

TS 代码 #

// 首先引入DomSanitizer
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

// 组件类里声明变量
myBlobURL: SafeUrl;
contentType = 'application/pdf';

constructor(private apiservice: Apiservice, private sanitizer: DomSanitizer) {}

downloadFile(fileData: Fileuploader) {
    // 调用接口时指定responseType为blob，注意要放在请求配置的对应参数位置
    this.apiservice.getDownloadfile(fileData, { responseType: 'blob' }).subscribe(
        (retFileData: Blob) => {
            // 直接用返回的Blob生成objectURL，然后用sanitizer标记为安全资源
            const rawUrl = URL.createObjectURL(retFileData);
            this.myBlobURL = this.sanitizer.bypassSecurityTrustResourceUrl(rawUrl);
        },
        (err: Error) => {
            console.log(err);
        }
    );
}

如果你的getDownloadfile方法是封装过的，记得在封装的HttpClient请求里加上responseType: 'blob'配置，不要直接在调用处传，避免配置不生效。

HTML 代码 #

无需修改，保持原有绑定逻辑即可：

<pdf-viewer [src]="myBlobURL"
            [render-text]="true"
            [original-size]="false"
            style="width: 400px; height: 500px">
</pdf-viewer>

额外注意事项 #

• 组件销毁时记得调用URL.revokeObjectURL()释放内存，避免内存泄漏。
• 可以在生成URL后手动在新窗口打开测试，如果新窗口也无法打开PDF，说明返回的Blob本身损坏，优先排查接口响应配置。

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