vue中文件的下载

• 下载前端静态资源
  1.将需要下载的资源放在public中
  2.在需要下载的组件A中，加入如下内容

<template>
	<div>
		<a :href="url('/用户管理-批量导入模板.xlsx')" download="用户管理-批量导入模板.xlsx">
        	<Button type="error">下载模板</Button>
     	</a>
	</div>
</template>
<script>
	export default {
		methods:{
			url(val){       //val为文件名称，需要和下载的资源名称保持一致
		      return 'http://'+window.location.host + val
		    },
		}
	}
</script>

• 通过接口下载后端资源
  1.在需要下载的组件B中，加入如下内容

<template>
	<div>
		<a-button type="primary" @click="exportfiles">模板下载</a-button>
	</div>
</template>
<script>
	import { Download } from "@/api/Download.js";  //引入Download()方法
	export default {
		methods:{
			exportfiles(){  //导出
		      Download(params).then(r=>{    //DownLoad()为封装好的请求接口，params为接口需要的参数
		           const excelUrl = window.URL.createObjectURL(new Blob([r]));   //r为接口返回的二进制流数据
		           const link = window.document.createElement('a');
		           link.href = excelUrl;
		           link.download = `组织机构批量导入模板.xlsx`;   //下载名称可自定义
		           document.body.appendChild(link);   // 兼容FireFox
		           link.click();
		           window.URL.revokeObjectURL(excelUrl);
		           link.remove();    // 兼容FireFox
		      })
		    },
		}
	}
</script>

2.新建一个Download.js文件，内容如下（axios请求封装https://blog.csdn.net/hyy4668/article/details/107509274）

import { axios } from "@/utils/request";  //引入封装好的axios请求

export function Download(data){  //接口请求配置
    return axios({
      url: `download-request-url`,
      method: 'get',
      responseType: 'blob',  //返回数据为二进制流时的响应类型
      params: data,   //参数
    })
  }