Skip to content

文件工具

文件下载

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, "导出数据"),
      },
    ],
  },
});

Released under the MIT License.