Reactjs 有没有办法将react-chartjs-2图表转换为pdf格式？

我正在使用一个名为react-ChartJS2的库，有人建议让图表可以下载。有没有办法将图表转换为PDF或任何其他格式？

这是使用react-chartjs-2的示例代码 您需要安装：

npm i html2canvas

及

代码：

import React，{Component}来自“React”；
从“react dom”导入react dom；
从“react-chartjs-2”导入{Bar}；
从“html2canvas”导入html2canvas；
const pdfConverter=require（“jspdf”）；
类图扩展组件{
cData={
标签：[“L1”、“L2”、“L3”、“L4”、“L5”]，
数据集：[
{
标签：“标签”，
数据：[100150123170162]，
背景颜色：[“红色”、“绿色”、“黄色”、“蓝色”、“橙色”、“红色”]
}
]
};
div2PDF=e=>{
/////////////////////////////
//如果需要，请隐藏/显示按钮
/////////////////////////////
常数但=e.目标；
但是.style.display=“无”；
让输入=window.document.getElementsByCassName（“div2PDF”）[0]；
html2canvas（输入）。然后（画布=>{
const img=canvas.toDataURL（“image/png”）；
常量pdf=新的pdfConverter（“l”、“pt”）；
pdf.addImage(
img，
“巴布亚新几内亚”，
input.offsetLeft，
input.offsetTop，
input.clientWidth，
input.clientHeight
);
pdf.save（“chart.pdf”）；
但是.style.display=“block”；
});
};
render（）{
返回(
this.div2PDF（e）}>export2pdf
);
}
}
导出默认图表；
render（，document.getElementById（“根”））；

---

回答输出：

这是使用react-chartjs-2的示例代码 您需要安装：

npm i html2canvas

及

代码：

import React，{Component}来自“React”；
从“react dom”导入react dom；
从“react-chartjs-2”导入{Bar}；
从“html2canvas”导入html2canvas；
const pdfConverter=require（“jspdf”）；
类图扩展组件{
cData={
标签：[“L1”、“L2”、“L3”、“L4”、“L5”]，
数据集：[
{
标签：“标签”，
数据：[100150123170162]，
背景颜色：[“红色”、“绿色”、“黄色”、“蓝色”、“橙色”、“红色”]
}
]
};
div2PDF=e=>{
/////////////////////////////
//如果需要，请隐藏/显示按钮
/////////////////////////////
常数但=e.目标；
但是.style.display=“无”；
让输入=window.document.getElementsByCassName（“div2PDF”）[0]；
html2canvas（输入）。然后（画布=>{
const img=canvas.toDataURL（“image/png”）；
常量pdf=新的pdfConverter（“l”、“pt”）；
pdf.addImage(
img，
“巴布亚新几内亚”，
input.offsetLeft，
input.offsetTop，
input.clientWidth，
input.clientHeight
);
pdf.save（“chart.pdf”）；
但是.style.display=“block”；
});
};
render（）{
返回(
this.div2PDF（e）}>export2pdf
);
}
}
导出默认图表；
render（，document.getElementById（“根”））；

---

回答输出：

我得到一个错误，说

pdfconverter

不是一个函数。我刚才补充说

从顶部的“jsPDF”导入jsPDF

，而不是

const pdf=new pdfConverter（“l”、“pt”）

我写了
constpdf=newjspdf（“l”，“pt”）现在它工作了。
我收到一个错误，说
pdfconverter
不是一个函数。我刚才补充说
从顶部的“jsPDF”导入jsPDF
，而不是
const pdf=new pdfConverter（“l”、“pt”）

我写了
constpdf=newjspdf（“l”，“pt”）现在它可以工作了

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

class Chart extends Component {
  cData = {
    labels: ["L 1", "L 2", "L 3", "L 4", "L 5"],
    datasets: [
      {
        label: "Label",
        data: [100, 150, 123, 170, 162],
        backgroundColor: ["red", "green", "yellow", "blue", "orange", "red"]
      }
    ]
  };

  div2PDF = e => {
    /////////////////////////////
    // Hide/show button if you need
    /////////////////////////////

    const but = e.target;
    but.style.display = "none";
    let input = window.document.getElementsByClassName("div2PDF")[0];

    html2canvas(input).then(canvas => {
      const img = canvas.toDataURL("image/png");
      const pdf = new pdfConverter("l", "pt");
      pdf.addImage(
        img,
        "png",
        input.offsetLeft,
        input.offsetTop,
        input.clientWidth,
        input.clientHeight
      );
      pdf.save("chart.pdf");
      but.style.display = "block";
    });
  };

  render() {
    return (
      <div>
        <div className="div2PDF">
          <Bar
            data={this.cData}
            options={{
              title: {
                display: true,
                text: "Chart to PDF Demo",
                fontSize: 32
              },
              legend: {
                display: true,
                position: "right"
              }
            }}
            height={200}
          />
        </div>
        <div>
          <button onClick={(e) => this.div2PDF(e)}>Export 2 PDF</button>
        </div>
      </div>
    );
  }
}

export default Chart;

ReactDOM.render(<Chart />, document.getElementById("root"));