美文网首页
reac+antd上传/下载

reac+antd上传/下载

作者: 小灰灰_a | 来源:发表于2024-02-22 09:35 被阅读0次
// 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>

相关文章

网友评论

      本文标题:reac+antd上传/下载

      本文链接:https://www.haomeiwen.com/subject/thgwadtx.html