The goal is to generate a pdf file off a component, and send it to a backend api that would then send it to an email as an attached file.
Looking at these two links...
react - Generating a PDF file from React Components
dotNet Core - Send Generated Pdf as Email Attachment Asp.NetCore
I am wondering how to code in a way where maybe I should replace the .save()
with an email api call?
This is the code for generating the pdf file...
import React, {Component, PropTypes} from 'react';
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
export default class Export extends Component {
constructor(props) {
super(props);
}
emailDocument(ev) {
const input = document.getElementById('divToPrint');
html2canvas(input)
.then((canvas) => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF();
pdf.addImage(imgData, 'JPEG', 0, 0);
// pdf.output('dataurlnewwindow');
pdf.save("download.pdf");
})
;
}
render() {
return (<div>
<div className="mb5">
<button onClick={ev => this.emailDocument(ev)}>Print</button>
</div>
<div id="divToPrint" className="mt4" {...css({
backgroundColor: '#f5f5f5',
width: '210mm',
minHeight: '297mm',
marginLeft: 'auto',
marginRight: 'auto'
})}>
<div>Note: Here the dimensions of div are same as A4</div>
<div>You Can add any component here</div>
</div>
</div>);
}
}
This is the code for how I am using the email api...
handleEmailSubmit = (ev) => {
ev.preventDefault();
const identity = "username";
const optionsGetUserInfo = {
identity: identity,
Site: process.env.REACT_APP_SITE_NAME,
APIKey: process.env.REACT_APP_API_KEY
}
Promise.resolve(this.setState({...this.state, isLoading: true}))
.then(() => {
axios.post(`https://example.com/GetUserInfo`, optionsGetUserInfo)
.then(data => {
const optionsEmail = {
"From": "",
"To": [data.email, recipient@example.com],
"Subject": "Happy Days",
"Message": ["testing...1...2...3"],
"Styling": "",
"Site": process.env.REACT_APP_SITE_NAME,
"APIKey": process.env.REACT_APP_API_KEY
};
axios.post('https://example.com/SendEmail', optionsEmail)
.then(res => this.setState({...this.state, isLoading: false, isEmailSentSuccess: true}))
.catch(err => {console.log(err); this.setState({...this.state, isLoading: false, isEmailSentSuccess: true});});
})
.catch(err => {console.log('error:', err); this.setState({...this.state, isLoading: false, isEmailSentSuccess: true});});
})
.catch(err => console.log('error:', err));
}
So I'm guessing instead of using pdf.save("download.pdf");
(inside first code snippet), I would use something like... handleEmailSubmit(ev, pdf)
?
If so, I'm not sure how I should input this pdf file (coming from argument) in the options of the 2nd snippet. Anyone have any ideas if I'm on the right track?
(Note: Currently the backend devs have not setup the email api to accept files, so when we are both finished and something goes wrong I will have no way of knowing if it's them or me)