Как напечатать компонент React в PDF? - PullRequest
Новая
       11

Как напечатать компонент React в PDF?

0 голосов
/ 18 февраля 2020

У меня есть приложение для ввода данных, созданное с помощью React с сервером express узла, поддерживаемым базой данных SQL. В конце ввода данных приложение создает завершенную форму (в настоящее время закодированную как компонент с HTML & CSS) со значениями из состояния.

На последней странице обзора, где пользователь подтверждает правильность данных и нажимает кнопку Отправить, я хочу дать пользователю возможность сохранить форму в формате PDF (также, возможно, отправьте созданный PDF-файл по электронной почте в виде вложения в email)

Код на странице обзора выглядит следующим образом: 

import AccCompetency from './forms/51_AccCompetency';




export class FormReview extends Component{

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


  continue = e => {
    e.preventDefault();
    //some more methods here

  }

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




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



    switch (formId)  {
      case "51":
        return (


          <MuiThemeProvider>
            <React.Fragment>

              <AppBar title="Review Record"/>
                <GridList style={{height: 450,maxWidth:'90%', borderStyle:'solid',borderColor:'grey',borderWidth:1, marginRight:'10%', marginLeft:'10%', marginTop:35}}>
                <EffectsOfControls nextStep={this.nextStep} handleChange={this.handleChange} values={values}/></GridList>
                <Grid item xs={10} style={{marginLeft:'10%',marginRight:'10%',marginTop:20}}>
                <RaisedButton label="Email & Save" secondary={true} onClick={this.continue} fullWidth='true' style={{marginTop:20, height:60}}/>
                <ButtonGroup variant="contained"  style={{marginTop:20}} fullWidth >
                <Button onClick={this.continue}>Save Only</Button>
                <Button onClick={this.back}>Back</Button>
                </ButtonGroup>
                </Grid>
            </React.Fragment>
          </MuiThemeProvider>

        )

  default:
        return (


          <MuiThemeProvider>
            <React.Fragment>

              <AppBar title="Error occured"/>
                <GridList style={{height: 450,maxWidth:'90%', borderStyle:'solid',borderColor:'grey',borderWidth:1, marginRight:'10%', marginLeft:'10%', marginTop:35}}>
                <h1>Program has encountered an error (The page requested may still be under development). <br></br> Please go back or start again! </h1></GridList>
                <Grid item xs={10} style={{marginLeft:'10%',marginRight:'10%',marginTop:20}}>
                <ButtonGroup variant="contained"  style={{marginTop:20}} fullWidth >
                <Button onClick={this.back}>Go back</Button>
                <Button onClick={this.repeat}>Go back home</Button>
                </ButtonGroup>
                </Grid>
            </React.Fragment>
          </MuiThemeProvider>

        )
        }

длина компонента, показанного в операторе switch, может варьироваться в зависимости от выбора пользователя, который иногда может превышать 2,3 страницы.

в идеале я бы хотел save=e=>{} функцию, которая печатает компонент в PDF, чтобы я мог затем использовать этот файл в качестве вложения для электронной почты. Как лучше всего это кодировать?

...