PDF-gomb widget

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

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

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ó

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.

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:

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

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