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>
上一篇 下一篇

猜你喜欢

热点阅读