尝试使用 Chart Js 和 React 导出图表但出现错误

Question

我正在尝试使用 Chart JS 导出图表并将 React 转换为 PDF，但我收到错误消息，指出元素未附加到文档，而且我看不到我没有附加元素的位置。

这是代码：

import React, { Component } from "react";
import { Bar, Line, Pie } from "react-chartjs-2";
import html2canvas from "html2canvas";
const pdfConverter = require("jspdf");

class Chart extends Component {
state = {
chartData: {
  labels: [
    "Podgorica",
    "Belgrade",
    "New York",
    "London",
    "Paris",
    "Stockholm",
    "Berlin"
  ],
  datasets: [
    {
      label: "Population",
      data: [250000, 1300000, 8600000, 8136000, 2140000, 965000, 3575000],
      backgroundColor: [
        "rgba(255, 99, 132, 0.6)",
        "rgba(54, 162, 235, 0.6)",
        "rgba(255, 206, 86, 0.6)",
        "rgba(75, 192, 192, 0.6)",
        "rgba(153, 102, 255, 0.6)",
        "rgba(255, 159, 64, 0.6)",
        "rgba(255, 99, 132, 0.6)"
      ]
    }
  ]
}
};

demoFromHTML() {
let input = window.document.getElementsByClassName("divToPDF");
html2canvas(input).then(canvas => {
  const imgData = canvas.toDataURL("image/png");
  const pdf = new pdfConverter("l", "pt");
  pdf.addImage(imgData, "JPEG", 15, 110, 800, 250);
  pdf.save("test.pdf");
});
}

render() {
return (
  <div className="divToPDF">
    <Bar
      data={this.state.chartData}
      options={{
        title: {
          display: true,
          text: "Cities in world",
          fontSize: 25
        },
        legend: {
          display: true,
          position: "right"
        }
      }}
      height={50}
    />
    <div>
      <button onClick={() => this.demoFromHTML()}>PDF FILE</button>
    </div>
  </div>
);
  }
   }

    export default Chart;

这是我遇到的错误 -

谁能帮我理解为什么我会收到这样的错误？正如我已经为 html2canvas 提供了目标文档的参数。

Answer 1

let input = window.document.getElementsByClassName("divToPDF"); 实际上为您提供了一个包含 HTML 个元素的数组，而 html2canvas 只需要一个元素。

您的问题已解决 let input = window.document.getElementsByClassName("divToPDF")[0];

Here 一个工作代码和盒子

尝试使用 Chart Js 和 React 导出图表但出现错误

Trying to export chart with Chartjs and React but getting erorr

javascript

html2canvas

reactjs

chart.js