前端实现下载文件功能一般使用以下三种方式：
1.请求后台接口拿到对应的 url，访问 url 地址下载；
2.文件放在前端静态资源地址，直接访问下载；
3.请求后台接口拿到对应的文件内容，js创建文件并下载；
前面两种相对简单一点：下面我贴下对应的代码
<a href="/static/xxxxx.csv" download="fileName">绝对路径写法
/** href 文件的绝对/相对地址
./代表当前目录（可以省略）../代表上一级目录 /代表根目录属于绝对路径
download 属性规定被下载的超链接目标。
filename 规定作为文件名来使用的文本。一般在项目中不使用相对路径，因为在本地用很能没问题，但是代码上传到线上时，路径可能就不对了；
*/
<a href="./static/xxxxx.csv" download="fileName">相对路径写法
需要创建文件并下载的，下面贴一下代码
fileDownload(content, name = ‘fileName‘, suffix = ‘csv‘) { // 添加字节序标识，避免乱码 const data = `\uFEFF${content}`; const blob = new Blob([data], { type: ‘text/csv,charset=UTF-8‘ }); const downloadElement = document.createElement(‘a‘); // 创建下载链接 const href = window.URL.createObjectURL(blob); downloadElement.href = href; // 下载文件名 downloadElement.download = `${name}.${suffix}`; document.body.appendChild(downloadElement); downloadElement.click(); // 移除元素 document.body.removeChild(downloadElement); // 释放blob对象 window.URL.revokeObjectURL(href); } /** content 创建文件的内容 blob 类文件对象 name 创建的文件名 suffix 文件后缀 下面的就是创建一个a标签然后设置href以及download属性，并执行下载操作，然后移除a标签 */
然后就写完，溜了溜了～
最后安利一波博主微信公众号，感谢关注
原文：https://www.cnblogs.com/ChineseLiao/p/11570591.html