无法将API返回PDF转为Uint8Array并正常显示问题求助

问题根源 #

你当前代码的核心问题是用response.text()处理PDF二进制数据：
PDF是二进制文件，包含大量非UTF-8兼容的字节。response.text()会将二进制流按字符编码解析为字符串，过程中会损坏原始二进制数据，再转成Uint8Array时已经不是有效的PDF内容，导致生成的Blob无法被浏览器正确解析。

修正后的代码 #

直接使用response.arrayBuffer()获取原始二进制缓冲区，避免字符串编码的损耗：

let response = await this.getDocument(id);
if(response.status === 200){
    // 获取原始二进制数组缓冲区
    const arrayBuffer = await response.arrayBuffer();
    const uint8Array = new Uint8Array(arrayBuffer);
    const file = new Blob([uint8Array], { type: 'application/pdf' });
    const fileURL = URL.createObjectURL(file);
    window.open(fileURL);
}

Salesforce LWC专属排查与优化点 #

1. Apex后端验证（如果调用的是Salesforce Apex） #

确保Apex方法返回的是Blob类型，而非字符串：

@AuraEnabled(cacheable=false)
public static Blob getDocument(Id documentId) {
    // 示例：从ContentVersion获取PDF二进制数据
    ContentVersion cv = [SELECT VersionData FROM ContentVersion WHERE ContentDocumentId = :documentId LIMIT 1];
    return cv.VersionData;
}

如果Apex返回的是字符串，会自动进行Base64编码，前端需要额外解码，直接返回Blob更可靠。

2. 请求头与响应类型检查 #

• 在控制台打印响应头，确认Content-Type为application/pdf：

  console.log(response.headers.get('Content-Type'));
  

• 如果是调用外部API，确保请求的Accept头设置为application/pdf，避免后端返回文本格式的响应。

3. 验证Blob有效性 #

如果新标签页仍无法显示，可先测试Blob是否能正常下载：

// 新增下载测试代码
const a = document.createElement('a');
a.href = fileURL;
a.download = 'document.pdf';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);

如果下载的PDF能正常打开，说明问题出在浏览器新标签页的PDF渲染（可尝试清空缓存或更换浏览器测试）；如果下载的文件仍损坏，说明数据在传输或转换过程中仍有问题。

4. 避免不必要的转换 #

不要手动循环字符串转Uint8Array，这种方式完全无法处理多字节字符或非UTF-8字节，直接用arrayBuffer转Uint8Array是最可靠的二进制处理方式。

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