jsPDF może korzystać z wtyczek. Aby umożliwić drukowanie HTML, musisz dołączyć pewne wtyczki i dlatego musisz wykonać następujące czynności:
- Wejdź na https://github.com/MrRio/jsPDF i pobierz najnowszą wersję.
- Dołącz następujące skrypty do swojego projektu:
- jspdf.js
- jspdf.plugin.from_html.js
- jspdf.plugin.split_text_to_size.js
- jspdf.plugin.standard_fonts_metrics.js
Jeśli chcesz zignorować niektóre elementy, musisz oznaczyć je identyfikatorem, który możesz następnie zignorować w specjalnym module obsługi jsPDF. Dlatego twój HTML powinien wyglądać tak:
<!DOCTYPE html>
<html>
<body>
<p id="ignorePDF">don't print this to pdf</p>
<div>
<p><font size="3" color="red">print this to pdf</font></p>
</div>
</body>
</html>
Następnie używasz następującego kodu JavaScript, aby otworzyć utworzony plik PDF w PopUp:
var doc = new jsPDF();
var elementHandler = {
'#ignorePDF': function (element, renderer) {
return true;
}
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
source,
15,
15,
{
'width': 180,'elementHandlers': elementHandler
});
doc.output("dataurlnewwindow");
Dla mnie stworzyło to ładny i schludny plik PDF, który zawierał tylko wiersz „wydrukuj to do pliku pdf”.
Należy pamiętać, że programy obsługi elementów specjalnych zajmują się tylko identyfikatorami w bieżącej wersji, co zostało również określone w numerze GitHub . W Stanach:
Ponieważ dopasowanie jest wykonywane względem każdego elementu w drzewie węzłów, moim pragnieniem było uczynienie go możliwie jak najszybszym. W takim przypadku oznaczało to „Dopasowywane są tylko identyfikatory elementów” Identyfikatory elementów są nadal wykonywane w stylu jQuery „#id”, ale nie oznacza to, że obsługiwane są wszystkie selektory jQuery.
Dlatego zastąpienie „#ignorePDF” selektorami klas, takimi jak „.ignorePDF”, nie działało dla mnie. Zamiast tego będziesz musiał dodać ten sam moduł obsługi dla każdego elementu, który chcesz zignorować:
var elementHandler = {
'#ignoreElement': function (element, renderer) {
return true;
},
'#anotherIdToBeIgnored': function (element, renderer) {
return true;
}
};
Z przykładów wynika również, że można wybrać tagi takie jak „a” lub „li”. Jednak może to być nieco zbyt restrykcyjne w przypadku większości przypadków użycia:
Wspieramy specjalne elementy obsługi. Zarejestruj je za pomocą selektora identyfikatorów w stylu jQuery dla identyfikatora lub nazwy węzła. („#iAmID”, „div”, „span” itp.) Obecnie nie ma obsługi żadnego innego typu selektorów (klasy, związku).
Jedną bardzo ważną rzeczą do dodania jest to, że tracisz wszystkie informacje o swoim stylu (CSS). Na szczęście jsPDF jest w stanie ładnie sformatować h1, h2, h3 itd., Co było wystarczające do moich celów. Dodatkowo drukuje tylko tekst w węzłach tekstowych, co oznacza, że nie drukuje wartości obszarów tekstowych i tym podobnych. Przykład:
<body>
<ul>
<!-- This is printed as the element contains a textnode -->
<li>Print me!</li>
</ul>
<div>
<!-- This is not printed because jsPDF doesn't deal with the value attribute -->
<input type="textarea" value="Please print me, too!">
</div>
</body>