jQuery plugins - Print Element
okt 13

Print Element

Nyomtatás jQuery-vel

Verzió: 1.2
Kiadás dátuma: 2010
Fejlesztő: Erik Zaadi
Liszensz: MIT, GPL

Bevezető

Biztos mindenki találkozott már azzal a szituációval, hogy amikor egy érdekesnek vélt weblapot ki szeretett volna nyomtatni, akkor a nyomtatóból kb. 60-70%-ában használhatatlan papírtömeg potyogott ki:
nyomtatásra került minden olyan elem, amely monitoron lehet, hogy szép és jól mutat és szükség is van rá (design elemek, menük, keresés mező, hírlevélre való feliratkozás, stb.), de nyomtatott formában az ég világon semmi jelentősége sincs és még a lényeges tartalmi rész megjelenítését is torzítja.

Ez nem elég, hogy idegesítő, de fölösleges papír- és tintapocsékolás is egyben.

A problémára szerencsére már régóta van megoldás: CSS használatával az egyes megjelenítő eszközökre (mobil eszköz, nyomtató, stb.) külön stíluslapokat definiálhatunk.

Az alábbi plugin segítségével ezt a funkciót tehetjük kicsit komfortosabbá, egyszerűbbé.

Implementálás

Deklaráció

A deklaráció során a plugin-t ahhoz az elemhez rendeljük, amelyet nyomtatásra kívánunk küldeni:

            $('SelectorToPrint').printElement();
          

Használat

A deklaráción túl szükségünk lesz még egy gombra, vagy egy linkre, amellyel aktiválhatjuk a plugin-t. Erre példát a bemutató oldalon találsz.

Teljes paraméterlista

  • printMode: a nyomtatóra küldött dokumentum megjelenítése popup ablakban. Ha tiltjuk a funkciót, akkor a plugin egy rejtett iFrame elemet használ ('iframe' | 'popup')
    (alapértelmezett: 'iframe')
  • pageTitle: a nyomtatóra küldött dokumentum címe - ami megjelenik majd a nyomtató log-jában (alapértelmezett: ' ')
  • overrideElementCSS: három lehetséges opciót használhatunk (alapértelmezett: null)
    Első eset:
    boolean típusú értékkel engedélyezhetjük (true), illetve tilthatjuk (false) az összes, belinkelt CSS stíluslap figyelmen kívül hagyását
                    $('selector').printElement({
                      overrideElementCSS: true
                    });
                  
    Második eset:
    Tömb formájában átadhatjuk a kívánt CSS stíluslap paramétereit
                    $('selector').printElement({
                      overrideElementCSS: [
                        'style.css',
                        { href: 'http://www.domain.hu/css/style.css', media:'print' }
                      ]
                    });
                  
    Harmadik eset:
    sztring formájában megadhatjuk egy alternatív CSS stíluslap útvonalát
                    $('selector').printElement({
                      printElem ({ overrideElementCSS: ['css/style.css'] });
                    });
                  
  • printBodyOptions: a nyomtatóra küldött dokumentum body elemének definiálhatunk stílust (styleToAdd opció), illetve hozzá rendelhetünk tetszőleges CSS osztályt (classNameToAdd opció) (alapértelmezett: { styleToAdd: 'padding: 10px; margin: 10px;', classNameToAdd: ' ' })
  • leaveOpen: 'popup' nyomtatási mód esetén engedélyezhetjük/tilthatjuk, hogy a nyomtatást követően a felugró ablak nyitva maradjon-e (true | false) (alapértelmezett: false)
  • iframeElementOptions: a printBodyOptions paraméterhez hasonlóan a nyomtatóra küldött dokumentumban található iFrame elemekhez definiálhatunk stílust (styleToAdd opció), vagy rendelhetünk hozzájuk tetszőleges CSS osztályt (classNameToAdd opció)
    (alapértelmezett: { styleToAdd: 'padding: 10px; margin: 10px;', classNameToAdd: ' ' })

Tippek

  • Chrome böngésző alatt csak a popup verzió működik!
  • Opera böngésző alatt a plugin nem működik!
  • IE böngésző alatt a printBodyOptions paraméter hatástalannak bizonyult popup ablak esetén!