前端使用JS内置Blob实现下载各种形式的文件实例

在前端开发中，JavaScript 的 Blob 对象允许你创建一个包含原始数据的类文件对象。使用 Blob 可以轻松实现在客户端生成和下载各种类型的文件，例如文本文件、图片、CSV 等。下面是一些使用 Blob 实现文件下载的示例：

1. 下载文本文件

function downloadTextFile(filename, text) {
  const blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = filename;

  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
}

// 使用示例
downloadTextFile('example.txt', 'Hello, this is a text file!');

2. 下载JSON文件

function downloadJSONFile(filename, data) {
  const json = JSON.stringify(data, null, 2);
  const blob = new Blob([json], { type: 'application/json;charset=utf-8' });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = filename;

  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
}

// 使用示例
downloadJSONFile('data.json', { name: 'John Doe', age: 30 });

3. 下载CSV文件

function downloadCSVFile(filename, csvContent) {
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8' });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = filename;

  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
}

// 使用示例
const csvData = 'Name,Age\nJohn Doe,30\nJane Doe,25';
downloadCSVFile('data.csv', csvData);

4. 下载图片文件

function downloadImageFile(filename, imageUrl) {
  fetch(imageUrl)
    .then(response => response.blob())
    .then(blob => {
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = filename;

      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(url);
    })
    .catch(e => console.error('Error downloading image:', e));
}

// 使用示例
downloadImageFile('example.png', 'https://example.com/image.png');

这些示例展示了如何使用 Blob 和 URL.createObjectURL 来创建一个可以下载的文件链接。然后，通过创建一个临时的 <a> 元素并触发点击事件来实现文件的下载。记得在下载完成后撤销 URL 对象，以释放内存。