使用Base64字符串在iframe显示含图片PDF时白屏，求解决方案

我来帮你搞定这个问题！你遇到的白屏情况，大概率是因为Base64字符串的格式不对，或者代码里的处理方式有问题，导致浏览器无法正确识别PDF内容。

问题根源分析 #

你的代码里直接把base64Url塞进iframe的src，但如果这个变量只是纯Base64编码的字符串，缺少标准的data URI前缀，浏览器根本不知道这是个PDF文件，自然无法渲染。另外，用encodeURI处理整个URI也可能破坏格式，导致识别失败。

解决方案 #

方案1：修复Base64的data URI格式（必须做的第一步）

给你的Base64字符串加上正确的前缀：data:application/pdf;base64,，然后直接赋值给iframe的src，不要对整个URI做编码。同时记得关闭文档流，确保浏览器完成渲染。

修改后的代码示例：

// 假设base64Str是你从txt文件获取的纯Base64内容
const fullDataUri = `data:application/pdf;base64,${base64Str}`;
const pdfWindow = window.open("");
pdfWindow.document.write(`<iframe width='800px' height='800px' src='${fullDataUri}' frameborder='0'></iframe>`);
pdfWindow.document.close(); // 关键：关闭文档流触发渲染

方案2：直接使用PDF的URL加载（更稳定推荐）

如果你的PDF已经存储在云端，直接用这个URL加载iframe会更可靠，还能避免Base64的大小限制问题：

const pdfUrl = "https://firebasestorage.googleapis.com/v0/b/bitcoin-info-44838.appspot.com/o/Web%20Developer%20Interview%20Questions%20And%20Answers.pdf?alt=media&token=9bde47aa-14cb-4fe9-8917-3ef72cf3e86b";
const pdfWindow = window.open("");
pdfWindow.document.write(`<iframe width='800px' height='800px' src='${pdfUrl}' frameborder='0'></iframe>`);

额外排查点 #

• 检查你的Base64字符串是否完整：确保从txt文件复制的内容没有多余的空格、换行或者截断，这些都会导致渲染失败。
• 浏览器兼容性：部分旧浏览器对大体积的data URI支持有限，如果PDF文件较大，优先用方案2的URL加载方式。

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