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

【问题标题】：How to modify an existing PDF in React.js?如何在 React.js 中修改现有的 PDF？
【发布时间】：2019-08-05 02:03:45
【问题描述】：

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

【问题讨论】：

我一直在尝试解决这个问题，但最终最困难的部分只是在页面上创建一个新的 PDF。你应该给react-pdf.org 一个机会。该软件包为您提供了许多创建 PDF 的工具，您可以对其进行样式设置以使其看起来就像您现有的设置一样。不幸的是，它看起来与 material-ui 不兼容。
我在想也许我可以使用一些东西将现有的 pdf 复制到新页面上，然后根据状态值在其上绘制文本？

标签： reactjs pdf

【解决方案1】：

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

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

【讨论】：