JS 通过 URL 下载文件并重命名（两种方式）

缺乏、安全感 2023-09-26 23:16 116阅读 0赞

## JS 通过 URL 下载文件并重命名（两种方式） ##

#### 文章目录 ####

*  JS 通过 URL 下载文件并重命名（两种方式）
 *  一、\`a\` 标签简单设置 href 方式
 *  二、\`a\` 标签使用 blob 数据类型方式

## 一、`a` 标签简单设置 href 方式 ##

// 下载文件
    function downloadFile() {
        
      const link = document.createElement('a');
      link.style.display = 'none';
      // 设置下载地址
      link.setAttribute('href', file.sourceUrl);
      // 设置文件名
      link.setAttribute('download', file.fileName);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }

## 二、`a` 标签使用 blob 数据类型方式 ##

async function download(downloadUrl: string, downloadFileName: string ) {
        
      const blob = await getBlob(downloadUrl);
      saveAs(blob, downloadFileName );
    }
    
    function getBlob(url: string) {
        
      return new Promise<Blob>((resolve, reject) => {
        
        const xhr = new XMLHttpRequest();
    
        xhr.open('GET', url, true);
        xhr.responseType = 'blob';
        xhr.onload = () => {
        
          if (xhr.status === 200) {
        
            resolve(xhr.response);
          } else {
        
            reject(new Error(`Request failed with status ${
          xhr.status}`));
          }
        };
        xhr.onerror = () => {
        
          reject(new Error('Request failed'));
        };
    
        xhr.send();
      });
    }
    
    function saveAs(blob: Blob, filename: string) {
        
      const link = document.createElement('a');
      const body = document.body;
    
      link.href = window.URL.createObjectURL(blob);
      link.download = filename;
    
      // hide the link
      link.style.display = 'none';
      body.appendChild(link);
    
      link.click();
      body.removeChild(link);
    
      window.URL.revokeObjectURL(link.href);
    }