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

Question

我正在使用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)
  }
]
}

在我的Graph组件中，我将div和其他html标签转换为react-pdf标签，如Page、View、Text。但是我得到了这个错误：‘上面的错误发生在组件中：’。我认为这是因为'Chart‘组件内置了div和其他html标签。

有没有什么方法可以把这个组件标签转换成react-pdf组件，这样就可以显示图形了？或者在页面加载时获取图形组件的快照，并在我想要在pdf中呈现它的位置调用它。

或者，有没有其他有效的方法来做到这一点？我希望您理解我的问题:)

Answer 1

就连我也不得不做这样的事情。您可以首先通过为每个图表提供一个唯一的图表id来生成顶点图表(使用options -> chart URL id字段)，然后您可以使用下面的图表id来获取图表->，该图表id是用来生成图表的。此图表URL可以在react pdf中Image标记的src属性中提供。

注意，getDataUri方法将返回promise对象，您必须先解析它，然后才能在

标记中使用它。

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

<Image src={chartURL} />