vue文件下载的两种方式/vue文件流下载、导出/vue地址下载

写在前面

本文实现文件下载的两种方式。第一种：文件流形式，第二种接口返回url地址

一、文件流形式( responseType: 'blob',)

js文件封装axios：

export function controlsExport(params) { //微站站点导出
  return request({
    responseType: 'blob',
    url: '/ebap-business/a/control/exportControl',
    method: 'post',
    data:params
  })
}

image.png

vue文件引入axios api：
import {controlsExport} from '@/api/daManage'
vue文件调用方法：

methods: {
   exportExl(){
        controlsExport(this.listQuery).then(response => {
              const blob = new Blob([response]);//new Blob([res])中不加data就会返回下图中[objece objece]内容（少取一层）
              const fileName = '模板.xls';//下载文件名称
              const elink = document.createElement('a');
              elink.download = fileName;
              elink.style.display = 'none';
              elink.href = URL.createObjectURL(blob);
              document.body.appendChild(elink);
              elink.click();
              URL.revokeObjectURL(elink.href); // 释放URL 对象
            });
}
}

二、接口返回url地址(正常接口获取就行)

methods: {
 handleDownload(row) {
         loadFile({id:row.id}).then(res =>{
           const ele = document.createElement('a');
           ele.setAttribute('href', res.data); //设置下载文件的url地址
           let str=res.data.substring(res.data.lastIndexOf("/"));
           let str2=str.split('/')[1];
           ele.setAttribute('download',str2);//用于设置下载文件的文件名
           ele.click();
         })
     }
}

image.png