Fetch API下载文件

原创已于 2023-06-16 09:15:00 修改 · 2.3k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript

于 2023-06-15 17:33:53 首次发布

文章介绍了如何利用JavaScript中的fetchAPI发起HTTP请求，并结合Promise处理响应，将资源转换为blob，进而实现单个和多个文件的自动下载功能。通过创建URL对象和模拟点击链接来触发文件下载，并在所有下载完成后给出提示。

该文章已生成可运行项目，

Fetch

 1. 全局的 fetch() 方法用于发起获取资源的请求。 
 2. 该方法返回一个 promise，这个 promise 会在请求响应后被 resolve，并传回 Response 对象

自动下载单个文件

const downloadFile = (url) => {
  fetch(url)
    .then(response => response.blob())
    .then(data => {
       const fileURL = window.URL.createObjectURL(data); // 创建了一个URL，该URL表示了Blob对象的内容
       const link = document.createElement('a'); // 创建一个链接元素并设置其属性
       link.href = fileURL;
       link.download = 'filename.pdf';
       link.click(); // 模拟点击下载链接
       window.URL.revokeObjectURL(fileURL); // 释放创建的URL对象
     })
     .catch(error => {
      // 处理错误
     });
}

自动下载多个文件

const urlArray = [url1, url2]
const downloadPromises = urlArray.map(url => {
  return downloadFile(url)
});
Promise.all(downloadPromises)
  .then(() => {
     console.log('所有文件下载完成');
   })
  .catch(error => {
     console.error('下载文件时出错:', error);
   });

本文章已经生成可运行项目