Javascript 在React中以PNG格式下载图表，而不覆盖DOM

我想下载一个用

recharts

创建的图表作为png图像。如果我在DOM上写的话，我会成功的。我想下载图片。这是我到目前为止通过这篇文章得到的：

我有一个可点击的元素来下载png和组件中的图表：

return (
      <div>
        <h1
          onClick={() => this.handleDownload()}
        >
          Download chart
        </h1>
        <LineChart
          ref={(chart) => this.currentChart = chart}
          width={500}
          height={300}
          data={data}
          margin={{
            top: 5, right: 30, left: 20, bottom: 5,
          }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="name" />
          <YAxis />
          <Tooltip />
          <Legend />
          <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{ r: 8 }} />
          <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
        </LineChart>
      </div>

    )

基本上，在我的组件中，我设置了画布对象的状态：

class DownloadChart extends React.Component {
  state = {
    imageData: ''
  }
  async componentDidMount() {
    await this.handleDownload()
  }

我去掉了

document.write

指令，所以只要在装入组件时生成canvas对象，并将其附加到

href

属性中

<a href={aTag} download="download" >Download as png</a>

---

关于如何下载png图像有什么建议吗？这两种方法我都不能使它工作

试着去掉

aTag

中的多余引号

i、 e

---

我一直在试图找出如何实现这一点，这个问题有95%的解决方案，我需要最终使它工作

您可以使用下载PNG

在

handleDownload

中，将

document.write（“”）

替换为

FileSaver.saveAs（pngData，“test.png”）

下载在CodeSandbox中不起作用，因此您必须首先打开sandbox，单击右上角的“在新窗口中打开”，然后尝试下载：

<a href={aTag} download="download" >Download as jpeg</a>

const aTag = `'javascript:${this.state.imageData}.toDataURL('image/jpeg');'`

class DownloadChart extends React.Component {
  state = {
    imageData: ''
  }
  async componentDidMount() {
    await this.handleDownload()
  }

<a href={aTag} download="download" >Download as png</a>

const aTag = `javascript:${this.state.imageData}.toDataURL('image/jpeg');`