JS根据URL下载文件|极客笔记

JS根据URL下载文件

在Web开发中，经常会遇到需要下载文件的情况，而JavaScript提供了一种简单的方法来实现根据URL下载文件的功能。本文将会详细介绍如何使用JavaScript来实现这一功能。

方法一：使用`<a>`标签实现文件下载

最简单的方法是使用<a>标签的download属性来实现文件下载。只需要将<a>标签的href属性设置为文件的URL，download属性设置为文件名即可。

<!DOCTYPE html>
<html>
<head>
<title>文件下载</title>
</head>
<body>
<a href="https://example.com/file.pdf" download="file.pdf">点击下载文件</a>
</body>
</html>

运行上述代码，点击链接即可下载文件。但这种方法仅适用于静态文件，无法实现动态生成文件的下载。

方法二：使用XMLHttpRequest实现文件下载

如果需要动态生成文件并下载，可以使用XMLHttpRequest对象发送GET请求获取文件内容，然后利用Blob对象创建文件并下载。

下面是一个使用XMLHttpRequest实现文件下载的示例：

function downloadFile(url) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'blob';

  xhr.onload = function() {
    if (xhr.status === 200) {
      var blob = xhr.response;
      var a = document.createElement('a');
      var url = URL.createObjectURL(blob);
      a.href = url;
      a.download = 'file.pdf';
      a.click();
      URL.revokeObjectURL(url);
    }
  };

  xhr.send();
}

// 调用downloadFile函数
downloadFile('https://example.com/file.pdf');

运行上述代码，即可实现动态生成文件并下载。通过XMLHttpRequest获取文件内容后，利用Blob对象创建文件，然后创建一个<a>标签，设置href为Blob对象的URL，download为文件名，触发点击实现文件下载。

方法三：使用fetch API实现文件下载

除了XMLHttpRequest，还可以使用fetch API来实现文件下载。fetch API是一种现代的网络请求API，功能更强大，使用更简洁。

下面是一个使用fetch API实现文件下载的示例：

function downloadFile(url) {
  fetch(url)
    .then(response => response.blob())
    .then(blob => {
      var a = document.createElement('a');
      var url = URL.createObjectURL(blob);
      a.href = url;
      a.download = 'file.pdf';
      a.click();
      URL.revokeObjectURL(url);
    })
    .catch(err => console.error(err));
}

// 调用downloadFile函数
downloadFile('https://example.com/file.pdf');

运行上述代码，即可实现使用fetch API动态生成文件并下载。使用fetch API获取文件Blob，然后创建<a>标签并下载。