JavaScript文件下载问题：如何实现文件强制下载而非在当前标签打开

API 探路者

2026-8-23

解决文件强制下载的问题

你的代码里有个明显错误：link.download = 'name'; 这里用了字符串'name'，而不是传入的参数变量name，这会导致下载的文件名固定为name，而不是你指定的自定义名称。除此之外，跨域资源直接用a标签download属性可能会被浏览器拦截，因为安全策略限制，这时候需要先把文件转为Blob再触发下载。

下面是两种场景下的解决方案：

1. 同域文件下载（简单版）

如果文件和你的页面在同一个域名下，修正变量引用即可：

function downloadURI(uri, name) {
  const link = document.createElement('a');
  link.download = name; // 这里用变量name，不是字符串'name'
  link.href = uri;
  link.click();
  link.remove();
}

// 使用示例
downloadURI('/myfile.pdf', '自定义文件名.pdf');

2. 跨域文件强制下载（通用版）

如果是跨域资源，浏览器会忽略download属性，直接在标签页打开文件。这时候需要通过Fetch API获取文件Blob，再创建下载链接：

async function downloadURI(uri, name) {
  try {
    const response = await fetch(uri);
    if (!response.ok) throw new Error('文件获取失败');
    
    const blob = await response.blob();
    const blobUrl = URL.createObjectURL(blob);
    
    const link = document.createElement('a');
    link.download = name;
    link.href = blobUrl;
    link.click();
    
    // 清理Blob URL，避免内存泄漏
    setTimeout(() => URL.revokeObjectURL(blobUrl), 100);
    link.remove();
  } catch (error) {
    console.error('下载出错:', error);
    alert('文件下载失败，请稍后重试');
  }
}

// 使用示例
downloadURI('https://example.com/myfile.pdf', '自定义文件名.pdf');

注意事项：