Safari使用Data URL下载客户端生成PDF报错的解决方案咨询

算力阿峰

2026-9-30

问题根因

Safari出于安全策略限制，禁止顶级框架直接导航到data URL，也不支持通过a标签的download属性直接下载data URL格式的PDF文件，这是触发报错的核心原因。

可行解决方案

使用Blob URL替代Data URL即可绕过该限制，无需依赖第三方库，也不需要调用window.open等被宿主限制的API，完整实现代码如下：

const pdfContent = 'xxxxx'; // 你的PDF字符串内容
// 将PDF字符串转为Blob对象
const pdfBlob = new Blob([pdfContent], { type: 'application/pdf' });
// 生成Blob格式的访问地址
const blobUrl = URL.createObjectURL(pdfBlob);

const element = document.createElement('a');
element.setAttribute('href', blobUrl);
element.setAttribute('download', 'mypdf.pdf');
element.style.display = 'none';

document.body.appendChild(element);
element.click();
document.body.removeChild(element);

// 下载完成后释放Blob URL占用的内存，避免泄漏
setTimeout(() => {
  URL.revokeObjectURL(blobUrl);
}, 100);

特殊场景处理（PDF内容为Base64编码）

如果你拿到的PDF内容是Base64编码格式，需要先转换为Uint8Array再生成Blob对象，代码如下：

const base64PdfContent = 'xxxxxx'; // Base64格式的PDF内容
const pdfRaw = window.atob(base64PdfContent);
const uint8Array = new Uint8Array(pdfRaw.length);
for (let i = 0; i < pdfRaw.length; i++) {
  uint8Array[i] = pdfRaw.charCodeAt(i);
}
const pdfBlob = new Blob([uint8Array], { type: 'application/pdf' });
// 后续生成Blob URL、触发下载的逻辑和上方一致