Cómo generar PDF en el ejemplo de código de aplicación React.js

Ejemplo 1: agregar pdf en la aplicación react

importReact,PureComponentfrom"react"importDocument,Pagefrom"react-pdf/build/entry.webpack"importthrottlefrom"lodash.throttle"importpdffrom"./pdf.pdf"classAppextendsPureComponentconstructor(props)super(props)this.state=width:nullthis.throttledSetDivSize=throttle(this.setDivSize,500)componentDidMount()this.setDivSize()window.addEventListener("resize",this.throttledSetDivSize)componentWillUnmount()window.removeEventListener("resize",this.throttledSetDivSize)setDivSize=()=>this.setState(width:this.pdfWrapper.getBoundingClientRect().width)render()return(<div id="row" style=height:"100vh", width:"100vw", display:"flex", overflow:"hidden"><div id="placeholderWrapper" style=width:"10vw", height:"100vh"/><div id="pdfWrapper" style=width:"90vw" ref=(ref)=>this.pdfWrapper= ref><PdfComponent wrapperDivSize=this.state.width/></div></div>)classPdfComponentextendsPureComponentrender()return(<div><Document
          file=pdf><Page pageIndex=1 width=this.props.wrapperDivSize/></Document></div>)exportdefaultApp

Ejemplo 2: como crear un pdf en react

/*
Make sure to install the library
with yarn
yarn add @react-pdf/renderer
with npm
npm install @react-pdf/renderer --save
*/importReactfrom'react';importPage,Text,View,Document,StyleSheetfrom'@react-pdf/renderer';// Create stylesconst styles =StyleSheet.create(
  page:
    flexDirection:'row',
    backgroundColor:'#E4E4E4',
  section:
    margin:10,
    padding:10,
    flexGrow:1);// Create Document ComponentconstMyDocument=()=>(<Document><Page size="A4" style=styles.page><View style=styles.section><Text>Section #1</Text></View><View style=styles.section><Text>Section #2</Text></View></Page></Document>);

---

---

Utiliza Nuestro Buscador