前话：

1. 在实际开发过程中，实现文件下载功能，后端一般是返回一个文件流，我们只需要拿到这个文件流后，再使用new Blob转化成blob格式的数据,然后创建一个a链接元素进行下载就行了：

（“本段代码是之前写案例时从别处copy的，都有注释省了自己写，哈哈哈，侵删”）

fetch("后端给的下载功能的url", {method: "get",}).then((res) => {console.log(res, "文件流对象---------，可以打印下来看看");// 创建blob对象，将二进制数据封装为BLOB对象const blob = new Blob([res], {// 如何后端没返回下载文件类型，则需要手动设置：type: 'application/pdf;chartset=UTF-8' 表示下载文档为pdf，如果是word则设置为msword，excel为excel type: type})const a = document.createElement("a");// 兼容webkix浏览器，处理webkit浏览器中herf自动添加blob前缀，默认在浏览器打开而不是下载const URL = window.URL || window.webkitURL;// 根据blob对象创建URL 对象，生成本地URLconst herf = URL.createObjectURL(blob);// 下载链接a.href = herf;// 下载文件名,如果后端没有返回，可以自己写a.download = '文件.pdf'a.download = filename;document.body.appendChild(a);a.click();document.body.removeChild(a);// 在内存中移除URL 对象URL.revokeObjectURL(herf);});});

2. 但是这次后端直接给我返回了个url地址：http://127.0.0.1:3000/attchment/test.png，再用这种方式就不适合了，如果拿到结果直接硬塞进去发现不得行，浏览器对于 txt、png、jpeg 等这些后缀的文件会直接新窗口打开，让你进行预览，并不会执行下载操作；看到这里你是不是也头大了？我也是，后面就想着既然上面这种方式是通过文件流下载的，那我拿到url的地址后，把url地址文件里面的内容转为blob文件流不就好了？说干就干：

fetch("后端给你的下载地址的url",{method: "get",} .then((response) => response.json()).then((res) => {console.log(res, "res--------------拿到后端返回的url");// window.open(res.url)fetch(res.url, {method: "get",responseType: "blob",}).then((response) => response.blob()).then((blob) => {const a = document.createElement("a");const URL = window.URL || window.webkitURL;// 根据blob对象创建URL 对象，生成本地URLconst herf = URL.createObjectURL(blob);a.href = herf;// 下载文件名,如果后端没有返回，可以自己写a.download = '文件.pdf'a.download = filename;document.body.appendChild(a);a.click();document.body.removeChild(a);// 在内存中移除URL 对象URL.revokeObjectURL(herf);});});

按上面的方式，请求后端的下载功能接口后，拿到url再进行一次请求，然后就可以通过返回值拿到文件流，再使用第一种传统方式就可以实现下载了。

后言：

注意：由于后端返回的url地址和我们的前端项目地址存在跨域问题，所以我们需要配置proxy代理，部署上线需要配置nginx反向代理配置，或者后端直接配置cors

server {listen80; server_namewww.xxxxx.cn;location ^~ /attchment/ {proxy_pass http://127.0.0.1:3000/;}}

后端示例代码，可参考测试：

const express = require("express")const router = express()const multer = require("multer");const fs = require("fs")const cors = require('cors'); //allow CORSrouter.use(cors());//存储静态资源文件位置，方便前端直接通过url拿取router.use(express.static("./upload"))router.post("/upload",multer({dest:"upload"}).single("file"),(req,res)=>{ console.log(req.file) //处理上传操作存储起来，存当前文件夹或者mysql数据库})router.get("/download",(req,res)=>{ req.query.url ? res.download(`upload/${req.query.url}`) : res.send({ success:false }) res.send({url:"http://localhost:3000/"+req.query.url})})router.listen(3000,()=>{console.log("服务开启在3000端口")})