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

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

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

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