jsPDF & WordPress

Spis treści

1. Wstęp

2. Pobieranie danych z formularza
   *Tworzenie formularza

3. Dołączenie biblioteki jsPDF
   *Licencja jsPDF
   *Pobieranie
   *Instalacjia
   *Dołączenie do Strony

4. Button

5. Kod JS
   *Podłączenie się do przycisku
   jsPDF

6. Wstęp
   Poniższy kod jest dodawany z poziomu edytora w kokpicie WP.
   Jedną dodatkową wtyczkę, której używam to HTML Editor Syntax Highlighter do kolorowania kodu ( czarne tło,numerowane wiersze, kolorowy kod i wcięcia kodu)

Cały kod HTML i JS

<form>
  	Firma <input type="text" id="firma" name="Firma" value="GZus SP Z O.O."> <br>
  	Miasto: <input type="text" id="miasto" name="miasto" value="Kielce"> <br>
	Adres <input type="text" id="adres" name="adres" value="ul. Henryka Sienkiewicza 2 "> <br>
	Adres email <input type="text" id="email" name="AdresEmail" value="[email protected]"> <br>
</form> 	
<button id="cmd"> PDF</button>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="/wp-content/themes/twentyseventeen/libs/jspdf.js"></script>
<script src="/wp-content/themes/twentyseventeen/libs/FileSaver.js"></script>
<script src="/wp-content/themes/twentyseventeen/libs/customfonts.js"></script>
<script src="/wp-content/themes/twentyseventeen/libs/vfs_fonts.js"></script>
<script>
	$(document).ready(function(){
			$('#cmd').click(function () {
				var firma=document.getElementById("firma").value;		
				var miasto=document.getElementById("miasto").value;
				var adres=document.getElementById("adres").value;
				var email=document.getElementById("email").value;
				var doc = new jsPDF();
				doc.addFont("Abha.ttf", "Abha", "normal", "Identity-H");
				doc.setFont("Abha");        // set font
				//doc.setTextColor(153,051,102);
				doc.setCharSpace(1);		
				doc.setFontSize(15);	
				doc.drawText(25, 60, "* Pracuję w fimie o nazwie: ");	
				doc.drawText(25, 65,  	firma +" z siedzibą w "+ miasto);	
				doc.drawText(25, 70, " 	pod adresem "+ adres);	
				doc.save("jspdf.pdf");
			}); // end of $('#cmd').click
	}); // end of $(document).ready
</script>

Niestety zrozumienie ze edytor WP robi problemy nawet gdy między rzedami jest odstęp ( dodatkowy enter) zajęło mi bardzo dużo czasu
2. Pobieranie danych z formularza
Tworzenie formularza
By móc pobrać dane z formularza najpierw trzeba go mieć

<form>
  	Firma <input type="text" id="firma" name="Firma" value="GZus SP Z O.O."> <br>
  	Miasto: <input type="text" id="miasto" name="miasto" value="Kielce"> <br>
	Adres <input type="text" id="adres" name="adres" value="ul. Henryka Sienkiewicza 2 "> <br>
	Adres email <input type="text" id="email" name="AdresEmail" value="[email protected]"> <br>
</form>

3. Dołączenie biblioteki jsPDF
   Licencja jsPDF
   https://github.com/MrRio/jsPDF/blob/master/MIT-LICENSE.txt
   Pobieranie
   https://github.com/sphilee/jsPDF-CustomFonts-support/files/933923/jsPDF-CustomFonts-support.zip
   Instalacjia
   Ja za pomocą programu FileZilla w Folderze motywu utworzyłem folder libs. Tam wgrałem wszystkie pliki *.js ( mimo że w pobranym pliku *.zip tak nie jest).
   Dołączenie do Strony

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="/wp-content/themes/twentyseventeen/libs/jspdf.js"></script>
<script src="/wp-content/themes/twentyseventeen/libs/FileSaver.js"></script>
<script src="/wp-content/themes/twentyseventeen/libs/customfonts.js"></script>
<script src="/wp-content/themes/twentyseventeen/libs/vfs_fonts.js"></script>

4. Button
   Skoro mamy formularz z danymi i będziemy korzystać z jsPDF to oznacza że musimy użyć JavaScript. Do uruchomienia Funkcji JS wykorzystamy przycisk
   <button id="cmd"> PDF</button>

5. Kod JS
   Podłączenie się do przycisku
   Nasz przycisk ma id cmd w kodzie HTML, więc się do niego podpinamy w drzewku DOM. Po krótce do naszego buttona dołączyliśmy tzw. Listenera który uruchomi nam funkcję w nim zawartą.

<script>
$(document).ready(function(){
$('#cmd').click(function () {
		}); // end of $('#cmd').click
}); // end of $(document).ready
</script>

jsPDF
Pierwsze 4 wersy. To pobieranie danych z formularzy. Często podczas debugowania raz używałem „składni” Jquer raz bardzie tradycyjnej (JS).
W wersie 5 tworzony jest pusty dokument PDF (jako parametry domyślnie są to strona A4, a numerki w MiliMetrach)
Wers 5 i 6 to dodawanie obsługi czcionki. Swoją szosą tu myślałem że skoro czcionka ma rozszerzenie *.ttf, to czy można dodać z C:\Windows\Fonts :D
W 7 wersie mam komentarz, gdzie jest metoda setTextColor() która zmienia kolor tekstu (parametry to RGB) ale domyślny to czarny wiec inne mnie nie interesowały
CharSpace() ustala odległość między znakami
FontSize ustawia wielkość czcionki
drawText rysuje nam literki i cyferki, Jako parametr przyjmuje kolejno X,Y,”text_do _wyświetlenia”) . gdzie X&Y to współrzędne miejsca na stronie, liczone w milimetrach od górnego lewego boku.

				var firma=document.getElementById("firma").value;		
				var miasto=document.getElementById("miasto").value;
				var adres=document.getElementById("adres").value;
				var email=document.getElementById("email").value;
				var doc = new jsPDF();
				doc.addFont("Abha.ttf", "Abha", "normal", "Identity-H");
				doc.setFont("Abha");        // set font
				//doc.setTextColor(153,051,102);
				doc.setCharSpace(1);		
				doc.setFontSize(15);	
				doc.drawText(25, 60, "* Pracuję w fimie o nazwie: ");	
				doc.drawText(25, 65,  	firma +" z siedzibą w "+ miasto);	
				doc.drawText(25, 70, " 	pod adresem "+ adres);	
				doc.save("jspdf.pdf");