方案1：a标签下载
简单下载方式，通过a标签的href属性加载下载url，适合普通场景下的简单下载。
适合场景get 请求返回为文件流 / 返回URL 不适合场景下载需要计算、权限验证、携带Cookie需要动态生成文件内容，即需要Post传参需要处理跨域问题需要处理大文件下载（10M以上）需要断点续传或文件下载进度监控等⌨️ 应用示例 <a href="https://images.unsplash.com/photo-1682687982468-4584ff11f88a?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&dl=neom-xDQKvPjxtxo-unsplash.jpg" download="demo">下载图片</a>
function downLoadFile(res){ const ele = document.createElement('a'); ele.setAttribute('href',res.url); //设置下载文件的url地址 ele.setAttribute('download' , 'download');//用于设置下载文件的文件名 ele.click(); link.addEventListener('click', (event) => { event.preventDefault(); const downloadTimer = setTimeout(() => { alert('下载超时，请重试！ 扩展说明
'); }, 5000); const errorListener = () => { clearTimeout(downloadTimer); alert('下载失败！
'); link.removeEventListener('error', errorListener); }; link.addEventListener('error', errorListener); });}window.onload = function(){ $.ajax({ url:"api/file/download", type:"get", dataType:'JSON' }).then(function(res){ if(res.bizNO > 0 ){ downLoadFile(res); }else{ alert(res.bizMsg); } }).always(function(){ alert("连接异常")； })}
关于优先级
Causes the browser to treat the linked URL as a download. Can be used with or without a filename value:
关于响应头Content-Disposition
Content-Disposition 是一个 HTTP 响应头，它指定了如何显示响应的内容，特别是对于以附件形式下载的文件。这个头部可以包含一个内联展示（inline）的选项，也可以包含一个附件（attachment）的选项，以及可选的文件名参数。
主要作用如下：
内联展示（inline）如果Content-Disposition头部的值设置为inline，浏览器通常会尝试在浏览器窗口内显示内容，例如在浏览器中直接打开 PDF 文件或图像。这对于一些直接浏览的文件类型是合适的。附件下载（attachment）如果Content-Disposition头部的值设置为attachment，浏览器通常会提示用户下载文件，而不是直接在浏览器中显示。这对于需要用户保存到本地的文件，如文档、图像、音频和视频等，是常见的设置。指定文件名通过filename参数，可以指定下载文件的文件名。这对于确保用户下载的文件有一个明确的名称非常有用，而不是使用服务器上的默认文件名。例如，Content-Disposition: attachment; filename="example.txt"。方案2： Blob 下载 基础概念什么是blobblob是File类的超类，表示 二进制大对象，是JS对不可修改二进制数据的封装类型blob相关知识点developer.mozilla.org/zh-CN/docs/… 适合场景接口返回的格式为文件流格式下载需要计算、权限验证、携带Cookie需要动态生成文件内容，即需要Post传参 代码实现function fileDownLoad(data){ // 1. 创建点击下载的元素 var linkElement = document.createElement('a'); // 2. 判断浏览器是否支持blob对象 try{ //该实例化的方式第一个参数必须是数组的格式 var blob = new Blob([data],{ type: "application/pdf" }); }catch(e){ //旧版本浏览器下的blob创建对象 window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder; if(e.name == 'TypeError' && window.BlobBuilder){ var blobbuilder = new BlobBuilder(); BlobBuilder.append(data); var blob = blobbuilder.getBlob("application/pdf"); }else{ alert("浏览器版本较低，暂不支持该文件类型下载"); } } // 提取blob文件中的url信息，使二进制文件在不读取到js中时直接下载 let url = window.URL.createObjectURL(blob); linkElement.setAttribute('href',url); linkElement.setAttribute('downLoad','download'); linkElement.click(); // 释放URL内存 window.URL.revokeObjectURL(url);}document.querySelector('#fileInput').addEventListener('change', (event)=>{ fileDownLoad(event.target.files[0])})下载接口需要携带Cookie信息
function downloadFileWithToken(url, token) { let xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.setRequestHeader("Authorization", token); xhr.responseType = 'blob'; xhr.onload = function (e) { if (this.status === 200) { let blob = this.response; let fileName = '下载的文件名称'; // 针对IE浏览器 if (window.navigator.msSaveBlob) { try { window.navigator.msSaveBlob(blob, fileName); } catch (e) { console.log(e); } } else { // 通用浏览器 const url = window.URL.createObjectURL(blob); a.href = url; a.download = fileName; document.body.appendChild(a); a.click(); document.body.removeChild(a); window.URL.revokeObjectURL(url); } } else { alert('下载文件失败'); } } xhr.send();}方案3：FileSaver实现基础介绍FileSaver.js 是一个用于在客户端保存文件的 JavaScript 库github.com/eligrey/Fil…基础使用
import FileSaver from 'file-saver'let blob = new Blob(["Hello, FileSaver! Blob 下载"], {type: "text/plain;charset=utf-8"});window.saveAs(blob, "hello FileSaver.txt");
import FileSaver from 'file-saver'let blob = new Blob(["Hello, FileSaver! URL 下载"], {type: "text/plain;charset=utf-8"});const url = window.URL.createObjectURL(blob)window.saveAs(url, "hello FileSaver.txt");原理介绍
欢迎补充其他实现思路
原文链接：https://juejin.cn/post/7316737302113910822
