vue如何通過$http的post方法請(qǐng)求下載二進(jìn)制的Excel文件

這篇具有很好參考價(jià)值的文章主要介紹了vue如何通過$http的post方法請(qǐng)求下載二進(jìn)制的Excel文件。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

方式一：?jiǎn)为?dú)接口,接口封裝特定的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

//下載上報(bào)的模板
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')//創(chuàng)建一個(gè)a 虛擬標(biāo)簽
        var href = window.URL.createObjectURL(blob) // 創(chuàng)建下載的鏈接
        downloadElement.href = href;
        downloadElement.download = "基金預(yù)算編報(bào)模板"; // 下載后文件名
        document.body.appendChild(downloadElement)
        downloadElement.click() // 點(diǎn)擊下載
        document.body.removeChild(downloadElement) // 下載完成移除元素
        window.URL.revokeObjectURL(href) // 釋放掉blob對(duì)象
    });
},

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>點(diǎn)擊上傳</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>導(dǎo)入說明：</div>
            <div>1.請(qǐng)確定使用最新版本導(dǎo)入數(shù)據(jù)，否則會(huì)提交失敗。</div>
            <div>2.請(qǐng)按模板中的約束條件操作，否則會(huì)提交失敗。</div>
          </div>
        </el-upload>
    <span slot="footer" class="dialog-footer">
      <!-- <el-button size="mini" @click="dialogVisible = false">取消</el-button> -->
      <el-button size="mini" type="primary" @click="submitUpload()">提交</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { Message } from "element-ui";
import {getReport} from '@/services/fumtService/fundRunManage/fundCalFormulationService';
import { formatBytes } from "@/utils/util";
export default {
  name: "fundCalUpload",
  data() {
    return {
      dialogVisible: false,
      editForm:{},
      limit:1,
      uploadFlag:false,
      fileList: [
        // {name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}
      ],
      title:'',
      fileName:'',
      fileSize:'',
    };
  },
  methods: {
    beforeUpload(file) {
      // console.log(file);
      // var testmsg = file.name.substring(file.name.lastIndexOf('.')+1);
      // const extension = testmsg === 'xlsx';
      // const isLt10M = file.size / 1024 / 1024 < 10;
      // if(!extension) {
      //   Message.error('上傳文件只能是 .xlsx 格式');
      // }
      // if(!isLt10M) {
      //   Message.error('上傳文件大小不能超過 10MB!');
      // }
    },
    submitUpload() {
        if(!this.uploadFlag){
            Message.error("請(qǐng)先選擇文件！");
        } else{
            this.$refs.upload.submit();
        }
    },
    handleRemove(file, fileList) {
        this.uploadFlag = false
    },
    handleChange(file, fileLists){
      console.log("----------file",file);
      console.log("----------fileLists",fileLists);
        var testmsg = file.name.substring(file.name.lastIndexOf('.')+1);
        const extension = testmsg === 'xlsx';
        const isLt10M = file.size / 1024 / 1024 < 10;
        if(!extension) {
          Message.error('上傳文件只能是 .xlsx 格式');
        }
        if(!isLt10M) {
          Message.error('上傳文件大小不能超過 10MB!');
        }
        if(extension && isLt10M){
          this.fileName=file.name;
          this.fileSize=formatBytes(file.size,2);
          this.uploadFlag = true;
        }
        return extension && isLt10M;
    },

    handleUpload(file) {
      let formDatas = new FormData();
      formDatas.append("file", file.file);
      formDatas.append("rid", this.editForm.rid);//這"file" 代表參數(shù)名
      // formDatas.append("user_id", 18); //把后端需要參數(shù)全部用這個(gè)形式push進(jìn)去
      getReport(formDatas).then((res) => {
        Message.success('上報(bào)成功');
        this.dialogVisible = false;
      }).catch((err)=>{
        Message.error(err);
      })
      
    },
    handleExceed(files, fileList) {
      this.handleChange(files[0], fileList);
      // this.$message.warning(`當(dāng)前限制選擇 1 個(gè)文件，本次選擇了 ${files.length} 個(gè)文件，共選擇了 ${files.length + fileList.length} 個(gè)文件`);
      // Message.warning(`當(dāng)前限制選擇 1 個(gè)文件！`);
    },
    handleClose: function (done) {
        let self = this
        Bus.$emit("delCurrentTab", "businessQuery/CntrDetail");
    },
    closed(){
      this.uploadFlag=false;
      this.fileList= [];
      this.title='';
    },
    show(data,title) {
      this.title=title;
      this.dialogVisible = true;
      this.editForm = JSON.parse(JSON.stringify(data));
    },
    submitForm(){
      this.$refs.upload.submit();
    }
  },
};
</script>

<style scoped lang="less">
/deep/ .el-form-item__content {
  width: 100%;
}

/deep/ .el-upload{
  width: 100%;
}
/deep/ .el-upload-dragger{
  width: 100%;
}
.my-el-upload__text:focus{
  outline: none!important;
}
.my-el-upload__text{
  // outline: none!important;
  margin-top:50px;
  color:#606255;
  .filename{
    margin-right: 20px;
    color: #303133;
    text-decoration: underline;
  }
  .cx{
    color: #1b65b9;
  }
}

</style>

方式二、封裝通用的底層的service.js

重點(diǎn)：

instanceName: "exportExcel",導(dǎo)出excel文件

instanceName: "downloadLog",下載.log后綴的txt文件

// 可聲明axios的default配置
export const defaults = defineRequestConfig([
  {
    /**
     * 對(duì)參數(shù) `params` 進(jìn)行序列化
     * axios 默認(rèn)做參數(shù)序列化時(shí)會(huì)進(jìn)行encode 導(dǎo)致某些接口中文參數(shù)問題，暫時(shí)使用外部覆蓋方式解決
     */
    paramsSerializer: (params) => {
      return qs.stringify(params, { arrayFormat: 'repeat', encode: false })
    },
    // 多實(shí)例配置
    interceptors: {
      request: {
        // 設(shè)置請(qǐng)求頭信息
        onConfig: (config) => {
          config.headers.Accept = 'application/json'
          config.headers['Content-Type'] = 'application/json'
          config.headers['X-Requested-With'] = 'XMLHttpRequest'
          if (!config.data) config.data = {}
          return config
        }
      },
      response: {
        // 請(qǐng)求失敗
        onError: (error) => {
          const { response } = error
          const { data } = response

          // 處理請(qǐng)求錯(cuò)誤的返回結(jié)果
          const errorObj = {
            status: response?.status,
            statusText: response?.statusText,
            errorCode: data?.errorCode ?? data?.error,
            errorMessage:
              data?.errorMessage ?? data?.message ?? data?.error ?? data
          }

          // 判斷登錄超時(shí)
          if (response && response.status === 401) {
            console.error('登錄超時(shí)', response)
            const loginUrl = response?.headers?.loginurl || ''

            if (loginUrl) {
              // 跳轉(zhuǎn)登錄頁
              window.location.href = loginUrl
              return Promise.reject(error)
            } else {
              // 頁面刷新
              window.location.reload()
              return Promise.reject(error)
            }
          }

          return Promise.reject(errorObj)
        }
      }
    }
  },
  {
    paramsSerializer: (params) => {
      return qs.stringify(params, { arrayFormat: 'repeat', encode: true })
    },
    instanceName: "test",
    baseURL: '/test',
    interceptors: {
      request: {
        // 設(shè)置請(qǐng)求頭信息
        onConfig: (config) => {
          config.headers.Accept = 'application/json'
          config.headers['Content-Type'] = 'application/json'
          config.headers['X-Requested-With'] = 'XMLHttpRequest'
          if (!config.data) config.data = {}
          return config
        }
      },
      response: {
        // 請(qǐng)求失敗
        onError: (error) => {
          const { response } = error
          const { data } = response

          // 處理請(qǐng)求錯(cuò)誤的返回結(jié)果
          const errorObj = {
            status: response?.status,
            statusText: response?.statusText,
            errorCode: data?.errorCode ?? data?.error ?? data?.code,
            errorMessage:
              data?.errorMessage ?? data?.message ?? data?.error ?? data
          }

          // 判斷登錄超時(shí)
          if (response && response.status === 401) {
            console.error('登錄超時(shí)', response)
            const loginUrl = response?.headers?.loginurl || ''

            if (loginUrl) {
              // 跳轉(zhuǎn)登錄頁
              window.location.href = loginUrl
              return Promise.reject(error)
            } else {
              // 頁面刷新
              window.location.reload()
              return Promise.reject(error)
            }
          }
          return Promise.reject(errorObj)
        }
      }
    }
  },
  {
    paramsSerializer: (params) => {
      return qs.stringify(params, { arrayFormat: 'repeat', encode: false })
    },
    instanceName: "exportExcel",
    baseURL: '/test',
    interceptors: {
      request: {
        // 設(shè)置請(qǐng)求頭信息
        onConfig: (config) => {
          config.headers.Accept = 'application/json'
          config.responseType = "blob"
          config.headers['Content-Type'] = 'application/json;charset=UTF-8'
          config.headers['X-Requested-With'] = 'XMLHttpRequest'
          if (!config.data) config.data = {}
          return config
        }
      },
      response: {
        onResponse: (response) => {
          const { data } = response;
          const str = response?.headers['content-disposition']
          const oldFileName = buildFileName(str)
          const filename = response?.headers['Kyy-Hosp-Dip-Filename']
          response.data = {
            data: data,
            filename: filename ? filename : oldFileName
          }
          return response
        },
        // 請(qǐng)求失敗
        onError: (error) => {
          const { response } = error
          const { data } = response

          // 處理請(qǐng)求錯(cuò)誤的返回結(jié)果
          const errorObj = {
            status: response?.status,
            statusText: response?.statusText,
            errorCode: data?.errorCode ?? data?.error ?? data?.code,
            errorMessage:
              data?.errorMessage ?? data?.message ?? data?.error ?? data
          }

          // 判斷登錄超時(shí)
          if (response && response.status === 401) {
            console.error('登錄超時(shí)', response)
            const loginUrl = response?.headers?.loginurl || ''

            if (loginUrl) {
              // 跳轉(zhuǎn)登錄頁
              window.location.href = loginUrl
              return Promise.reject(error)
            } else {
              // 頁面刷新
              window.location.reload()
              return Promise.reject(error)
            }
          }
          return Promise.reject(errorObj)
        }
      }
    }
  },
  {
    paramsSerializer: (params) => {
      return qs.stringify(params, { arrayFormat: 'repeat', encode: true })
    },
    instanceName: "downloadLog",
    baseURL: '/test',
    interceptors: {
      request: {
        // 設(shè)置請(qǐng)求頭信息
        onConfig: (config) => {
          config.headers.Accept = 'application/json'
          config.headers['Content-Type'] = 'application/octet-stream'
          if (!config.data) config.data = {}
          return config
        }
      },
      response: {
        onResponse: (response) => {
          const { data } = response;
          const filename = response?.headers['Kyy-Hosp-Dip-Filename']
          response.data = {
            data: data,
            filename: filename
          }
          return response
        },
        // 請(qǐng)求失敗
        onError: (error) => {
          console.log('error', error);
          const { response } = error
          const { data } = response

          // 處理請(qǐng)求錯(cuò)誤的返回結(jié)果
          const errorObj = {
            status: response?.status,
            statusText: response?.statusText,
            errorCode: data?.errorCode ?? data?.error ?? data?.code,
            errorMessage:
              data?.errorMessage ?? data?.message ?? data?.error ?? data
          }

          // 判斷登錄超時(shí)
          if (response && response.status === 401) {
            console.error('登錄超時(shí)', response)
            const loginUrl = response?.headers?.loginurl || ''

            if (loginUrl) {
              // 跳轉(zhuǎn)登錄頁
              window.location.href = loginUrl
              return Promise.reject(error)
            } else {
              // 頁面刷新
              window.location.reload()
              return Promise.reject(error)
            }
          }
          return Promise.reject(errorObj)
        }
      }
    }
  },
])

const buildFileName = (disposition) => {
  let result = null;
  const list = disposition.split(";")
 
  list.forEach(item => {
    if (item.indexOf("filename=") != -1) {
      const name = item.split("filename=");
      result = decodeURI(name[1])
    }
  });
  return result;
}

封裝接口

 export function exportResult(data) {
    return httpApi({
        instanceName: 'exportExcel',
        url: '/**/',
        method: 'post',
        data
    })
}

 export function downloadSyncLog(params) {
    return httpApi({
        instanceName: 'downloadLog',
        url: '/**/',
        method: 'get',
        params
    })
}

代碼中使用：文章來源地址http://www.zghlxwxcb.cn/news/detail-799815.html

// 導(dǎo)出數(shù)據(jù)excel
exportData() {
  let params = this.getSearchParams();
  params.count = this.pagesUp.total;//導(dǎo)出下載必填
  exportResult(params).then(res => {
    //這個(gè)里面的data 的二進(jìn)制文件 創(chuàng)建一個(gè)文件對(duì)象
    let blob = new Blob([res.data || ""], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
    let downloadElement = document.createElement('a')//創(chuàng)建一個(gè)a 虛擬標(biāo)簽
    let href = window.URL.createObjectURL(blob) // 創(chuàng)建下載的鏈接
    downloadElement.href = href;
    downloadElement.download = "test文件名"; // 下載后文件名
    document.body.appendChild(downloadElement)
    downloadElement.click() // 點(diǎn)擊下載
    document.body.removeChild(downloadElement) // 下載完成移除元素
    window.URL.revokeObjectURL(href) // 釋放掉blob對(duì)象
    this.$message.success('導(dǎo)出成功')
  }).catch(e => {
    this.$message.error('導(dǎo)出失敗')
  })
},
// 日志下載
download(row){
  downloadSyncLog({syncTaskId:row.syncTaskId}).then(res => {
    let blob = new Blob([res.data || ""], {
        type: 'application/text'
    });
    let downloadElement = document.createElement('a')//創(chuàng)建一個(gè)a 虛擬標(biāo)簽
    let href = window.URL.createObjectURL(blob) // 創(chuàng)建下載的鏈接
    downloadElement.href = href;
    downloadElement.download = row.syncTaskId+'.log'; // 下載后文件名
    document.body.appendChild(downloadElement)
    downloadElement.click() // 點(diǎn)擊下載
    document.body.removeChild(downloadElement) // 下載完成移除元素
    window.URL.revokeObjectURL(href) // 釋放掉blob對(duì)象
    this.$message.success('下載成功')
  }).catch(e => {
    this.$message.error('下載失敗')
  })
},

到了這里，關(guān)于vue如何通過$http的post方法請(qǐng)求下載二進(jìn)制的Excel文件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！