文件工具
文件下载
typescript
import { downloadFile } from "vue-admin-kit";
// 下载模板
await downloadFile(api.downloadTemplate, "导入模板");
// 下载文件名:导入模板_2025-12-10_14-30.xlsx
// 带参数的下载
await downloadFile(() => api.exportUsers({ status: "1" }), "用户列表", "xlsx");
// 下载 PDF
await downloadFile(() => api.downloadContract(id), "合同文件", "pdf");
// 下载 ZIP
await downloadFile(() => api.downloadBatch(ids), "批量下载", "zip");Excel 文件选择
typescript
import { handleFileChangeExcel } from "vue-admin-kit";
// 打开文件选择对话框,选择 Excel 文件
const file = await handleFileChangeExcel();
if (file) {
// 处理文件
const formData = new FormData();
formData.append("file", file);
await importApi(formData);
}导入导出示例
typescript
const pageTemplateRef = ref<PageTemplateExposed>();
// 导入文件
const handleImport = () => {
pageTemplateRef.value?.importFile(
importApi, // 导入 API
"用户导入模板", // 模板名称
() => {
// 成功回调
pageTemplateRef.value?.handleSearch();
}
);
};
// 导出文件
const handleExport = () => {
pageTemplateRef.value?.downloadFile(
() => exportApi(searchParams), // 导出 API
"用户数据" // 文件名
);
};在工具栏中使用
typescript
useState({
tableOptions: {
tableOperationConfig: [
{
title: "导入",
icon: "Upload",
onClick: () => pageTemplateRef.value?.importFile(importApi, "导入模板"),
},
{
title: "导出",
icon: "Download",
onClick: () =>
pageTemplateRef.value?.downloadFile(exportApi, "导出数据"),
},
],
},
});