1 上传

解析csv文件：

import { parse } from 'papaparse';export function parseCSV(file: File): Promise<string[][]> {return new Promise((resolve, reject) => {const reader = new FileReader();reader.onload = () => {const csvData = reader.result;if (typeof csvData !== 'string' || csvData.length === 0) return reject(new Error('File contain no record'));return parse<string[]>(csvData, {skipEmptyLines: true,complete: ({ data }) => resolve(data),error: reject,});};reader.readAsText(file);});
}

upload组件：

<ProFormUploadButtonlabel={<>User ID(s)<Tooltip title="Download Template"><Buttontype="primary"style={{ marginLeft: 6 }}shape="circle"icon={<DownloadOutlined />}size="small"onClick={handleTemplate}/></Tooltip></>}name="upload"rules={[{required: true,message: '',},]}title="Upload File"fieldProps={{beforeUpload: handleUpload, // 不需要直接上传到服务器，前端直接解析csv文件onRemove: handleRemoveFile,maxCount: 1,fileList,accept: '.csv', // 支持的文件格式listType: 'text', // 上传后的文件列表展示的ui}}width={600}className="whitelist-upload"
/>const handleUpload = async (file: any) => {try {// 解析csv文件const parsedData = await parseCSV(file);console.log('=== 2 parsedData:', parsedData);// 第一行为表头const newIds = parsedData.map((cells) => cells[0]).filter((_, idx) => idx !== 0).join(',');if (!newIds.length) {message.error({ message: 'The file is empty' });return;}// 回显到表单上面form.setFieldsValue({ user_ids: newIds });// 用于展示上传后的文件列表setFileList([{ uid: file?.name, name: file?.name } as UploadFile]);} catch (_) {message.error({ message: 'Error parsing the file' });}
};const handleRemoveFile = () => {setFileList([]);form.setFieldsValue({ user_ids: undefined });
};

2 下载

使用Blod下载。

export const createCsvTemplate = (headerFields: string[], fileName: string) => {const blob = new Blob([`\ufeff${headerFields.join(',')}`], {type: 'text/csv,charset=UTF-8',});const csvUrl = URL.createObjectURL(blob);const link = document.createElement('a');link.download = `${fileName}.csv`;link.href = csvUrl;link.click();
};// 直接调用即可
const handleTemplate = () => {const fields = ['UID'];const fileName = 'template_uid_list';createCsvTemplate(fields, fileName);
};