Question

我在反应状态数组中通过props传递到当前组件的值很少。但是，我不想使用下面代码中当前显示的那样显示它们，而是要使用文件系统中的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的初学者。

Answer 1

使用 pdf-lib.js 修改react中pdf的内容。您可以修改现有的pdf，添加新页面，删除页面，绘制文本和图像等。

查看此链接： https://github.com/Hopding/pdf-lib

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

1 个答案: