1

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)

Fiddle Freak
  • 1,923
  • 5
  • 43
  • 83
  • Hey, I am in a similar situation and I haven't figured out a solution yet. Was wondering if you did? Please let me know – Monarch Maisuriya Mar 14 '21 at 08:43
  • 1
    @MonarchMaisuriya Nope, nothing concrete without bugs anyway. I ended up coding it up on the .NET backend with an empty generated API POST call. – Fiddle Freak Mar 15 '21 at 13:17

0 Answers0