javascript - 未显示为 PNG 的 React 导出组件
问题描述
我正在尝试将图表导出到图像,并且我希望图表图像具有未显示在屏幕上的自定义图例。
我怎样才能做到这一点?
现在我尝试使用 react-component-export-image 导出,但如果组件未显示,则 ref 为 null 并且无法导出。请参阅组件导出实现src-code。
我当前代码的示例:codesandbox
解决方案
通过在渲染之前操作画布来实现这一点的唯一方法。您可以通过在 中设置onclone
选项来做到这一点html2CanvasOptions
。
import { Line } from "react-chartjs-2";
import { exportComponentAsPNG } from "react-component-export-image";
import React, { useRef } from "react";
import { data } from "./data";
const Chart = React.forwardRef((props, ref) => {
return (
<div ref={ref} style={{ maxWidth: "800px" }}>
<Line data={data} height={80} />
<div id="legend" style={{ textAlign: "center", visibility: "hidden" }}>
Legend
</div> {/* Visibility set to hidden using css */}
</div>
);
});
const App = () => {
const componentRef = useRef();
return (
<React.Fragment>
<Chart ref={componentRef} />
<button
style={{ margin: "30px" }}
onClick={() => exportComponentAsPNG(componentRef, {
html2CanvasOptions: {
onclone: (clonedDoc) => {
clonedDoc.getElementById("legend").style.visibility = "visible";
// Visibility set to visible using `onclone` method
},
},
})
}
>
Export As PNG
</button>
</React.Fragment>
);
};
export default App;
https://codesandbox.io/s/export-chart-821kc?file=/src/App.js
这将完成这项工作。如果您需要进一步的支持,请告诉我。
推荐阅读
- java - 来自同一个 Maven 项目的不同工件
- javascript - 使用javascript / node js在地图功能中出现意外输出
- imodeljs - 如何在一个视口中渲染来自多个 imodel 的合并 imodel?
- c# - 在 ASP.NET Core 站点中实现 Blazor - 组件不在视图中呈现
- c# - 将在 foreach 循环中生成的 Azure Cosmos Db SQL-API 语句转换为参数化语句
- google-classroom - 403 当前用户在为 Google 课堂 api (.Net) 创建课程时无法创建课程 [禁止]
- php - 一个用户奇怪地出现了两个链接 - Laravel 模型
- github-actions - 不同prettier的检查结果
- sql - 如何从 Azure 数据工厂中的 JSON 获取数组?
- angular - 如何在二级项目中调用Angular Element中定义的模块?