如何在浏览器中使用React函数式组件打印react-chartjs-2柱状图

Got it, let's fix this! The error you're seeing about "react-to-print only working with class components" is almost certainly from using an older version of the library. The latest releases of react-to-print fully support functional components with React hooks. Here's a step-by-step solution tailored to your bar chart:

Step 1: Update or Install react-to-print #

First, make sure you have the most recent version installed to access functional component support:

npm install react-to-print --save
# or
yarn add react-to-print

Step 2: Modify Your Bar Chart Component #

We'll use the useRef hook to target the chart's container, and use the ReactToPrint component to handle the print trigger and content capture:

import React, { useRef } from "react";
import { Bar } from "react-chartjs-2";
import { ReactToPrint } from "react-to-print";

// 柱状图数据集
const data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fill: false,
            backgroundColor: "rgba(75,192,192,0.4)",
            borderColor: "rgba(75,192,192,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        }
    ]
};

const options={
    // 可根据需求添加柱状图配置项，比如缩放、图例等
};

export const BarDemo = () => {
    // 创建ref指向要打印的容器元素
    const printRef = useRef();

    return (
        <div>
            <h2>Bar Example</h2>
            {/* 把需要打印的图表内容包裹在带有ref的div中 */}
            <div ref={printRef}>
                <Bar data={data} options={options} />
            </div>
            {/* 打印触发按钮，由ReactToPrint组件包装 */}
            <ReactToPrint
                trigger={() => <button style={{ marginTop: '1rem' }}>Print Chart</button>}
                content={() => printRef.current}
                {/* 可选：打印前触发resize事件，确保图表渲染完整 */}
                onBeforePrint={() => window.dispatchEvent(new Event('resize'))}
                {/* 可选：打印完成后的回调操作 */}
                onAfterPrint={() => console.log('Print job finished!')}
            />
        </div>
    );
};

Key Details to Know: #

• useRef Hook: This gives us a direct reference to the DOM element holding our chart, which is what react-to-print will capture for the print output.
• ReactToPrint Props:
  • trigger: Defines the UI element that starts the print process (we used a simple button here).
  • content: Specifies which element to print—we pass our ref's current value here.
  • onBeforePrint: A helpful callback to ensure the chart renders correctly in the print preview. Dispatching a resize event forces Chart.js to redraw the chart, preventing any blank or incomplete render issues.

This setup will let you print your bar chart directly from the browser, no class component required.

内容的提问来源于stack exchange，提问作者kritiverma