前后端分离项目--下载功能

文章目录

- 不使用代理服务器
- - blob
  - - blob构造函数
    - 通过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');}
})