I have a data entry app created with React with a node express server backed by an SQL database. At the end of data entry the application creates the finalised form(currently coded as a component with HTML & CSS)with the values from the state.
On the final review page where the user confirms the data is correct and hit submit, I want to give the user the option to save the form as a PDF (also possibly email the created PDF as an attachment to an email)
Code on the review page looks as below
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>
)
}
the component shown in the switch statement can vary in length depending on user's selection can sometimes exceed 2,3 pages in length.
ideally I would like a save=e=>{} function which prints the component into a PDF so i can then use that file as an attachment for an email. What's the best way of coding this?
