当前位置：首页 > JavaScript

js 实现下载文件

2026-01-30 16:33:41JavaScript

使用 `a` 标签下载文件

通过创建 a 标签并设置 download 属性实现文件下载。适用于已知文件 URL 的情况。

const downloadFile = (url, filename) => {
  const link = document.createElement('a');
  link.href = url;
  link.download = filename || 'file';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};
// 调用示例
downloadFile('https://example.com/file.pdf', 'document.pdf');

通过 Blob 对象下载动态内容

将文本或二进制数据转换为 Blob 对象生成下载链接，适合动态生成的文件内容。

const downloadTextAsFile = (content, filename, mimeType = 'text/plain') => {
  const blob = new Blob([content], { type: mimeType });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = filename || 'file.txt';
  document.body.appendChild(link);
  link.click();
  setTimeout(() => {
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
  }, 100);
};
// 调用示例
downloadTextAsFile('Hello, world!', 'example.txt');

下载二进制文件（如图片、PDF）

通过 fetch 获取文件并转换为 Blob 对象下载。

const downloadBinaryFile = async (url, filename) => {
  const response = await fetch(url);
  const blob = await response.blob();
  const objectUrl = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = objectUrl;
  link.download = filename || url.split('/').pop();
  document.body.appendChild(link);
  link.click();
  setTimeout(() => {
    document.body.removeChild(link);
    URL.revokeObjectURL(objectUrl);
  }, 100);
};
// 调用示例
downloadBinaryFile('https://example.com/image.png', 'photo.png');