大体积PDF嵌入问题咨询：data URL失效后的替代方案

针对你遇到的data URL无法处理大PDF的问题，这里有几个实用的替代方案，都能满足你嵌入而非新窗口打开的需求：

1. 让API直接返回PDF字节流（最优方案） #

如果可以修改你的Rest API，这是最省心的解决办法：

• 调整API逻辑，不再将PDF转成base64，而是直接返回Content-Type: application/pdf的原始字节流
• 把embed的src直接设置为API的请求地址，比如：

  <embed src="/api/retrieve-pdf?doc-id=123" type="application/pdf" width="100%" height="600px">
  

• 优势：完全避开data URL的大小限制，浏览器直接流式加载PDF，内存占用更低，还能利用浏览器缓存优化重复加载
• 注意事项：如果API和前端跨域，需要配置CORS允许前端域名访问；如果需要认证，确保请求带上凭证（比如cookie或Authorization头）

2. 用Blob + Object URL处理base64数据（API无法修改时用） #

如果API必须返回base64，你可以在前端把base64转成Blob，再通过浏览器生成的Object URL来嵌入：

// 假设从API获取到的base64编码数据（已去掉data:前缀）
const rawBase64 = pdfDataEncodedAsBase64.replace('data:application/pdf;base64,', '');

// 转成Uint8Array
const byteChars = atob(rawBase64);
const byteArray = new Uint8Array(byteChars.length);
for (let i = 0; i < byteChars.length; i++) {
  byteArray[i] = byteChars.charCodeAt(i);
}

// 创建Blob和Object URL
const pdfBlob = new Blob([byteArray], { type: 'application/pdf' });
const objectUrl = URL.createObjectURL(pdfBlob);

// 赋值给embed
document.getElementById('pdf-embed').src = objectUrl;

// 页面卸载时释放URL，避免内存泄漏
window.addEventListener('beforeunload', () => {
  URL.revokeObjectURL(objectUrl);
});

• 优势：Object URL没有data URL的大小限制，兼容所有现代浏览器，不需要修改API
• 注意事项：大体积PDF转Blob会占用前端内存，记得在不需要时调用URL.revokeObjectURL释放资源

3. 用iframe替代embed（兼容性优化） #

如果embed在某些浏览器上表现不稳定，可以换成iframe，用法和embed几乎一致：

<iframe id="pdf-iframe" width="100%" height="600px" frameborder="0" type="application/pdf"></iframe>

然后用上面的方法给iframe的src赋值（要么直接用API URL，要么用Object URL）。iframe的PDF渲染兼容性在部分浏览器中比embed更好，还能通过sandbox属性添加安全限制。

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