blob文件下载=>通过文件流下载文件 - 《JavaScript》

需要带token的情况下
注意： responseType:'blob' 这个是想是XHR里面的，我之前之前把他放到header里面所以一直导致传过来的文件内容一直是失败的。


/**
 * 接口
 * 文件下载
 */
export function apiTrafficDownload(id){
    return request({
        url:`/task/trafficDownload?taskId=${id}`,
        method:"GET",
        responseType:'blob'
    })
}

文件下载格式地址：https://www.iana.org/assignments/media-types/media-types.xhtml#Guy_Harris

download() {
  apiTrafficDownload(this.id)
    .then((result) => {
    //    传入一个二进制流
    const blob = new Blob([result], {
      //    设置下载的格式
      type: "application/vnd.tcpdump.pcap",
    });
    //    获取时间戳 毫秒
    var date =Date.parse(new Date());
    //    获取blob的url地址
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    //    设置文件名， => 在写这个的时候，就是应为没有设置文件名倒是倒是下载下来的是undefiled
    a.download = `${date}.pcap`;
    a.href = url;
    a.click()
  })
    .catch((err) => {
    console.log(err);
  });
},

于是我有自己写了一遍后端

//    后端
const expres = require('express');
const express = require('express');
const app = express();
const path = require('path')

const imgPath = path.join(__dirname,'public','403.jpg')

app.use(express.static(path.join(__dirname,'public')))
//    直接下载
app.get('/download',(req,res)=>{
  res.download(imgPath)
})
//    在页面展示
app.get('/sendFile',(req,res)=>{
  res.sendFile(imgPath)
})

app.listen(2000)

//    前端
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="http://localhost:2000/download">http://localhost:2000/download直接下载图标</a>
    <a href="http://localhost:2000/sendFile">http://localhost:2000/sendFile在浏览器显示图片</a>
</body>

</html>

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script>

    function download() {
        axios({
            url: `http://localhost:2000/download`,
            method: 'GET',
            responseType: 'blob',    //    重点  自己踩过的坑~
        })
        .then(result => {
            const blob = new Blob([result.data], {
                type: "image/jpeg"
            })
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.download = `1.png`;
            a.href = url;
            a.click()

        })
        .catch((err) => {
            console.log(err);
        })
    }

    function sendFile() {
        axios({
            url: `http://localhost:2000/sendFile`,
            method: 'GET',
            responseType: 'blob'
        })
            .then(result => {
                console.log(result)
                const blob = new Blob([result.data], {
                    type: "image/jpeg"
                })
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                //  设置了文件格式 一定要设置名字
                a.download = `1.jpg`;
                a.href = url;
                a.click()
            })
    }

</script>