vue之下载功能

vue之下载功能

1. 首先在utils文件夹中新建一个js文件

import axios from 'axios'

import Cookies from 'js-cookie'
const baseUrl = "http://10.0.17.53:8080/cmas"
const service = axios.create({ 
    baseURL: baseUrl,
    timeout: 300000
})
let token = JSON.parse(localStorage.getItem("token"))
service.interceptors.request.use(
    config => {
        config.headers.From = "cmas-ui"
        if (token) {
            config.headers.Token = token;
        }
        return config;
    },
    error => {
        Promise.reject(error)
    }
)

service.interceptors.response.use(
    response =>{
        const res = response.data
        const status = response.status
        if(status == 200){
            Cookies.set(token, token)
            return response.data
        }
    },
    error =>{
        return Promise.reject(error)
    }
)
export default service

2. 新建vue文件

<template>
  <div>
    <button class="baoli_download_btn" @click="baoliDownLoad(0,'保理导入模板.xlsx')">保理导入模板下载</button>
    <button class="maoyi_download_btn" @click="baoliDownLoad(1,'贸易融资导入模板.xlsx')">贸易融资导入模板下载</button>
  </div>
</template>

<script>
import request from "@/utils/request";//引入上面js文件的路径（根据实际更改）
export default {
name: 'downLoad',
components: {},
  data () {
    return {
    };
  },
created(){
},
methods: {
  // 模板下载（type是与后端约定的，0为保理，1为贸易融资；name是下载时execl的名字）
    baoliDownLoad(type,name) {
      request({
        url: "/xd/loaninfoBatchApply/downTemplate",//请求路径，自动和js文件中的baseUrl拼接
        method: "get",
        responseType: "blob",
        params: { type:type },
      }).then((res) => {
        let link = document.createElement("a");
        //ArrayBuffer 转为 Blob
        let blob = new Blob([res], {
          type: "application/vnd.ms-excel",
        });
        link.style.display = "none";
        link.href = URL.createObjectURL(blob);
        if ("msSaveOrOpenBlob" in navigator) {
          window.navigator.msSaveOrOpenBlob(blob, name);
        } else {
          link.setAttribute("download", name);
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        }
      });
    },
},
}

</script>
<style  lang="scss" scoped>
.baoli_download_btn {
  width: 148px;
  height: 32px;
  font-size: 16px;
  background: #e82323;
  border-radius: 2px;
  margin-right: 16px;
}
</style>