前端文件下载无法二次下载且获取不到文件大小、用流下载大文件需等待

前端文件下载用a标签下载，会出现无法二次点击下载，且文件保存框会获取不到文件大小；用文件流下载，如果文件比较大，点击下载需等待请求后端再执行下载，会出现没反应几秒钟，该如何解决？
1、a标签下载，设置了挂载和移除依然无法二次点击

function aTagDownload(url, filename){
  const a = document.createElement("a"); // 创建 a 标签
  a.href = url; // 下载路径
  a.download = filename;  // 下载属性，文件名
  a.style.display = "none"; // 不可见
  document.body.appendChild(a); // 挂载
  a.click(); // 触发点击事件
  document.body.removeChild(a); // 移除
}

获取不到文件大小，但能正常下载

2、用流下载，文件过大时，点击下载需等待，会出现没反应一会

    download(data.filePath).then(response => {
            var filename = data.fileName + '.' + data.fileType;
              var link = document.createElement('a');
              let binaryData = [];
              binaryData.push(response);
              link.href = window.URL.createObjectURL(new Blob(binaryData));
              // link.href = window.URL.createObjectURL(response);
              link.download = filename;
              link.click();
        });

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

2条回答默认最新

CSDN-Ada助手 CSDN-AI 官方账号 2023-11-17 21:16

关注

【以下回答由 GPT 生成】

### 问题解决方案

#### 问题一: `<a>` 标签下载问题

1. **无法通过多次点击下载同一个文件：** 这是因为浏览器会认为同一个文件已经被下载过了，就不会再次触发下载。为了解决这个问题，你可以每次下载前都修改文件的 URL，可以在文件名后加上时间戳或者随机数来确保每次的 URL 都不同。

   ```javascript
   function aTagDownload(url, filename){
     const a = document.createElement("a");
     a.href = url + '?t=' + new Date().getTime();  // 在 URL 后加上时间戳
     a.download = filename;
     a.style.display = "none";
     document.body.appendChild(a);
     a.click();
     document.body.removeChild(a);
   }
   ```

2. **无法获取文件的大小信息：** 在前端，你可以通过发送 HEAD 请求获取文件大小信息。以下是一个示例代码：

   ```javascript
   function getFileSize(url) {
     return new Promise((resolve, reject) => {
       var xhr = new XMLHttpRequest();
       xhr.open('HEAD', url, true);
       xhr.onreadystatechange = function() {
         if (xhr.readyState === xhr.DONE) {
           if (xhr.status === 200) {
             resolve(xhr.getResponseHeader('Content-Length'));
           } else {
             reject('获取文件大小失败');
           }
         }
       };
       xhr.send();
     });
   }
   ```

#### 问题二: 用流下载大文件需等待

在下载大文件时可能会出现浏览器无响应的情况，这通常是因为文件下载的过程会阻塞主线程。你可以尝试使用 `stream` 的方式来解决这个问题。以下是一个示例代码：

```javascript
function streamDownload(url) {
  return new Promise((resolve, reject) => {
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.open('GET', url, true);
    xhr.onload = function() {
      if (xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject('下载文件失败');
      }
    };
    xhr.send();
  });
}