Generate PDF with Angular

Igen, az Angularban létrehozott reaktív form adatai alapján PDF-et lehet generálni. Ehhez általában egy harmadik féltől származó könyvtárat (pl. pdfmake) szokás használni.

Íme egy egyszerű lépésről lépésre terv a reaktív form adatai alapján PDF generálásához Angularban:

1. Hozza létre a reaktív formot: Elsőként egy egyszerű reaktív formot kell létrehoznia az Angular alkalmazásban, ha még nem rendelkezik vele.

   form: FormGroup;

   constructor(private fb: FormBuilder) {
     this.form = this.fb.group({
       nev: ['', Validators.required],
       email: ['', [Validators.required, Validators.email]]
       // és így tovább...
     });
   }

2. Telepítse a pdfmake könyvtárat: Ezt a könyvtárat használhatja a PDF generálásához. Telepítheti npm vagy yarn segítségével:

   npm install pdfmake

3. Generálja le a PDF-et a form adatai alapján:

   import * as pdfMake from 'pdfmake/build/pdfmake';
   import * as pdfFonts from 'pdfmake/build/vfs_fonts';

   pdfMake.vfs = pdfFonts.pdfMake.vfs;

   generatePDF() {
     if (this.form.valid) {
       const docDefinition = {
         content: [
           { text: 'Adatok', style: 'header' },
           { text: `Név: ${this.form.get('nev').value}` },
           { text: `Email: ${this.form.get('email').value}` },
           // és így tovább...
         ]
       };

       pdfMake.createPdf(docDefinition).download('adatok.pdf');
     } else {
       alert('Kérjük, töltse ki az összes szükséges mezőt.');
     }
   }

4. Hozzon létre egy gombot, amely elindítja a PDF generálását:

   <form [formGroup]="form">
     <!-- űrlap elemek ... -->
     <button (click)="generatePDF()">PDF generálása</button>
   </form>

Ez egy nagyon egyszerű példa, de természetesen további beállításokkal, stílusokkal és egyéb opciókkal is bővítheti a generált PDF tartalmát és kinézetét.

Stílus hozzáadása

A pdfmake könyvtár számos beállítást és stílusopciót kínál a PDF tartalmának és kinézetének testreszabásához. Íme néhány példa, amelyek segíthetnek a PDF tartalmának stílusos formázásában:

1. Alapvető stílusok:

• bold: Igaz/hamis értékkel állítható.
• italics: Igaz/hamis értékkel állítható.
• color: Hexadecimális színkódokat használ.

1. Szöveg mérete és stílusa:

• fontSize: A szöveg mérete pontokban.
• font: Betűtípus neve.

1. Táblázatok:

• table: Táblázat adatok és beállítások.
• layout: A táblázat elrendezése.

1. Lista stílusok:

• ul: Nem rendezett lista.
• ol: Rendezett lista.

1. Margók és padding:

• margin: [felső, jobb, alsó, bal] margó beállítások.
• alignment: Szöveg igazítása (left, right, center stb.)

Íme egy példa a fenti stílusok alkalmazására:

const docDefinition = {
  content: [
    { text: 'Cím', style: 'header' },
    {
      text: `Név: ${this.form.get('nev').value}`,
      fontSize: 14,
      bold: true,
      margin: [0, 0, 0, 10]
    },
    {
      text: `Email: ${this.form.get('email').value}`,
      italics: true,
      color: '#666666'
    },
    {
      table: {
        body: [
          ['Fejléc1', 'Fejléc2'],
          ['Adat1', 'Adat2'],
          ['Adat3', 'Adat4']
        ]
      },
      layout: 'lightHorizontalLines'
    },
    {
      ol: [
        'Első elem',
        'Második elem',
        'Harmadik elem'
      ],
      margin: [0, 20]
    }
  ],
  styles: {
    header: {
      fontSize: 22,
      bold: true,
      margin: [0, 0, 0, 10]
    }
  }
};

pdfMake.createPdf(docDefinition).download('adatok.pdf');

A fenti kód példázza, hogyan lehet az alapvető stílusokat és egyéb formázási lehetőségeket alkalmazni a pdfmake könyvtár segítségével. A hivatalos dokumentációban sokkal több stílus és opció található, így érdemes ott további részletekért és lehetőségekért keresgélni.

PDF küldése emailen

A PDF-et egy e-mailhez csatolva nem lehet egyszerűen és közvetlenül az ügyfél oldaláról elküldeni a böngésző korlátozásai miatt. Azonban a következő általános lépéseket követve megoldható:

1. Generálja le és tárolja el a PDF-et a memóriában vagy egy szerveren: Miután létrehozta a PDF-et a pdfmake-kel, elmentheti azt a memóriában, vagy közvetlenül feltöltheti egy szerverre, ahelyett, hogy letöltené azt.
2. Küldjön egy kérést a szervernek: Miután a PDF elkészült és el van tárolva, küldjön egy HTTP kérést egy backend szervernek az e-mail cím és a PDF helye (vagy maga a PDF bináris adat formájában, ha nem túl nagy) adataival.
3. Használjon egy e-mail küldő szolgáltatást a backendben: A backend szerverén használjon egy e-mail küldő szolgáltatást, mint például a SendGrid, a Mailgun, az AWS SES stb. Ezek a szolgáltatások API-kat kínálnak, amelyek lehetővé teszik az e-mailek programozott küldését.
4. Küldje el az e-mailt a csatolt PDF-fájllal: Amikor a szerver megkapja a kérést az ügyfél oldaláról, elkészíti az e-mailt, csatolja a PDF-et, és elküldi a megadott e-mail címre az e-mail küldő szolgáltatás segítségével.

Példaként egy egyszerű Express.js backend használatával és a nodemailer könyvtárral való e-mail küldésre:

const express = require('express');
const nodemailer = require('nodemailer');

const app = express();

app.post('/send-email', async (req, res) => {
  let transporter = nodemailer.createTransport({
    service: 'gmail',
    auth: {
      user: 'your-email@gmail.com',
      pass: 'your-password'
    }
  });

  let info = await transporter.sendMail({
    from: 'your-email@gmail.com',
    to: 'recipient-email@example.com',
    subject: 'Your PDF',
    text: 'Here is your PDF!',
    attachments: [{
      filename: 'document.pdf',
      path: 'path/to/your/pdf' // This should be the path where you saved your PDF
    }]
  });

  res.send('Email sent!');
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

Figyelem: A fenti példában a Gmailt használjuk az e-mailek küldésére, de ez nem biztonságos, és nem ajánlott produkciós környezetben. Ehelyett használjon hivatalos e-mail küldő szolgáltatást, mint amilyen a SendGrid vagy a Mailgun.

Emellett győződjön meg róla, hogy az érzékeny adatokat, mint például a jelszavakat vagy az API kulcsokat, nem tárolja közvetlenül a kódban, hanem környezeti változókban vagy titkosított konfigurációs fájlokban.