JavaScript之H5端根据URL下载文件

简单粗暴，直接上代码

↓
↓
↓

下载含有url的文件：

function downloadUrlFile(url, fileName) {
    const url2 = url.replace(/\\/g, '/');
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url2, true);
    xhr.responseType = 'blob';
    // xhr.setRequestHeader('Authorization', 'Basic a2VybWl0Omtlcm1pdA==');
    // 为了避免大文件影响用户体验，建议加loading
    // react：Toast.loading('文件加载中...', 0);
    xhr.onload = () => {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // 获取文件blob数据并保存
        saveAs(xhr.response, fileName);
      }
      // react：Toast.hide();
    };
    xhr.send();
}

保存到本地并自动点击：

function saveAs(data, name) {
    const urlObject = window.URL || window.webkitURL || window;
    const saveLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    const url = urlObject.createObjectURL(data);
    saveLink.href = url;
    saveLink.download = name;
    saveLink.click();
    setTimeout(() => {
      urlObject.revokeObjectURL(url);
    }, 2000);
}

最后调用：

<button onclick="downloadUrlFile(url, name)">下载</button>

↓
↓
↓

我上传了代码片段，可以在下方查看

--------------------我是有底线的--------------------