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

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 Form/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 !

CodePudding user response：

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.

CodePudding user response：

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

<div >
   <h1>Renseignements complémentaires</h1>
   <ul>
       <div >
       <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 >
       <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 >
       <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 >
<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!