如何在React.js中修改现有的PDF? [英] How to modify an existing PDF in React.js?

问题描述

我在反应状态数组中通过props传递到当前组件的值很少.但是，我希望使用文件系统中的PDF模板，而不是像下面的代码中当前显示的那样显示它们.

I have few values in my react state array that I'm passing through props to the current component. But instead of displaying as they are currently displayed in the code below, I would like to use a PDF template that's in my file system.

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

So my expected outcome is to be able to draw the given data from the state (text or images) on a copy of the original PDF at a given (x,y) coordinates and be able to email the new PDF or save it to the Local storage devices. Given below is my existing code which only displays the data in a container.

  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(在本地文件系统中)，并在给定的坐标上绘制数据.该新文档应能够根据用户的喜好通过电子邮件发送或保存到本地存储中.

What's expected is a NEW PDF to be displayed in the container which is based on the template PDF (in local file system) with the data drawn on it at given coordinates. This new documents should be able to be emailed or saved to the local storage as per user preference.

我是React的初学者.

I'm a total beginner to React.

推荐答案

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

Use pdf-lib.js to modify the content of pdfs in react. You can modify existing pdfs, add new pages, remove pages , draw text & images etc.

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

这篇关于如何在React.js中修改现有的PDF?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！