Javascript React导出未显示为PNG的组件

我正在尝试将图表导出到图像，我希望图表图像有一个自定义图例，而该图例不会显示在屏幕上

我该怎么做

目前，我尝试使用导出，但如果组件未显示，则ref为null，无法导出。请参阅组件导出实现

---

我当前代码的示例：

只有在渲染前操纵画布才能实现这一点。您可以通过在

html2CanvasOptions

中设置

onclone

选项来实现这一点

从“react-chartjs-2”导入{Line}；
从“react component export image”导入{exportComponentAsPNG}；
从“React”导入React，{useRef}；
从“/data”导入{data}；
常量图表=React.forwardRef（（道具，ref）=>{
返回(
传奇
{/*使用css将可见性设置为隐藏*/}
);
});
常量应用=（）=>{
const componentRef=useRef（）；
返回(
exportComponentAsPNG（componentRef{
html2CanvasOptions：{
onclone：（clonedDoc）=>{
clonedDoc.getElementById（“图例”）.style.visibility=“可见”；
//使用“onclone”方法将可见性设置为可见
},
},
})
}
>
导出为PNG
);
};
导出默认应用程序；

---

这就行了。如果您需要进一步的支持，请告诉我。

唯一的方法是编辑画布（图表）以非常简短地显示图例，然后将其导出，然后再次隐藏或复制该图表，并在隐藏的分区上执行相同的过程。这很好，但屏幕显示隐藏自定义图例的空白区域。为了解决这个问题，我现在有两个图表，一个显示在屏幕上，另一个隐藏以导出自定义图例。我使用隐藏div中的负边距顶部来消除空白，因此我需要图表的副本，以避免与要导出的元素重叠。