0

我有一个使用 React 创建的数据输入应用程序，它带有一个由 SQL 数据库支持的节点快速服务器。在数据输入结束时，应用程序使用来自状态的值创建最终的表单（当前使用 HTML 和 CSS 编码为组件）。

在用户确认数据正确并点击提交的最终审核页面上，我想为用户提供将表单另存为 PDF 的选项（也可能将创建的 PDF 作为电子邮件的附件通过电子邮件发送）

评论页面上的代码如下所示

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 的功能，这样我就可以将该文件用作电子邮件的附件。最好的编码方式是什么？

4

0 回答 0