javascript - 如何在 react 中下载时在当前日期时间生成文件名

Question

我正在尝试使用以下代码使用当前日期时间生成文件名:

getFileName() {
    let d = new Date();
    let dformat = [this.padLeft(d.getMonth() + 1),
    this.padLeft(d.getDate()),
    d.getFullYear()].join('') +
      '_' +
      [this.padLeft(d.getHours()),
      this.padLeft(d.getMinutes()),
      this.padLeft(d.getSeconds())].join('');

    console.log("getCurrentDate : ", dformat);
    return "GridWidget_" + dformat + ".csv";
  }

    render() {
return(
    <CSVLink data={data} filename={this.getFileName()} className="btn btn-primary" target="_blank">Export To CSV</CSVLink>);
    }

上面代码的问题就像下载文件时没有生成带有日期时间的文件名，而是在页面加载时花费时间。我想要做的是仅当用户单击下载按钮时才生成文件名。

我知道这在时间上没有太大区别，但要求应该使用实际日期时间生成它。无法理解为什么会这样。

Answer 1

默认情况下你不能这样做因为filename Prop 是download <a /> 的属性标签是一个内置的 HTML。并在渲染时生成。

<a download="10-36-45.csv" target="_blank" href="">Export To CSV</a>

但是您可以通过使用 React Refs 来进行黑客攻击。修改 <a> 的属性标签。

export default class extends Component {
  $CSVLink = React.createRef();

  getFileName() {
    let d = new Date();
    let dformat = `${d.getHours()}-${d.getMinutes()}-${d.getSeconds()}`;

    console.log("getCurrentDate : ", dformat);
    return "GridWidget_" + dformat + ".csv";
  }

  render() {
    const data = [
      { firstname: "Ahmed", lastname: "Tomi", email: "ah@smthing.co.com" },
      { firstname: "Raed", lastname: "Labes", email: "rl@smthing.co.com" },
      { firstname: "Yezzi", lastname: "Min l3b", email: "ymin@cocococo.com" }
    ];
    return (
      <CSVLink
        onClick={() => {
          this.$CSVLink.current.link.download = this.getFileName();
        }}
        ref={this.$CSVLink}
        data={data}
        filename={this.getFileName()}
        className="btn btn-primary"
        target="_blank"
      >
        Export To CSV
      </CSVLink>
    );
  }
}

我更改 getFileName方法，因为我没有关于 this.padLeft 的信息, getFileName方法将返回当前日期，以便您可以看到第二次更改。