Generating a PDF with form answers in NodeJs and send it by email

Question

I'm on a personal project which is a simple form with many inputs to be filled.

The last step is to confirmed the datas, once this is done, I would like to generate a PDF of the form answers and send it to an email that I asked for before (in the form).

I tried Puppeteer, it generates the PDF of the template of the form, but the variables are not filled.

I would like to do something like "When the confirmed button on the recap page is clicked, then generate the PDF with the datas on the page."


(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto("http://localhost:8888/Medical%20Form/recup_donnees.php", {
    waitUntil: "networkidle2",
  });

  let button = await page.evaluate(() => {
    document.querySelector("#test");
  });

  await page.waitForSelector("button");

  await page.click("button");

  await page.pdf({ path: "bordeeeeeeeel.pdf", format: "a4" });

  await browser.close();
})();

Here is my code, even if I know it is absolutely wrong (because it loads an empty page), I can't figure it out how to make it works, maybe I'm going the wrong way with Puppeteer and I should take something else to do the trick.

Sorry for that noob question, but I'm actually a noob...

And thank you in advance !

score 1 · Accepted Answer · answered May 31 '22 at 10:38

So if you are expecting other users to fill out the form and then have their input created in a PDF, and then sent in an e-mail, I'd definitely think that using a programming language and PDF library to handle that. It appears that you are posting to a .php file, so if you have the ability to use PHP then for this scenario I wouldn't recommend that puppeteer be used.

I'm sure there is a scenario or way that puppeteer would be great, but you would have to be given the data for puppeteer to input and submit on the form.

The other option would be that the forms/data has already been submitted and you are able to see it on the website, where you would then instruct puppeteer to fill the form fields with the data and then screenshot the page and save as .pdf.

If you like the idea of using a server-side language like PHP to handle this, perhaps take a look at this example using the mPDF library in PHP.

Hey mate, thank you so much for your answer. I will take a look to the mPDF because yes I collect all the datas in recup_donnees.php (so everything is well displayed on the final page) I try your solution right now! Thank you again! — Charly, May 31 '22 at 13:05

Charly · Answer 2 · 2022-06-02T09:54:55.220

Thanks to Treckstar, I went for MPDF wish seems to be more efficient for what I want. But, as a big noob I'm blocked on many stuffs.

Here is "my logic" (which could be not logical at all ahah)

1. The user fills a HTML form

2. All the informations he submitted are gathered in a PHP file that is acting like a "datas confirmation page", here is the page :

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Récapitulatif</title>
   <link rel="stylesheet" href="./donnees.css" />
</head>
<body>
       <div class="container">
   <form action="mypdfgenerator.php" method="post">
   <h1>Informations générales</h1>
   <ul id="infos">
       <li><span>Nom :</span> <?php echo $_POST['Nom']?></li>
       <li><span>Prénom :</span> <?php echo $_POST['Prenom']?></li>
       <li><span>Adresse :</span> <?php echo $_POST['Adresse']?></li>
       <div class="cp-ville">
       <li><span>Code Postal :</span> <?php echo $_POST['code-postal']?></li>
       <li><span>Ville :</span><?php echo $_POST['Ville']?></li>
       </div>
       <div class="telephones">
       <li><span>Téléphone domicile : </span><?php echo $_POST['Teldom']?></li>
       <li><span>Téléphone bureau : </span><?php echo $_POST['Telbur']?></li>
       <li><span>Portable : </span> <?php echo $_POST['Portable']?></li>
       </div>
       <div class="date-age-sexe">
       <li><span>Date de naissance :</span> <?php echo $_POST['date-naissance']?></li>
       <li><span>Age :</span> <?php
 $dateNaissance = $_POST['date-naissance'];
 $aujourdhui = date("Y-m-d");
 $diff = date_diff(date_create($dateNaissance), date_create($aujourdhui));
 echo $diff->format('%y').' ans';
?></li>
       <li><span>Sexe :</span> <?php echo $_POST['Sexe']?></li>
       </div>
       <li><span>Email :</span> <?php echo $_POST['Email']?></li>
       <li><span>Profession :</span> <?php echo $_POST['Profession']?></li>
       <li><span>Adressé et/ou recommandé par :</span> <?php echo $_POST['Recommandation']?></li>
   </ul>
</div>

<div class="container">
   <h1>Raison de la visite</h1>
   <ul>
       <li><span>Raison de la visite :</span> <?php echo $_POST['Raison']?></li>
       <li><span>Date approximative du dernier examen dentaire (ou soins dentaires) :</span> <?php echo $_POST['dernier-examen']?></li>
   </ul>
</div>

<div class="container">
   <h1>Questionnaire de santé</h1>
   <ul id="sante">
       <div class="reponses-QCM">
       <li class="sante-li"><span>Etes-vous en bonne santé ? :</span> <?php echo $_POST['sante']?></li>
       <li class="sante-li"><span>Troubles cardiaques :</span> <?php echo $_POST['cardiaque']?></li>
       <li class="sante-li"><span>Troubles vasculaires/sanguins :</span> <?php echo $_POST['vasculaire']?></li>
       <li class="sante-li"><span>Troubles rénaux :</span> <?php echo $_POST['renaux']?></li>
       <li class="sante-li"><span>Troubles digestifs :</span> <?php echo $_POST['digestif']?></li>
       <li class="sante-li"><span>Troubles hépatiques :</span> <?php echo $_POST['hepatique']?></li>
       <li class="sante-li"><span>Troubles nerveux/épilepsie :</span> <?php echo $_POST['epilepsie']?></li>
       <li class="sante-li"><span>Troubles pulmonaires / asthme :</span> <?php echo $_POST['asthme']?></li>
       <li class="sante-li"><span>Troubles oculaires :</span> <?php echo $_POST['oculaire']?></li>
       <li class="sante-li"><span>Diabète :</span> <?php echo $_POST['diabete']?></li>
       <li class="sante-li"><span>Rhumatisme articulaire aigu :</span> <?php echo $_POST['rhumatisme']?></li>
       <li class="sante-li"><span>Arthrose (préciser zone) :</span> <?php echo $_POST['arthrose']?></li>
       <li class="sante-li"><span>Troubles cutanés :</span> <?php echo $_POST['cutanes']?></li>
       <li class="sante-li"><span>Allergies :</span> <?php echo $_POST['allergies']?></li>
       <li class="sante-li"><span>Troubles glandulaires/hormonaux :</span> <?php echo $_POST['glandulaire']?></li>
       <li class="sante-li"><span>SIDA / HIV+ :</span> <?php echo $_POST['SIDA']?></li>
       <li class="sante-li"><span>Hépatite :</span> <?php echo $_POST['hepatite']?></li>
       <li class="sante-li"><span>Tuberculose :</span> <?php echo $_POST['tuberculose']?></li>
       <li class="sante-li"><span>Cancer :</span> <?php echo $_POST['cancer']?></li>
       <li class="sante-li"><span>Autre maladie(s) ? :</span> <?php echo $_POST['autres-maladies']?></li>
       </div>
       <div class="traitement-medical">
       <li class="sante-li"><span>Suivez-vous un traitement médical en ce moment ? :</span> <?php echo $_POST['traitement-medical']?></li>
       <li class="sante-li"><span>Si oui, pour quelle(s) raison(s) :</span> <?php echo $_POST['raisons-traitement']?></li>
       </div>
       <div class="medicaments">
       <li class="sante-li"><span>Prenez-vous des médicaments ? :</span> <?php echo $_POST['prise-medicaments']?></li>
       <li class="sante-li"><span>Si oui, lesquels :</span> <?php echo $_POST['quels-medicaments']?></li>
       </div>
   </ul>
</div>

<div class="container">
   <h1>Renseignements complémentaires</h1>
   <ul>
       <div class="cigarettes">
       <li><span>Etes-vous fumeur ? :</span> <?php echo $_POST['Fumeur']?></li>
       <li><span>Si oui (cigarettes/jour) :</span> <?php echo $_POST['cigarettes-jour']?></li>
       <li><span>Depuis (années) :</span> <?php echo $_POST['duree-fumeur']?></li>
       </div>
       <div class="radio">
       <li><span>Avez-vous été traité par radiothérapie ? :</span> <?php echo $_POST['radiotherapie']?></li>
       <li><span>Si oui, date et localisation :</span> <?php echo $_POST['date-radiotherapie']?></li>
       </div>
       <li><span>Avez-vous eu des saignements prolongés après une extraction chirurgicale ? :</span> <?php echo $_POST['saignements-chirurgicaux']?></li>
       <li><span>Etes-vous sous traitement par biphosphonates ? (ex : Aclasta® , Actonel® , Fosamax® , Fosavance® , Bonviva® ,Optruma® ,...) :</span> <?php echo $_POST['biphosphonates']?></li>
       <div class="infos-medecin">
       <li><span>Nom du médecin traitant :</span> <?php echo $_POST['medecin']?></li>
       <li><span>Adresse du médecin traitant :</span> <?php echo $_POST['adresse-medecin']?></li>
       </div>
   </ul>
</div>
<div class="validate">
<button type="submit" id="test"> Télécharger en PDF </button>
<button> <a href="./index.html"> Retourner au début </a></button>
   </form>
   </div>
</body>
</html>

4. Then I want him to click on the submit button at the end, and when it does, it triggers the mypdfgenerator.php page which is this:

<?php
require __DIR__ . '/vendor/autoload.php';
$mpdf = new \Mpdf\Mpdf();

$html ='<html>
<body>
    <div>Nom '.$_POST['Nom'].'</div>
</body>
</html>';

$mpdf->WriteHTML($html);
$mpdf->Output();

I'm trying to get only the first variable to test but it is not displayed in the PDF. (the DIV element is well displayed as I see the static text)

I know this looks like not logical or correct at all for you guys but for the moment, I'm completely stuck with it...

A big thanks to you, I would love to help others too, and of course I will when I'll be able too

Have a good day!

Little update, I was complicating my own life, I delete the mypdfgenerator.pgp page to put everything directly on the recup_donnees.php page, and it works! If someone has a similar problem, don't hesitate to ping me I could help! — Charly, Jun 02 '22 at 10:14

Generating a PDF with form answers in NodeJs and send it by email

2 Answers2