如何通过编程在新标签页直接打开图片Base64 Data URL？

方法一：直接调用window.open() #

这是最简洁的方式，直接将Base64 Data URL传入window.open()指定新标签页打开：

const imgDataUrl = 'data:image/png;base64,iVBORw0KGgoAAAANS...'; // 替换为你的Base64数据
window.open(imgDataUrl, '_blank');

注意：部分浏览器（如Chrome）出于安全策略，可能会拦截直接打开Data URL的请求，或者打开后显示空白，此时建议使用下面的方法。

方法二：创建隐藏<a>标签模拟点击 #

通过创建临时的<a>标签，设置目标为新标签页并模拟点击，兼容性更好：

const imgDataUrl = 'data:image/png;base64,iVBORw0KGgoAAAANS...';
const link = document.createElement('a');
link.href = imgDataUrl;
link.target = '_blank'; // 指定在新标签页打开
link.rel = 'noopener noreferrer'; // 安全增强，避免新页面影响原页面
document.body.appendChild(link);
link.click();
document.body.removeChild(link); // 移除临时标签

打开新标签页后，用户可以直接按Ctrl+S保存图片文件，或右键选择“另存为”。

方法三：处理大体积图片（转为Blob URL） #

如果Base64数据过大，直接使用Data URL可能出现浏览器限制，建议先转为Blob URL：

// 将Base64 Data URL转为Blob对象
function dataUrlToBlob(dataUrl) {
  const [headerPart, dataPart] = dataUrl.split(',');
  const mimeType = headerPart.match(/:(.*?);/)[1];
  const byteString = atob(dataPart);
  const arrayBuffer = new ArrayBuffer(byteString.length);
  const uint8Array = new Uint8Array(arrayBuffer);
  
  for (let i = 0; i < byteString.length; i++) {
    uint8Array[i] = byteString.charCodeAt(i);
  }
  
  return new Blob([uint8Array], { type: mimeType });
}

// 使用Blob URL打开图片
const imgDataUrl = 'data:image/png;base64,iVBORw0KGgoAAAANS...';
const imgBlob = dataUrlToBlob(imgDataUrl);
const blobUrl = URL.createObjectURL(imgBlob);

const link = document.createElement('a');
link.href = blobUrl;
link.target = '_blank';
link.rel = 'noopener noreferrer';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

// 主动释放Blob URL资源（可选，浏览器会自动回收）
setTimeout(() => URL.revokeObjectURL(blobUrl), 1000);

关键注意点 #

• 确保Base64 Data URL的格式正确，开头的data:image/[格式];base64,部分需与图片实际格式匹配（如image/jpeg、image/png）。
• 若需要直接触发下载而非打开预览，可给<a>标签添加download属性，如link.download = 'my-image.png';。

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