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

前后端分离项目中下载与其他接口的使用不同，一般下载不走node，不通过代理服务器，而是直接在前台发送请求，又因为前端使用的是代理服务器，会出现跨域问题，需要后端协助，允许下载文件接口跨域

不使用代理服务器

axios({
    method: 'GET',
    url: `url`,  // 后端下载接口
    headers: {
        token: token
    },
    params: {
        fileId: id
    },
    // 后端返回的是二进制数据，请求的响应类型为二进制数据,如果不加下载的文件是乱码
    responseType: 'blob'   
}).then(res => {
    let file = res.data
    let 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 = url
    downloadLink.download = filename; // 设置文件名
    // 添加到页面并模拟点击下载rendering
    document.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.id
            console.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 = url
                downloadLink.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.id
    let token = req.headers.token
    const 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');
    }
})