1、效果图:
2、创建点击事件,并发起请求,获取模板表格文件下载url地址。
//组件
<a-button class="btn btn_width" @click="download"> 下载模板 </a-button>// 文件模板下载
import { getTemplate } from '@/api/import';
const download = () => {getTemplate({ type: 6 });
};
3、创建请求
//下载模板接口
import { request } from '@/utils/request';
import { downUrl } from '@/utils/downloadFile';let baseURL = '/api';//下载模板
export const getTemplate = async (params) => {const res = await request({url: `${baseURL}/import/template/get-import-template-by-type`,method: 'GET',params,});downUrl(res);
};
4、调用另一个方法,实现根据返回的下载地址下载表格文件。
export const downUrl = (res: any) => {const downloadPath = res;// 创建一个隐藏的 <a> 标签const downloadLink = document.createElement('a');downloadLink.style.display = 'none';document.body.appendChild(downloadLink);// 设置下载链接的 href 属性为后端返回的下载路径downloadLink.href = downloadPath;// 触发下载downloadLink.click();// 清除创建的元素document.body.removeChild(downloadLink);
};
5、 解决跨域问题
//vue.config.ts
proxy: {'/api': {target: 'baseurl地址', // 目标服务器地址changeOrigin: true, // 允许改变 OriginpathRewrite: {'^/api': '', // 重写路径,将 /api 替换为空}}},