React antd 实现导入导出

汤姆丁1111

已于 2022-09-08 09:38:59 修改

阅读量846

点赞数

文章标签： react.js javascript 前端

于 2022-09-08 09:36:44 首次发布

本文链接：https://blog.csdn.net/weixin_53841730/article/details/126758216

版权

导入：


import { Button, Upload } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import type { UploadProps } from 'antd';

// 导入
const props: UploadProps = {
    onRemove: (file) => {
      const index = fileList.indexOf(file);
      const newFileList = fileList.slice();
      newFileList.splice(index, 1);
      setFileList(newFileList);
    },
    beforeUpload: (file) => {
      // setFileList([...fileList, file]);
      const formData = new FormData();
      console.log(formData, 'formData')
      formData.append('multipartFile', file);
      console.log(formData, 'formData')
      importService(formData).then((res) => {
        console.log(res);
        if (res.success) {
          // 刷新页面
          setState({
          });
        }
      });
      return false;
    },
    fileList,
  };



return {
   <Upload {...props}>
          <Button icon={<UploadOutlined />}>导入</Button>
   </Upload>
}

使用file-saver导出文件

一、安装

    npm install file-saver --save
	# 如使用TS开发，可安装file-saver的TypeScript类型定义
	npm install @types/file-saver --save-dev

二、使用

导入 saveAs



import { saveAs } from 'file-saver';

  // 导出
  const handleExport = (data: LocalObject.Application) => {
    const params = {
      applicationId: data.id,
    };//exportService 调接口
    exportService(params).then((res) => {
      const fileStream = JSON.stringify(res);
      const blob = new Blob([fileStream]);
      saveAs(blob, `${data.name}.json`);
    });
  };


return {
    <a onClick={() => handleExport(item)}>
     <VerticalAlignBottomOutlined key="export" title="导出" />
    </a>,
}