vue下载blob文档流

一般文件常见的下载方式有：直接a链接可以下载，还有一种就是请求后端的文档流下载

前一种比较简单就不多讲了，大概思路是：请求后端接口获取文件下的地址，然后在文档中创建一个a标签，js点击a标签，然后销毁这个a标签；

后一种就是通过文档流请求后端：
首先，下载file-saver

cnpm i file-saver --save

然后封装download.js公用方法

//utils/download.js
import Vue from 'vue'
import axios from 'axios'
import { saveAs } from 'file-saver'
import { message } from 'ant-design-vue'

const baseURL = process.env.VUE_APP_BASEURL

// 验证是否为blob格式
async function blobValidate(data) {
    try {
        const text = await data.text();
        JSON.parse(text);
        return false;
    } catch (error) {
        return true;
    }
}



export default {
    name(name, isDelete = false) {
        var url = baseURL + "/common/download?fileName=" + encodeURIComponent(name) + "&delete=" + isDelete
        axios({
            method: 'get',
            url: url,
            responseType: 'blob',//这边很关键，一定要写
            headers: { 'Authorization': 'Bearer ' + Vue.ls.get('token') }
        }).then(async(res) => {
            const isLogin = await blobValidate(res.data);
            if (isLogin) {
                console.log(res);
                const blob = new Blob([res.data])
                this.saveAs(blob, decodeURIComponent(res.headers['download-filename']))
            } else {
                this.printErrMsg(res.data);
            }
        })
    },
    saveAs(text, name, opts) {
        saveAs(text, name, opts);
    }
}

最后在页面中应用

import download from "@/utils/download.js";
//下载详情
methods: {
    handleView(record) {
      download.name(record.reportFilePath);
    },
   }