时间戳

首页 > 解决方案 > 使用 react-admin 从 API 响应的数据中下载文件

reactjs - 使用 react-admin 从 API 响应的数据中下载文件

问题描述

我正在尝试在我的 react-admin 面板的 AppBar 中创建一个自定义按钮来下载数据库的转储。API 的响应是一个 json，其中包含有关请求的信息以及数据库的内容。

如何使用包含数据的 json 字段从客户端开始下载？我暂时这样做了：

const CustomAppBar = withStyles(styles)(({ classes, ...props }) => {
  const dumpDatabase = () => {
    fetch(config['api_url'] + '/dump', { method: 'GET' })
    .then(data =>  data.json())
    .then((json) => {
      console.log(json['data']);
    });
  }

  return (
    <AppBar {...props}>
      <Typography
            variant="inherit"
            color="inherit"
            className={classes.title}
            id="react-admin-title"
      />
      <span className={classes.spacer} />
      <Tooltip title="Dump Database">
        <IconButton color="inherit" onClick={dumpDatabase} >
          <SaveIcon />
        </IconButton>
      </Tooltip>
    </AppBar>
  );
});

这console.log(json['data']);是我试图替换为下载的部分。一般来说，我对 reat-admin 和 javascript 的经验非常低...

标签： reactjsreact-admin

解决方案

一段时间后，我找到了一个可以使用的有效解决方案。您必须创建一个 blob 对象并将其分配给链接，然后通过脚本自动单击它。

dumpDatabase = () => {
    fetch(config['api_url'] + '/dump', { method: 'GET' })
    .then(data =>  data.json())
    .then(json => {
      if (json['result'] === 'success')
      {
          // Creating the blob file and its url
          var blob = new Blob([json['data']], {type: 'application/json'}); 
          let url = window.URL.createObjectURL(blob);

          var date = Moment(new Date()).format("YYYY_MM_DD-HH_mm_ss");

          // Creating the hyperlink and auto click it to start the download
          let link = document.createElement('a');
          link.href = url;
          link.download = 'dump_' + date + '.json';
          link.click();
      }
    });
  }

推荐阅读