Chrome无法打开大于1.5MB的PDF data URL的原因及解决方法

Chrome 浏览器对顶层导航场景的 data: 协议 URI 有硬编码的大小限制，不同版本阈值在 2MB 上下浮动，当拼接出来的 base64 格式 PDF data URI 体积超过这个阈值时，Chrome 会直接截断 URI 内容，导致 PDF 文件元数据损坏，无法正常解析打开。
Firefox 对 data: URI 的长度限制远高于 Chrome，阈值可达数十MB级别，因此1.5MB以上的PDF文件可以正常加载。

核心思路是放弃直接拼接base64生成data URI的方案，改用Blob格式的对象URL，这类URL不受Chrome的data URI大小限制，全浏览器兼容性更好：

• 第一步将base64字符串解码为二进制数据，封装为application/pdf类型的Blob对象
• 第二步调用URL.createObjectURL()生成同源的Blob链接赋值给a标签即可
• 参考实现代码：

// 解码base64为二进制字符串
const binaryString = atob(data);
const bufferLength = binaryString.length;
const bytesArray = new Uint8Array(bufferLength);
for (let i = 0; i < bufferLength; i++) {
  bytesArray[i] = binaryString.charCodeAt(i);
}
// 生成PDF Blob
const pdfFile = new Blob([bytesArray], { type: 'application/pdf' });
// 生成无大小限制的可访问链接
link.href = URL.createObjectURL(pdfFile);

• 注意事项：Blob URL会占用浏览器内存，确认文件加载/下载完成后，可以调用URL.revokeObjectURL(link.href)手动释放内存，避免不必要的资源占用。
• 如果需求是触发文件下载而非在线预览，可以给a标签加上download属性，配合上述Blob URL使用，不会触发浏览器内置PDF阅读器的额外限制。

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