vue公共下载文件方法

原创已于 2022-07-27 10:35:20 修改 · 581 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-06-08 11:21:09 首次发布

本文介绍如何在Vue项目中创建一个全局的文件下载方法，该方法可以在应用的任何页面调用，方便快捷地处理文件下载需求。

一、在main.js中定义一个公共的方法

// method: 传参方式get或post 
// url：接口地址
// name: 下载文件名
//key: 本项目中的使用情况 可不要
// data: 需要的传参数据（一般get不需要）
const exportExsl = (method,url,name,key = 'BASE_URL',data = {})=>{
  fetch(`http://${window.online_config[key] + url}`,{
    method,
    responseType: 'blob',
    headers:{
      Authorization:'Basic ' +  localStorage.getItem('Access-Token'),//定义token
      "Content-Type": "application/json;charset=utf-8",
    },
    body:method  == 'post' ? JSON.stringify(data) : null
    })
    .then(res => {   
      console.log('res.headers',res)  
        return res.blob();
    })
    .then(blob => {
        let link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = name;
        link.click();
        window.URL.revokeObjectURL(link.href);
    })
    .catch((err) => {
      throw '异常：'+ err
    });
  
}

// 导出
Vue.prototype.$exportExsl = exportExsl

二、页面中的使用方法

       <a-button class="btn_action" @click="$exportExsl('get','/terminalUser/excleTemplate','终端用户.xlsx')">
            导出
        </a-button>

  handleDownloadQrcode(blob) { 
      let list = [blob.id];
      let timestamp = new Date().getTime();
      this.$exportExsl("post","/qr_code/download",timestamp + ".zip","BASE_URL",list)
    },