reac+antd上传/下载
2024-02-22 本文已影响0人
小灰灰_a
// index.tsx
const importProps = useMemo<UploadProps>(() => ({
accept: '.json',
showUploadList: false,
beforeUpload: (file) => {
const reader = new FileReader();
reader.readAsText(file, 'utf-8');
reader.onload = () => {
const jsonData = JSON.parse(reader.result as string);
console.log('file信息:', jsonData);
// 做一些自定义操作
...
}
return false
}
}), [])
<Upload {...importProps}>
<Button type="link">导入</Button>
</Upload>
// 下载
const handleDownload = (data: any) => {
// data 为 object
const value = JSON.stringify(data, null, "\t");
const blob = new Blob([value], { type: "application/json" });
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = "down_name.json";
link.click();
URL.revokeObjectURL(url);
};
<Button type="link" onClick={handleDownload}>下载</Button>