vue如何通过$http的post方法请求下载二进制的Excel文件

方式一：单独接口,接口封装 特定的service.js

1.下载

//下载
export function getReportTemplate(){
    return new Promise((resolve, reject) => {
        axios({
            method: 'post',
            url: '/fas/engine/web/fund/final/template',
            responseType: "blob",
            headers: {
                'Content-Type': 'application/json;charset=UTF-8',
            },
        }).then((res) => {
            resolve(res)
        }).catch(error => {
            reject(error)
        });
    })
}

使用此function

//下载上报的模板
uploadTemplate(){
    getReportTemplate().then((res) => {
        console.log("getReportTemplate",res);
        var blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'})
        var downloadElement = document.createElement('a')//创建一个a 虚拟标签
        var href = window.URL.createObjectURL(blob) // 创建下载的链接
        downloadElement.href = href;
        downloadElement.download = "基金预算编报模板"; // 下载后文件名
        document.body.appendChild(downloadElement)
        downloadElement.click() // 点击下载
        document.body.removeChild(downloadElement) // 下载完成移除元素
        window.URL.revokeObjectURL(href) // 释放掉blob对象
    });
},

2.上传

//上传
export function getReport(formData){
    return new Promise((resolve, reject) => {
        axios({
            method: 'post',
            url: '/fas/engine/web/fund/budget/addReport',
            data: formData,
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        }).then((res) => {
            resolve(res)
        }).catch(error => {
            reject(error)
        });
    })
}

使用此function, test.vue

<template>
  <el-dialog :destroy-on-close="true" :close-on-click-modal="false" :title="title" :visible.sync="dialogVisible" @closed="closed">
    <el-upload style="width:100%"
          ref="upload"
          class="upload-demo"
          drag
          accept=".xlsx"
          :limit="limit"
          action=""
          :show-file-list="false"
          :on-change="handleChange"
          :on-remove="handleRemove"
          :http-request="handleUpload"
          :on-exceed="handleExceed"
          :file-list="fileList"
          :before-upload="beforeUpload"
          :auto-upload="false"
          >
          <i class="el-icon-upload" v-show="!uploadFlag"></i>
          <div class="el-upload__text" v-show="!uploadFlag">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__text" v-show="!uploadFlag">支持格式.xlsx且不超过10MB!</div>
          <div class="my-el-upload__text" v-show="uploadFlag">
            <span class="filename">{
  {fileName}}</span> {
  {fileSize}}
              <br/>
              <br/>
            <span class="cx">重选</span>
          </div>
          <div class="el-upload__tip" slot="tip">
            <div>导入说明：</div>
            <div&g