vue3+ant design vue实现表格导出（后端返回文件流类型导出）

本文主要是介绍vue3+ant design vue实现表格导出（后端返回文件流类型导出），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、之前的博客介绍了，依据页面展示的table表格数据为基础展示表格导出，今天介绍下后端返回文件流来实现表格导出。

<a-button class="btn" type="primary" @click="exportData1">导出</a-button>import {ExportTheEmployeesTab } from '@/api/import';
// 导出import { downExcelUrl } from '@/utils/downloadFile';const searchRef = ref();const exportData1 = () => {const params = {staffName: formState.value.staffName,staffTag: formState.value.staffTag,staffDept: formState.value.staffDept,};// 导入方法downExcelUrl(ExportTheEmployeesTab(), params, '员工标签');};

//downloadFile.ts
import qs from 'qs';
export const downExcelUrl = (url, params, name) => {console.log('url', url, '参数', params, '文件名', name);if (params) {url += `?${qs.stringify(params)}`;}const elink = document.createElement('a'); // 创建a标签console.log('链接', url);elink.style.display = 'none';elink.download = name;elink.href = url;document.body.appendChild(elink);elink.click(); // 触发链接document.body.removeChild(elink);
};

import { request } from '@/utils/request';
let baseURL = '/api';
//导出员工标签
export const ExportTheEmployeesTab = () => {return `${baseURL}/staff-tag/export-tag`;
};

这篇关于vue3+ant design vue实现表格导出（后端返回文件流类型导出）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---