Chrome报错Failed to load PDF document但接口返回数据正常如何解决

API 探路者

2026-9-27

问题根因

你遇到的PDF加载失败是因为new Blob接收的内容不是合法的PDF原始字节，分为两种常见情况：

后端返回的JSON结构中data.Content是Base64编码的PDF内容，直接将Base64字符串传入Blob会导致内容损坏
jQuery ajax默认将响应按UTF-8转成字符串，破坏了二进制PDF的原始字节结构

解决方案

场景A：后端返回JSON包装的Base64格式PDF

先添加Base64转二进制数组的工具函数：

function base64ToUint8Array(base64: string): Uint8Array {
    const binaryStr = window.atob(base64);
    const bytes = new Uint8Array(binaryStr.length);
    for (let i = 0; i < binaryStr.length; i++) {
        bytes[i] = binaryStr.charCodeAt(i);
    }
    return bytes;
}

修改原有创建Blob的代码：

// 替换原有let blob = new Blob(...) 行
const pdfBytes = base64ToUint8Array(data.Content);
let blob = new Blob([pdfBytes], { type: data.ContentType });

场景B：后端直接返回PDF二进制流

修改$.ajax配置，要求直接返回Blob类型响应，禁止jQuery自动转码：

printItems(versionKeys: string[]): JQueryPromise<any> {
    console.log('printItems');
    $.ajax({
        type: "post",
        contentType: "application/json",
        data: JSON.stringify(versionKeys),
        url: this.apiUrls.PrintTemplates,
        // 新增以下两个配置项
        xhrFields: {
            responseType: 'blob'
        },
        processData: false,
        success: function (blob, status, xhr) {
            const url = URL.createObjectURL(blob);
            // 替换window.open避免弹窗拦截，可选
            const a = document.createElement('a');
            a.href = url;
            a.target = '_blank';
            a.download = '打印文件.pdf';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            console.log('success');
        }
    });
    return;
}