将React Google时间轴图表导出为PDF

时间:2019-05-22 11:25:38

标签: javascript reactjs google-visualization google-timeline-chart

我想以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);

Current PDF that is generating:

我想要的时间表图表的截图:

enter image description here

0 个答案:

没有答案