Mam następujący kod HTML:
<!DOCTYPE html>
<html>
<body>
<p>don't print this to pdf</p>
<div id="pdf">
<p><font size="3" color="red">print this to pdf</font></p>
</div>
</body>
</html>
Wszystko, co chcę zrobić, to wydrukować do pdf wszystko, co znajdzie się w div z identyfikatorem „pdf”. Należy to zrobić za pomocą JavaScript. Dokument „pdf” należy następnie automatycznie pobrać z nazwą pliku „foobar.pdf”
Użyłem do tego jspdf, ale jedyną jego funkcją jest „tekst”, który akceptuje tylko wartości ciągu. Chcę przesłać HTML do jspdf, a nie tekstu.
javascript
jspdf
John Crawford
źródło
źródło
fromHTML
funkcji; patrz przykład „Renderer HTML” pod adresem: mrrio.github.io/jsPDFOdpowiedzi:
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:
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:
Następnie używasz następującego kodu JavaScript, aby otworzyć utworzony plik PDF w PopUp:
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:
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ć:
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:
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:
źródło
<div>
, który może być jednym z setek - więc musi zaznaczyć wszystkie niechciane elementy DOM?To jest proste rozwiązanie. To działa dla mnie. Możesz użyć koncepcji drukowania javascript i po prostu zapisać to jako pdf.
źródło
Możesz użyć autoPrint () i ustawić wyjście na 'dataurlnewwindow' w następujący sposób:
źródło
jeśli chcesz pobrać pdf konkretnej strony, po prostu dodaj przycisk w ten sposób
użyj window.print (), aby wydrukować całą stronę, a nie tylko div
źródło
document.querySelector("#myIframe").contentWindow.print()
Jak wspomniano, powinieneś używać jsPDF i html2canvas . Znalazłem również funkcję w wydaniach jsPDF, która automatycznie dzieli twój pdf na wiele stron ( źródeł )
źródło
Jednym ze sposobów jest użycie funkcji window.print (). Który nie wymaga żadnej biblioteki
Plusy
1. Żadna zewnętrzna biblioteka nie wymaga.
2. Możemy również wydrukować tylko wybrane części ciała.
3. Brak konfliktów css i problemów z js.
4. rdzeń html / js funkcjonalność
--- Po prostu dodaj poniższy kod
CSS do
Kod JS - Wywołaj funkcję bewlow po kliknięciu btn
Uwaga: Użyj! Ważne w każdym obiekcie css
Przykład -
źródło
Używam jspdf i html2canvas do renderowania css i eksportuję zawartość określonego div, ponieważ jest to mój kod
źródło
http://...domain.../path.css
lub mniej więcej. Tworzy osobny dokument HTML i nie ma kontekstu głównego.Służyło mi to od lat:
źródło
<body >
, potrzebuje: PJeśli chcesz wyeksportować tabelę, możesz rzucić okiem na tę próbkę eksportu dostarczoną przez widget Siatka interfejsu użytkownika osłony.
Odbywa się to poprzez rozszerzenie konfiguracji w następujący sposób:
źródło
Użyj pdfMake.js i tego Gist .
(Znalazłem tutaj Gist wraz z linkiem do pakietu html-to-pdfmake , którego na razie nie używam.)
Po
npm install pdfmake
zapisaniu GisthtmlToPdf.js
i używam go w następujący sposób:Uwagi:
pdfMake
„sgetBuffer()
funkcji), wszystkie z przeglądarki. Wygenerowany plik PDF okazuje się być lepszy dla tego rodzaju plików HTML niż w przypadku innych rozwiązań, które wypróbowałem.jsPDF.fromHTML()
sugerowanej w przyjętej odpowiedzi, ponieważ rozwiązanie to łatwo pomylić ze znakami specjalnymi w moim HTML, które najwyraźniej są interpretowane jako rodzaj znaczników i całkowicie psują wynikowy plik PDF.jsPDF.from_html()
funkcja, których nie należy mylić z tą z zaakceptowanej odpowiedzi) nie jest dla mnie opcją, ponieważ chcę, aby tekst w wygenerowanym pliku PDF mógł być wklejany, podczas gdy rozwiązania oparte na kanwie generują pliki PDF na podstawie bitmapy.źródło
Byłem w stanie zmusić jsPDF do drukowania dynamicznie tworzonych tabel z div.
Działa świetnie z Chrome i Firefox ... formatowanie jest wysadzone w IE.
Dołączyłem także:
źródło
Aby przechwycić div jako PDF, możesz użyć rozwiązania https://grabz.it . Ma JavaScript API, który jest łatwy i elastyczny i pozwala uchwycić zawartość pojedynczego elementu HTML, takiego jak div lub span
Aby go zaimplementować, musisz najpierw uzyskać klucz aplikacji i klucz tajny oraz pobrać (bezpłatny) zestaw SDK.
A teraz przykład.
Powiedzmy, że masz HTML:
Aby przechwycić zawartość identyfikatora funkcji, musisz:
Uwaga
target: #feature
.#feature
czy jesteś selektorem CSS, jak w poprzednim przykładzie. Teraz, gdy strona zostanie załadowana, zrzut ekranu obrazu zostanie teraz utworzony w tej samej lokalizacji, co tag skryptu, który będzie zawierał całą zawartość div div i nic więcej.Są inne konfiguracje i dostosowania, które możesz zrobić w mechanizmie div-screenshot, sprawdź je tutaj
źródło