@mui/icons-material#FileDownload TypeScript Examples

The following examples show how to use @mui/icons-material#FileDownload. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.tsx    From Search-Next with GNU General Public License v3.0 4 votes vote down vote up 
Backup: React.FC = () => {
  const [downloadCount, setDownloadCount] = React.useState<number>(0);

  const handleBackup = () => {
    if (downloadCount > 5) {
      toast.warning('当前下载次数过多，暂停下载');
      return;
    }
    let backupData = {} as { [x: string]: string | null };
    const length = localStorage.length;
    for (let i = 0; i < length; i++) {
      const key = localStorage.key(i);
      if (key) backupData[key] = localStorage.getItem(key);
    }
    exportFile(
      JSON.stringify(backupData),
      `search.virs.xyz_backupData_${dayjs().format(
        'YYYY:MM:DD HH:mm:ss',
      )}.json`,
    );
    toast.success('导出成功');
    setDownloadCount(downloadCount + 1);
  };

  const handleFileChange = (e: any) => {
    fileReader(e.target)
      .then((res) => {
        if (res) {
          confirm({
            title: '导入数据',
            content: '导入数据将覆盖现有数据，是否继续？',
            onOk: () => {
              const data = JSON.parse(res);
              Object.keys(data).forEach((i) => {
                localStorage.setItem(i, data[i]);
              });
              toast.success('数据恢复成功');
              e.target.value = '';
            },
            onCancel: () => (e.target.value = ''),
          });
        }
      })
      .catch((err) => {
        toast.error(err);
      });
  };

  return (
    <ContentList>
      <ItemCard
        icon={<SettingsBackupRestore />}
        title="备份"
        action={
          <Button
            variant="outlined"
            size="small"
            onClick={() => handleBackup()}
            startIcon={<Download />}
          >
            下载备份文件
          </Button>
        }
      />
      <ItemCard
        icon={<FileDownload />}
        title="恢复"
        action={
          <label htmlFor="icon-button-file">
            <Input
              accept="application/json"
              id="icon-button-file"
              type="file"
              onChange={handleFileChange}
            />
            <Button
              component="span"
              variant="outlined"
              size="small"
              startIcon={<Upload />}
            >
              上传备份文件
            </Button>
          </label>
        }
      />
    </ContentList>
  );
}