javascript 下载方法分享

在JavaScript中，下载文件通常可以通过以下几种方式实现：

1. 使用HTML的<a>元素

你可以创建一个<a>元素，并使用download属性来指定文件名称，然后通过编程的方式触发点击事件。

function downloadFile(data, fileName, type="text/plain") {
  // 创建一个隐藏的<a>标签
  const a = document.createElement("a");
  document.body.appendChild(a);
  a.style = "display: none";

  // 创建blob对象
  const blob = new Blob([data], {type: type}),
        url = window.URL.createObjectURL(blob);
  a.href = url;
  a.download = fileName;
  a.click();

  // 清理
  window.URL.revokeObjectURL(url);
  document.body.removeChild(a);
}

// 使用函数下载一个文本文件
downloadFile("Hello, world!", "hello.txt");

2. 使用window.location

如果文件已经存在服务器上，并且你有文件的URL，你可以简单地设置window.location来下载文件。

function downloadFileByUrl(fileUrl) {
  window.location = fileUrl;
}

// 使用函数下载
downloadFileByUrl('http://example.com/file.pdf');

3. 使用fetch和FileSaver.js库

对于更复杂的场景，比如需要先用fetch获取数据然后下载，可以使用FileSaver.js库。

首先需要在你的项目中引入FileSaver.js（你可以通过npm安装或直接引入CDN链接）。

然后，使用fetch获取数据并使用FileSaver保存文件：

fetch('url-to-fetch-data-from')
  .then(resp => resp.blob())
  .then(blob => {
    const url = window.URL.createObjectURL(blob);
    saveAs(url, "filename.ext");  // 使用 FileSaver.js 提供的 saveAs 函数
    window.URL.revokeObjectURL(url);
  });

4. 使用HTTP响应头

如果你控制服务器端的代码，你也可以通过设置HTTP响应头Content-Disposition来提示浏览器下载文件。

例如，在Node.js中你可以这样做：

response.setHeader('Content-Disposition', 'attachment; filename=filename.ext');

这将告诉浏览器这个响应不应该被正常显示，而是作为一个文件下载到用户的设备上。

注意事项

• 出于安全考虑，现代浏览器可能限制从非用户生成事件（如点击事件）触发的下载。
• CORS（跨源资源共享）政策可能会阻止从不同源下载资源，除非远程资源的服务器设置了合适的CORS头部。
• 文件下载功能在移动设备上可能有所不同，尤其是iOS上的Safari浏览器可能会有限制。