Question

在某些情况下，我需要即时渲染一个React组件并将其下载为图像，我开始编写一个示例来实现此目标，但似乎我正在使用的库无法生成反应组件。如果您在下面的代码中查看downloadFile函数，您将认识到我正在将React组件传递给该函数，该文件似乎已损坏，我将图像类型更改为文本，但是它不起作用：< / p>

import React, { Component } from "react";
import Eye from "./Eye";
var fileDownload = require("js-file-download");

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  downloadFile() {
    fileDownload(<Eye position="left" />, "filename.txt");
  }

  render() {
    return (
      <div className="App">
        <button onClick={this.downloadFile}>Click Me!</button>
      </div>
    );
  }
}

export default App;





import React, { Component } from "react";

class Eye extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div className={this.props.position}>
        <svg height="100" width="100">
           {" "}
          <circle
            cx="50"
            cy="50"
            r="40"
            stroke="black"
            stroke-width="3"
            fill="red"
          />
        </svg>
      </div>
    );
  }
}

export default Eye;

Answer 1

您可以尝试使用dom-to-image模块

请参见https://codesandbox.io/s/kx0z37mlo5，这是将组件下载为图像的有效示例

希望这会有所帮助

有没有一种动态创建和下载React组件的方法？

1 个答案: