reactjs - 如何在 React.js 中修改现有的 PDF？

问题描述

我的反应状态数组中有几个值，我通过道具传递给当前组件。但是，我不想像下面代码中当前显示的那样显示，而是想使用我的文件系统中的 PDF 模板。

所以我的预期结果是能够在给定 (x,y) 坐标的原始 PDF 副本上从状态（文本或图像）中绘制给定数据，并能够通过电子邮件发送新 PDF 或将其保存到本地存储设备。下面给出的是我现有的代码，它只显示容器中的数据。

  export class FormReview extends Component{

 constructor(props) {
   super(props);
   this.state = {value:0};
 }

 /*methods used to navigate between multistep forms*/
 continue = e => {
   e.preventDefault();
   this.props.nextStep();
 }

 back = e => {
   e.preventDefault();
   this.props.prevStep();
 }




 render() {
   const {values} = this.props;

   return(

     <MuiThemeProvider>
       <React.Fragment>

         <AppBar title="Review Submission"/>
         <div>
         <Grid container spacing={2} style={{padding:50}}>
         <Grid item xs={1}/>
         <Grid item xs={10}>


         <Paper>


         <Grid item xs={12} sm container>
           <Grid item xs container direction="column">
             <Grid item xs style={{textAlign:'left', padding:20}}>

             <Container style={{ height:'500', backgroundColor:'#A9A9A9', overflow: 'scroll'}}>

          <List>
          <ListItem
          primaryText='Student Name'
          secondaryText={values.stu_name}/>


          <ListItem
          primaryText='Flight Registration'
          secondaryText={values.rego}/>

          <ListItem
          primaryText='Date'
          secondaryText={values.fl_date}/>

          <ListItem
          primaryText='Hours'
          secondaryText={values.fl_clock}/>

          <ListItem
          primaryText='Completed?'
          secondaryText={values.pfk_bool}/>

          <ListItem
          primaryText='next?'
          secondaryText={values.nextLesson_bool}/>

          /*formRating contains performance ratings of students depending on the lesson undertaken*/

          {values.formRating.map(
            item =>
            <Grid container>
                  <Grid item xs={2} style={{marginTop:20, marginRight:0}}>{item.condId} </Grid>

                  <Grid item xs={6} style={{marginTop:20}}>{item.condition} </Grid>
                    <Grid item xs={4} style={{marginTop:10}}>{item.rate}</Grid>



                </Grid>)}</List>

          </Container>



      <Grid item xs={12}>
      <RaisedButton label="Email & Save" secondary={true} onClick={this.continue} fullWidth='true' style={{marginTop:20, height:60}}/>
      <ButtonGroup variant="contained"  style={{marginTop:20}} fullWidth >
      <Button>Save Only</Button>
      <Button>Cancel</Button>
    </ButtonGroup>
      </Grid>
        </Grid >

        </Grid>
      </Grid>
        </Paper>
      </Grid>

      <Grid item xs={1}/>



    </Grid>



      </div>
    </React.Fragment>
  </MuiThemeProvider>
   )
 }
 }


  export default FormReview

预期的是一个新的 PDF 将显示在容器中，该容器基于模板 PDF（在本地文件系统中），并在给定坐标上绘制数据。这些新文档应该能够根据用户偏好通过电子邮件发送或保存到本地存储中。

我是 React 的初学者。

标签： reactjspdf

reactjs - 如何在 React.js 中修改现有的 PDF？

问题描述

解决方案

推荐阅读