如何解决Google Chrome打开图片文件而非直接下载的问题

• 你的代码中设置了target="_blank"，这一属性会强制浏览器在新标签页打开链接，是可预览文件直接打开的直接原因之一
• download属性仅对同源资源生效，如果你的文件地址和当前站点跨域，浏览器会直接忽略download属性，默认执行预览逻辑

方案1：同源资源场景 #

直接删除target="_blank"配置即可，修改后的代码如下：

const downloadElement = document.createElement('a');
downloadElement.href = data;
downloadElement.download = data.split('/').pop();
document.body.appendChild(downloadElement);
downloadElement.click();
document.body.removeChild(downloadElement);

方案2：跨域资源场景 #

如果文件地址和当前站点跨域，需要先将资源转为Blob对象后再触发下载，实现代码如下：

async function downloadFile(url, fileName) {
  // 请求资源转为Blob格式
  const res = await fetch(url);
  const blob = await res.blob();
  const blobUrl = window.URL.createObjectURL(blob);
  
  const downloadElement = document.createElement('a');
  downloadElement.href = blobUrl;
  downloadElement.download = fileName || url.split('/').pop();
  document.body.appendChild(downloadElement);
  downloadElement.click();
  document.body.removeChild(downloadElement);
  // 释放Blob URL占用的内存
  window.URL.revokeObjectURL(blobUrl);
}

// 调用示例
downloadFile(data)

注意事项 #

• 该方案要求资源所在的服务端配置了CORS跨域许可，否则fetch请求会被浏览器拦截
• 大文件场景下建议添加加载提示，避免用户感知不到后台请求过程

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