NG2 pdf-viewer中pdfSrc显示不完整，如何获取完整Blob URL？

最可能的原因：变量名大小写不匹配 #

你在TS里定义的变量是pdfSrc（驼峰命名，大写S），但模板里绑定的却是pdfsrc（全小写）。Angular的属性绑定严格区分大小写，这会导致组件无法正确获取到你生成的完整Blob URL，大概率显示的是旧的、未完全初始化的值。

修复方法：把模板里的变量名改成和TS一致：

<pdf-viewer [src]="pdfSrc" (error)="onError($event)" [render-text]="true" style="display: block;"></pdf-viewer>

其他可选方案 #

1. 直接传递Blob对象而非URL
   很多PDF Viewer组件支持直接绑定Blob对象，这样可以避免URL生成和传递的问题。修改TS代码如下：

const byteArray = new Uint8Array(
    atob(base64)
        .split("")
        .map(char => char.charCodeAt(0))
);
// 直接赋值Blob对象给pdfSrc
this.pdfSrc = new Blob([byteArray], { type: "application/pdf" });

模板保持修改后的变量名即可，无需使用URL.createObjectURL。

2. 确保异步流程正确
   如果你的base64数据是通过异步请求获取的，要确保在数据完全返回后再执行Blob生成逻辑，避免组件拿到未初始化的pdfSrc值。比如用async/await处理请求：

async loadPdf() {
    const base64 = await this.yourApiService.getPdfBase64();
    const byteArray = new Uint8Array(
        atob(base64)
            .split("")
            .map(char => char.charCodeAt(0))
    );
    const file = new Blob([byteArray], { type: "application/pdf" });
    this.pdfSrc = URL.createObjectURL(file);
}

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