I'm trying to create a feature that allows user to download pdf. I developed it using html2pdf.js + react. I manage to create the pdf content in tag but the content such as table, paragraph, etc. exceed the size of a4 paper, how can I fix this ?
here's my code:
{/*Create Invoice Preview */}
<Preview id={'invoice-template'} >
<h1>UD-SUPERJAYA </h1>
<p className="fontBold">Invoice #0178832</p>
<hr />
<Row>
<Col lg={6}>
<p className="fontBold">Invoiced to</p>
<p>Mdsada</p>
<p>Jalan Kalimantan No 29, Samarinda Kota, Kalimantan </p>
<p>Indonesia</p>
</Col>
<Col lg={6} className="text-end">
<p className="fontBold">Pay to</p>
<p>PT dsada</p> <br />
<p>NPWP: 94321310</p>
<p>No PKP: P330/W1PJ.131/9403129/KR0233129/99310</p>
<p>Tgl Pengukuhan: 17 Desember 2013</p>
<br/>
<p>Alamat:</p>
<p>Jalan Kalimantan No 29, US Kota, Jawa</p>
<p>Telp: 08322 3232 3212 </p>
</Col>
</Row>
<br />
<Row>
<Col lg={6}>
<p className="fontBold">Invoiced Date</p>
<p>16/10/2020</p>
</Col>
<Col lg={6} className="text-end">
<p className="fontBold">Payment Method</p>
<p>OVO</p>
</Col>
</Row>
</Preview>
<Row>
<Col lg={12} className="text-end fontMedium">
<Button onClick={()=>print('Invoice', 'invoice-template')} className="invoicebutton">Submit</Button>
</Col>
</Row>
Related
I wanna download in PDF all my code inside my div in PDF . I tried a few possibilities but i always have a problem to do it .
This is what i need to download :
<div id="qrCodePdf" ref={ref}>
<Row className="backgroundTicket">
<Col>
<Row className="rowCode">
<Col>
<p className="titleName">
{localStorage.getItem("propsRestaurant")}
</p>
</Col>
<Col>
<div id="qrCodeDiv2" />
</Col>
<Col>
<img
src="/image/tipourboirePhrase.png"
className="tipPicture"
/>
</Col>
</Row>
</Col>
<Col>
<Row className="rowCode2">
<Col className="col2">
{" "}
<img src="/image/logoCode.png" className="tipPicture" />
</Col>
<Col className="col2">
<p>Juste pour un merci</p>
</Col>
</Row>
</Col>
</Row>
</div>
For the moment i used js pdf and HTML2Canvas but i always have error like ×
TypeError: Cannot read properties of null (reading 'toDataURL')
also my button
<button
className="buttonQrCode"
onClick={() => {
const canvas = document.querySelector("qrCodePdf canvas");
const image = canvas.toDataURL();
const element = document.createElement("a");
element.setAttribute("href", image);
element.setAttribute("download", "canvas.pdf");
document.body.appendChild(element);
element.click();
}}>
Télécharger le QR Code Ticket
</button>
import { exportComponentAsPDF } from "react-component-export-image";
<div id="qrCodePdf" ref={ref}>
<Row className="backgroundTicket">
<Col>
<Row className="rowCode">
<Col>
<p className="titleName">
{localStorage.getItem("propsRestaurant")}
</p>
</Col>
<Col>
<div id="qrCodeDiv2" />
</Col>
<Col>
<img
src="/image/tipourboirePhrase.png"
className="tipPicture"
/>
</Col>
</Row>
</Col>
<Col>
<Row className="rowCode2">
<Col className="col2">
{" "}
<img src="/image/logoCode.png" className="tipPicture" />
</Col>
<Col className="col2">
<p>Juste pour un merci</p>
</Col>
</Row>
</Col>
</Row>
</div>
<button
className="buttonQrCode"
onClick={() => {()=>exportComponentAsPDF(ref, { fileName: "FileName" })}>
Télécharger le QR Code Ticket
</button>
I have 2 pages: (1) First page is simply a Data file [Data.js]. (2) I have a Page with a form where after i fill it up and i press save it store all the data from the form in a set like {name:"name",price:"price"} and i want somehow to send this set to the Data file that is full of sets like:
const dataCommunity = [
{
id:"1",
titolo:"Community - Quote for API",
costo:"99€",
descrizione:"sono creato dinamicamente",
attività:"Prodotto",assets:"Competence"
},
{
id:"2",
titolo:"Community - Quote for API",
costo:"9999999€",
descrizione:"sono creato dinamicamente",
attività:"Prodotto",
assets:"Competence"
},
{
id:"3",
titolo:"Community Titolo Diverso - Quote for API",
costo:"999999999999€",
descrizione:"sono creato dinamicamente",
attività:"Prodotto",
assets:"Competence"
}
]
export default dataCommunity;
Now the other file may be confusing but i know for sure that const data that is inside the handlerSubmit() gives me back a set {data inside} correctly because i tested with console.log so the only thing is how do i update the data file from this page using the data i collected?
class AttivaCommunity extends React.Component{
constructor(props){
super(props)
this.state={
titolo:"",
costo:"",
attività:"",
assets:"",
descrizione:"",
search:""
}
}
updateSearch(event){
this.setState({search:event.target.value.substr(0,20)})
}
handleSubmit=(event)=>{
event.preventDefault()
const data = this.state
console.log(data)
}
render(){
let offers = dataCommunity.filter(
(offer)=>{return offer.titolo.indexOf(this.state.search) !== -1}
);
return(
<div>
<MPheader/>
<Link to="/Marketing/Marketing/Nuovo prodotto"><button className="myButton" type="button" style={{margin:"10px"}}>Aggiungi</button></Link>
<IslandersHeader nome="HUI MARKETPLACE" sottoheader="Buy all Hui apps and services and sell your Island’s goods and services"/>
<Container fluid className="MainPageRow2">
<Form onSubmit={this.handleSubmit}>
<Form.Row className="Col_margin py-5 px-1">
<Col md={2} className="Col_margin px-1">
<TextForm nome="Nome"/>
</Col>
<Col md={2} className="Col_margin px-1">
<SelectDa4 nome="Island" option1="Tutte" option2="Approvato" option3="In attesa" option4="Rifiutato"/>
</Col>
<Col md={2} className="Col_margin px-1">
<SelectDa4 nome="Attività" option1="Prodotto" option2="Mercato" option3="Foundraising" option4="Corporate"/>
</Col>
<Col md={2} className="Col_margin px-1">
<SelectDa4 nome="Asset" option1="Prodotto" option2="Mercato" option3="Foundraising" option4="Corporate"/>
</Col>
<Col md={2} className="Col_margin px-1">
<SelectDa3 nome="Risultati per Pagina" option1="10" option2="20" option3="30"/>
</Col>
<Col md={2} className="Col_margin px-1">
<Form.Label className="checktext">Cerca</Form.Label>
<Form.Control type="text" placeholder={this.props.nome} value={this.state.search} onChange={this.updateSearch.bind(this)} name="cerca"/>
</Col>
</Form.Row>
<Form.Row className="Col_margin px-1 py-2">
<button className="myButton" type="submit" style={{marginLeft:"30px"}}>Filtra</button>
</Form.Row>
</Form>
</Container>
<Container fluid className="MainPageRow2">
<Row className="Col_margin py-1 px-1">
{offers.map((offerta)=> <MarketDiv key={offerta.id} titolo={offerta.titolo} costo={offerta.costo} descrizione={offerta.descrizione} attività={offerta.attività} assets={offerta.assets}/>)}
</Row>
</Container>
</div>
)
}
}
export default AttivaCommunity
I am try to give full width to my container by passing props fluid="true" but it takes more than 100% width.
This is my code
<Container fluid="true" style={{backgroundColor:'#0086FF'}}>
<Row >
<Col>
</Col>
<Col>
<div>
<p>This is my division</p>
</div>
</Col>
<Col>
</Col>
</Row>
</Container>
I'm using InputGroup component from reactstrap inside a modal. In Desktop view it looks fine but Mobile view Like this:
Code:
<Row>
<Col xs='2'>
<span>Price(s)</span>
</Col>
<Col xs='10'>
<PriceInput
cats={this.state.cats}
/>
</Col>
</Row>
price input and description fields are add as another component , so i can add more than one price to it
PriceInput Code
<Row>
<Col xs='3'>
<InputGroup
className={'form-group'}>
<InputGroupAddon addonType="prepend">{props.symbol}
</InputGroupAddon>
<Input
type="text"
placeholder='0.00'/>
</InputGroup>
</Col>
<Col xs='7'>
<Input
type="text"
placeholder='description'/>
</Col>
<Col xs='2'>
<Button >
<i color={'red'}
className='zmdi zmdi-delete'>
</i>
</Button>
</Col>
</Row>
How can i set Price and Price symbol wrap together?
change your xs props to xl it will work
I am using React Bootstrap and trying to loop through content which is in two separate columns like this:
<Container>
<Row>
{this.state.products.map(product => (
<Col md={8}>
<div className="title">{product.name}</div>
<div className="desc">{product.description}</div>
</Col>
<Col md={4}>
<div className="price">{product.price}</div>
</Col>
))}
</Row>
</Container>
I have my closing tags so not sure why I a getting the error?
The return of your map also needs to be wrapped in a containing tag, you can use React fragment tags <> https://reactjs.org/docs/fragments.html#short-syntax
<Container>
<Row>
{this.state.products.map(product => (
<>
<Col md={8}>
<div className="title">{product.name}</div>
<div className="desc">{product.description}</div>
</Col>
<Col md={4}>
<div className="price">{product.price}</div>
</Col>
</>
))}
</Row>
</Container>
Try this:
The problem is, your map on the products Array is returning two components of type Col, and React only accepts one returned element.
Explained here.
Also, <React.Fragment></React.Fragmint> Component Wrapper can also be written with this syntax: <></>
<Container>
<Row>
{this.state.products.map(product => (
<React.Fragment>
<Col md={8}>
<div className="title">{product.name}</div>
<div className="desc">{product.description}</div>
</Col>
<Col md={4}>
<div className="price">{product.price}</div>
</Col>
</React.Fragment>
))}
</Row>
</Container>