别再复制粘贴了！探索兼容性出色的前端文件下载方式

2024-01-05 06:39:55

在前端开发中，文件下载是一个常见的需求。然而，不同的项目往往采用不同的下载方法，这会导致代码冗余和潜在问题。本文将探讨一种兼容性出色的前端文件下载方式，彻底告别复制粘贴的烦恼。

兼容性出色的前端文件下载方式

传统的文件下载方式通过<a>标签或window.open()方法实现。然而，这些方法在不同的浏览器和设备上表现不一，存在兼容性问题。

更可靠的方式是使用XMLHttpRequest（XHR）对象或fetch() API。这些 API 提供了对底层 HTTP 请求的直接控制，确保了跨浏览器的兼容性。

使用 XHR 对象下载文件

const xhr = new XMLHttpRequest();
xhr.open('GET', 'file.pdf');
xhr.responseType = 'blob';
xhr.onload = function() {
  if (xhr.status === 200) {
    const blob = xhr.response;
    const fileName = xhr.getResponseHeader('Content-Disposition').split(';')[1].split('=')[1];
    saveAs(blob, fileName);
  }
};
xhr.send();

使用 fetch() API 下载文件

fetch('file.pdf', {
  method: 'GET',
}).then(response => {
  if (response.ok) {
    response.blob().then(blob => {
      const fileName = response.headers.get('Content-Disposition').split(';')[1].split('=')[1];
      saveAs(blob, fileName);
    });
  }
});

saveAs()函数用于将 Blob 对象保存为文件。

自定义下载行为

上述方法提供了基本的文件下载功能。开发者还可以根据需要进一步定制下载行为，例如：

指定下载的文件名
添加进度条跟踪下载进度
在下载完成后触发事件

示例代码

// 自定义下载文件名
const xhr = new XMLHttpRequest();
xhr.open('GET', 'file.pdf');
xhr.responseType = 'blob';
xhr.onload = function() {
  if (xhr.status === 200) {
    const blob = xhr.response;
    saveAs(blob, 'custom_file_name.pdf');
  }
};
xhr.send();

// 添加进度条
const xhr = new XMLHttpRequest();
xhr.open('GET', 'file.pdf');
xhr.responseType = 'blob';
xhr.onprogress = function(e) {
  const progress = e.loaded / e.total;
  // 更新进度条
};
xhr.onload = function() {
  if (xhr.status === 200) {
    const blob = xhr.response;
    saveAs(blob, 'custom_file_name.pdf');
  }
};
xhr.send();