JS下载链接的两种方式：跨平台下载的不二之选

2023-01-15 07:35:07

JS 实现文件下载：便捷、安全且功能强大

在现代 web 开发中，文件下载功能至关重要。传统的文件下载方式存在诸多局限，如无法控制文件名称、获取进度或暂停下载。JavaScript (JS) 提供了两种有效的解决方案，可解决这些痛点：

一、弹出新窗口下载

此方法通过创建新窗口并触发文件下载来工作。优点包括：

可控的文件名称
下载进度可见
可暂停或取消下载

代码示例：

// 获取下载链接
const downloadUrl = 'http://example.com/download.zip';

// 创建新窗口
const newWindow = window.open(downloadUrl, '_blank');

// 监听窗口加载完成
newWindow.onload = function() {
  newWindow.document.execCommand('SaveAs', null, 'download.zip');
};

然而，此方法存在一个缺点：它需要用户交互，并且可能会被某些浏览器拦截。

二、直接 JS 读取文件流

此方法通过直接从服务器读取文件流来工作。优点包括：

无需弹出窗口，更安全
仍然可以控制文件名称
提供下载进度
允许暂停或取消下载

代码示例：

// 获取下载链接
const downloadUrl = 'http://example.com/download.zip';

// 创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();

// 配置请求
xhr.open('GET', downloadUrl, true);
xhr.setRequestHeader('Content-Type', 'application/octet-stream');

// 监听请求状态
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 获取文件流
    const fileStream = xhr.response;

    // 创建 Blob 对象
    const blob = new Blob([fileStream], {type: 'application/octet-stream'});

    // 创建下载链接
    const downloadLink = document.createElement('a');
    downloadLink.href = URL.createObjectURL(blob);
    downloadLink.download = 'download.zip';

    // 触发下载
    downloadLink.click();
  }
};

// 发送请求
xhr.send();