如何在react-pdf中调用react-apexcharts

问题描述

我正在使用react-pdf将一些react组件转换为pdf。我将一些表格和一些图像转换为pdf。

我的组件中也有react-apexcharts，我想将此React-apexcharts组件添加到pdf中。

我的Graph组件如下所示：

render() {
  return (
    <View id="chart">
      <Text> This is graph component </Text>
      <Chart options={this.options} series={this.series()}
        type="area" height="350"
      />
    </View>
  )
 }

series只是这样的数组对象：

series() {
  return [
  {
    name: Props1,data: generateDayWiseTimeSeries(this.props.props1)
  },{
    name: Props2,data: generateDayWiseTimeSeries(this.props.props2)
  }
]
}

在“我的图形”组件中，我将div和其他html标签转换为react-pdf标签，例如Page，View，Text。但是我收到此错误：'上面的错误发生在组件中： '。我认为这是因为具有内置div和其他html标签的“图表”组件。

是否有任何方法可以将此组件标签转换为react-pdf组件，以便可以显示图形。或在页面加载时拍摄图形组件的快照，并在要在pdf中呈现它的位置调用它。

或者还有其他有效的方法吗？我希望你理解我的问题：）

解决方法

即使是我也不得不做这样的事情。您可以首先通过为每个图表提供唯一的图表 id（使用选项 -> 图表 -> id 字段）来生成顶点图表，然后您可以使用下面的图表 id 来获取图表 URL，使用您提供的图表 id 来生成图表。这个图表网址可以在react pdf中Image标签的src属性中提供。

请注意，getDataUri 方法将返回 promise 对象，而您必须先解决它，然后才能在 Image 标签中使用它。

 const getDataUri = async (chartId) => {
        return await ApexCharts.exec(chartId,"dataURI").then(({ imgURI }) => {
            return imgURI;
        });
    }

<Image src={chartURL} />

apexcharts react-pdf reactjs reactjs