如何使用react-pdf将material-ui / core linearProgressBar转换为pdf

问题描述

我正在将Material-UI用于正在构建的报告中的某些组件。其中一份报告使用react-chartjs-2构建了一些图表，这些图表我已经成功地使用react-pdf导出为pdf。但是，有一个Progressbar组件是基于Material-UI linearProgress组件构建的，我似乎无法弄清楚找出如何出口。进度栏的设置如下：

import { withStyles,LinearProgress,Grid,Typography,Tooltip } from '@material-ui/core'

const ProgressBar = withStyles({
  root: {
    backgroundColor: lighten(indigo[400],0.5),borderRadius: 2,height: 15
  },bar: {
    backgroundColor: indigo[900],borderRadius: 2
  }
})(LinearProgress)

const AvsB = React.forwardRef<any,Props>(({ rootProps,isLoading,totalA,totalB },ref) => {
.
.
.
    return (
        <Grid container spacing={1} alignItems="center">
          <Grid item xs>
            <ProgressBar ref={ref} variant="determinate" color="secondary" value={value} />  <-------THIS
          </Grid>
          <Grid container item xs justify="flex-end" classes={{ root: classes.label}}>
            {renderLabel('B',totalB)}/
            {renderLabel('A',totalA)}
            <Typography component="span" variant="subtitle2" className={classes.percentage}>
              {value}%
            </Typography>
          </Grid>
        </Grid>
    ) 

}
 

我相信我可以根据react-pdf文档中提到的内容重新创建其余组件，但是我不知道如何在pdf中呈现progressBar（LinearProgress组件）。我已经在使用ref抓取基础画布对象之前转换了图表->转换为PNG->转换为PDF（使用react-pdf），但是progressBar的ref.current没有任何画布对象。 有办法吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）