# PDF-gomb widget

> Gomb, amely az aktuális oldalból vagy egy kijelölt részből PDF-et készít: átalakítók, beállítások és a JS-átalakító eseményei.

A **PDF-gomb** widget az aktuális oldal, vagy annak egy kijelölt része PDF-változatát állítja elő. A látogató a gombra kattint, és a böngésző letölti (vagy megnyitja) a PDF-et.

## PDF szakasz

![A PDF-gomb PDF szakasza JS-átalakítóval](./kepek/pdf-dokumentumok-pdf-gomb.webp)

*A PDF-gomb PDF szakasza JS-átalakítóval* (https://minta-bolt.hu/wp-admin/post.php?post=61&action=elementor)

A képen a JS-átalakító beállításai látszanak. Figyeld meg a sárga figyelmeztetést: erről lent, a JS-átalakítónál olvashatsz.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Konverter** | A PDF-készítés módja: **JS**, **HTML** vagy **Browser**. | JS |
| **Megnyitás a böngészőben** | A PDF-et letöltés helyett a böngészőben nyitja meg. Ilyenkor a PDF címét nem használja. | Nem |
| **Megnyitás új lapon** | Csak a böngészőben megnyitásnál jelenik meg: a PDF új lapon nyílik. | Nem |
| **Cím** | A PDF-fájl neve, a `.pdf` kiterjesztést magától hozzáadja. Alapból a bejegyzés címe. Dinamikus címkéket és shortcode-okat is beírhatsz. | A bejegyzés címe |
| **Törzs** | Mi kerüljön a PDF-be: az **aktuális bejegyzés** vagy egy **sablon**. (A HTML-átalakítónál nincs.) | Aktuális bejegyzés |
| **HTML-konténer** | jQuery-szelektor, amellyel megadod, az oldal melyik részéből készüljön a PDF. | `body` |
| **Sablon** | Elementor-sablon, amelyből a PDF készül, ha a törzs **sablon**. Használhatsz benne szokásos widgeteket (cím, tartalom, kép). | |
| **Oldalméret** | A PDF lapmérete. A JS-átalakítónál sok szabvány méret közül választhatsz (A0 és A10, B0 és B10, C0 és C10, valamint Letter, Legal és más). | A4 |
| **Oldaltájolás** | **Álló** vagy **Fekvő**. | Álló |
| **Oldalmargók** | A PDF margói (pt, mm, in, px). Csak a JS-átalakítónál. | 0 mm |
| **PDF-felbontás skálázása** | Minél nagyobb az érték (1 és 3 között), annál jobb a minőség, de annál nagyobb a fájl. Csak a JS-átalakítónál. | 1,5 |

Ha a Dynamic Shortcodes bővítmény nincs telepítve, a **Cím** mező fölött egy piros „Telepítés szükséges” értesítés jelenik meg: a shortcode-os címhez az a bővítmény kell.

### A három átalakító

- **JS:** az Elementor-oldalad grafikáját és stílusát hűen visszaadja. Rövid, lehetőleg egyetlen oldalra férő tartalomhoz való. Több oldalon átívelő szövegnél nem töri szépen a lapokat, nem tudsz oldaltörést beszúrni, és CDN-ről betöltött képeket sem kezel jól.
- **HTML:** saját, kézzel írt HTML-sablonból készít PDF-et. Hosszú, több oldalas dokumentumhoz ez a megbízhatóbb.
- **Browser:** a böngésző beépített „nyomtatás PDF-be” funkcióját használja. Nagyon rugalmas, a látogató maga is állíthat rajta.

## Gomb szakasz

![A PDF-gomb Gomb szakasza](./kepek/pdf-dokumentumok-pdf-gomb-gomb.webp)

*A PDF-gomb Gomb szakasza* (https://minta-bolt.hu/wp-admin/post.php?post=61&action=elementor)

A gomb kinézete az Elementor szokásos gombjáéval egyezik:

| Beállítás | Mit csinál |
| --- | --- |
| **Típus** | Alapértelmezett, Információ, Sikeres, Figyelem vagy Veszély. |
| **Szöveg** | A gomb felirata. Alapból „PDF letöltése”. |
| **Nofollow hozzáadása** | A keresőrobotok ne kövessék a hivatkozást. |
| **Igazítás** | Balra, középre, jobbra vagy sorkizárt. |
| **Méret** | Extra kicsi, Kicsi, Közepes, Nagy vagy Extra nagy. |
| **Ikon**, **Ikon térköze**, **Ikon mérete** | Ikon a gombon, és a szövegtől való távolsága. |
| **Gomb ID** | Egyedi azonosító. Csak az angol betűket, számokat és az aláhúzást engedi, szóköz nélkül, és az oldalon máshol nem szerepelhet. |

## HTML-átalakító

![A PDF-gomb HTML-átalakítóval](./kepek/pdf-dokumentumok-pdf-gomb-html.webp)

*A PDF-gomb HTML-átalakítóval* (https://minta-bolt.hu/wp-admin/post.php?post=61&action=elementor)

Ha a **Konverter** **HTML**, a beállítások leszűkülnek:

| Beállítás | Mit csinál |
| --- | --- |
| **Cím** | A PDF-fájl neve. |
| **Sablonminta lekérése innen** | **Aktuális bejegyzés** vagy **HTML-sablon**: a PDF az oldal tartalmából, vagy egy külön HTML-sablonból készül. |
| **HTML-sablon** | Csak a **HTML-sablon** választásakor jelenik meg: itt jelölöd ki a sablont. |
| **Oldalméret** | A4, A5, A6, Letter, Legal, Executive vagy Folio. Csak az **Aktuális bejegyzés** választásánál. |
| **Oldaltájolás** | **Álló** vagy **Fekvő**. Csak az **Aktuális bejegyzés** választásánál. |

## JS-átalakító: tudnivalók

- A JS-átalakító az `html2canvas` könyvtárat használja, ami gyakran nem megbízható. A hibáit nem lehet kijavítani. Ha nagyobb megbízhatóság kell, használd a HTML-átalakítót kézzel írt HTML-lel.
- Rövid, egyetlen oldalra férő tartalomnál pontos. Hosszabb, több oldalas dokumentumhoz válassz másik átalakítót.

### Események a PDF készítése előtt és után

Saját műveletet köthetsz a PDF renderelésének kezdetére és végére, például hogy megvárd egy tartalom betöltését, vagy előkészítsd az oldalt.

```js
jQuery(window).on("dce/jsconvpdf/before", function () {
  // Ide jön a saját kódod, a renderelés előtt
});

jQuery(window).on("dce/jsconvpdf/after", function () {
  // Ide jön a saját kódod, a renderelés után
});
```

### A `dce-pdf-printing` osztály

Az exportálás alatt a `<body>` elemre rákerül a `dce-pdf-printing` osztály. Ezzel elrejthetsz felesleges elemeket, vagy csak a PDF-hez alkalmazhatsz más stílust:

```css
.dce-pdf-printing .site-header,
body.dce-pdf-printing .footer {
  display: none;
}
```

Így csak a lényeges tartalom kerül a PDF-be.