用 a 标签打开 dateURL 的问题


const a = document.createElement('a');
a.href = dataUrl;
a.target = '_blank';
a.click();
a.remove();

报错


Not allowed to navigate top frame to data URL:

主要原因

出于安全考虑，现代浏览器不允许直接在新标签页中打开 data URL
data URL 可能包含恶意内容，所以浏览器会阻止这种直接导航

解决方案


const blob = dataURLtoBlob(dataUrl); // 将 data URL 转换为 Blob 对象
const blobUrl = URL.createObjectURL(blob); // 创建一个指向 Blob 的 URL
a.href = blobUrl; // 使用 blob URL 而不是 data URL

Blob URL 是一个临时的、本地的 URL（格式如：blob:http://localhost:3000/xxxx-xxxx）

浏览器认为这种 URL 更安全，因为它只能访问本地生成的内容
Blob URL 实际上指向内存中的数据，而不是直接包含数据本身

注意

Blob URL 会占用内存，所以需要在使用完后释放


setTimeout(() => {
  URL.revokeObjectURL(blobUrl); // 释放内存
  a.remove(); // 移除临时创建的元素
}, 100);

Last updated on March 29, 2025