javascript - 将 React google 时间线图导出为 PDF

Question

我想以 pdf 格式下载我当前的 react-google-timeline-chart 并且图表显示但不显示日期。我真的不知道如何用日期导出整个图表。我是 react-google-timeline-chart 的新手 任何帮助将不胜感激！这是我的示例代码：

import React from "react";
import ReactDOM from "react-dom";A
import Chart from "react-google-charts";
import html2canvas from 'html2canvas';
const pdfConverter = require('jspdf');

// Reference : https://developers.google.com/chart/interactive/docs/gallery/timeline
const columns = [
  { type: "string", id: "President" },
  { type: "date", id: "Start" },
  { type: "date", id: "End" }
];

const rows = [
  ["Washington", new Date(1789, 3, 30), new Date(1797, 2, 4)],
  ["Adams", new Date(1797, 2, 4), new Date(1801, 2, 4)],
  ["Jefferson", new Date(1801, 2, 4), new Date(1809, 2, 4)]
];
class App extends React.Component {

    demoFromHTML() {
    let input = window.document.getElementById('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 id="divToPDF">
        <Chart
          chartType="Timeline"
          rows={...rows}
          columns={columns}
          width="100%"
          height="400px"
          options={{
            colors: ['#98719D', '#A0BD85', '#5DBAD9'],


          }}
        />
        <div>
        <button onClick={() => this.demoFromHTML()}>PDF FILE</button>
          </div>
        </div>

      );

}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我想要的时间线图截图：

标签： javascriptreactjsgoogle-visualization