wordpress布置网站教程,7k7k游戏网页版入口,找南昌兼职做网站的,做出个人网站什么水平文章目录 不使用代理服务器blobblob构造函数通过FormData对象的getBlob方法创建Blob对象将Blob对象转换成UR 使用代理服务器 前后端分离项目中下载与其他接口的使用不同#xff0c;一般下载不走node#xff0c;不通过代理服务器#xff0c;而是直接在前台发送请求#xff0… 文章目录 不使用代理服务器blobblob构造函数通过FormData对象的getBlob方法创建Blob对象将Blob对象转换成UR 使用代理服务器 前后端分离项目中下载与其他接口的使用不同一般下载不走node不通过代理服务器而是直接在前台发送请求又因为前端使用的是代理服务器会出现跨域问题需要后端协助允许下载文件接口跨域 不使用代理服务器
axios({method: GET,url: url, // 后端下载接口headers: {token: token},params: {fileId: id},// 后端返回的是二进制数据请求的响应类型为二进制数据,如果不加下载的文件是乱码responseType: blob
}).then(res {let file res.datalet disposition (res.headers[content-disposition]).split()let filename disposition[1] //文件名const blob new Blob([file])let url URL.createObjectURL(blob)// 创建下载链接let downloadLink document.createElement(a);downloadLink.href urldownloadLink.download filename; // 设置文件名// 添加到页面并模拟点击下载renderingdocument.body.appendChild(downloadLink);downloadLink.click();// 清理下载链接document.body.removeChild(downloadLink);
}).catch(err {console.log(err)})blob
blob表示二进制的大对象。在数据库管理系统中将二进制数据存储为一个单一个体的集合。在 JavaScript 中 Blob 类型的对象表示不可变的类似文件对象的原始数据。 Blob 对象含有两个属性size 和 type。其中 size 属性用于表示数据的大小以字节为单位type 是一个字符串。
blob构造函数
const blob new Blob([file])通过FormData对象的getBlob方法创建Blob对象
const formData new FormData();
formData.append(file, file);
const blob formData.getBlob(file);将Blob对象转换成UR
const url URL.createObjectURL(blob)使用代理服务器
如果用node浏览器端还需要判断下载文件类型从而添加对应的content-type和拓展名如果后端返的全是200还可能出现没有文件下载下来是下图这样的 浏览器端
function fileDownload() {const fileDwon document.querySelectorAll(.fileDwon)console.log(fileDwon);fileDwon.forEach(function (value) {value.addEventListener(click, function () {let id value.idconsole.log(id);download({method: GET,url: /downLoadFile,params: {id: id},responseType: blob,}).then(res {let file res.data;const blob new Blob([file])let url URL.createObjectURL(blob)console.log(blob);// 创建下载链接var downloadLink document.createElement(a);downloadLink.href urldownloadLink.download ${res.headers.filename}.doc; // 设置文件名// 添加到页面并模拟点击下载document.body.appendChild(downloadLink);downloadLink.click();// 清理下载链接URL.revokeObjectURL(url);document.body.removeChild(downloadLink);}).catch(err {console.log(err)})})})
}服务器端
// 下载文件
router.get(/downLoadFile, async (req, res) {let fileId req.query.idlet token req.headers.tokenconst url http://123.57.144.143:8080/warmHeartDownload/downLoadFile;try {const pipelineAsync promisify(pipeline);const response await fetch(url, {headers: {token},params: {fileId: fileId},});if (!response.ok) {console.error(获取失败);}await pipelineAsync(response.body, res);} catch (error) {console.error(Download error:, error);res.status(500).send(Error downloading file);}
})
