Jak poprawnie korzystać z biblioteki jsPDF


85

Chcę przekonwertować niektóre z moich plików DIV do formatu PDF i wypróbowałem bibliotekę jsPDF, ale bezskutecznie. Wygląda na to, że nie rozumiem, co muszę zaimportować, aby biblioteka działała. Przejrzałem przykłady i nadal nie mogę tego rozgryźć. Wypróbowałem następujące:

<script type="text/javascript" src="js/jspdf.min.js"></script>

Po jQuery i:

$("#html2pdf").on('click', function(){
    var doc = new jsPDF();
    doc.fromHTML($('body').get(0), 15, 15, {
        'width': 170
    });
    console.log(doc);
});

do celów testowych, ale otrzymuję:

"Cannot read property '#smdadminbar' of undefined"

gdzie #smdadminbarjest pierwszy element div z ciała.



1
Uwaga dla wszystkich, którzy fromHTMLprzyjeżdżają tutaj, próbując dowiedzieć się, dlaczego nie jest to udokumentowane w dokumentach jsPDF: „Zamykamy ten problem, ponieważ nie będziemy już obsługiwać HTML i addHTML. ” ( Od numeru 516 )
toraritte

Odpowiedzi:


134

możesz użyć pdf z html w następujący sposób,

Krok 1: Dodaj następujący skrypt do nagłówka

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>

lub pobierz lokalnie

Krok 2: Dodaj skrypt HTML, aby wykonać kod jsPDF

Dostosuj to, aby przekazać identyfikator, lub po prostu zmień #content, aby był identyfikatorem, którego potrzebujesz.

 <script>
    function demoFromHTML() {
        var pdf = new jsPDF('p', 'pt', 'letter');
        // source can be HTML-formatted string, or a reference
        // to an actual DOM element from which the text will be scraped.
        source = $('#content')[0];

        // we support special element handlers. Register them with jQuery-style 
        // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
        // There is no support for any other type of selectors 
        // (class, of compound) at this time.
        specialElementHandlers = {
            // element with id of "bypass" - jQuery style selector
            '#bypassme': function (element, renderer) {
                // true = "handled elsewhere, bypass text extraction"
                return true
            }
        };
        margins = {
            top: 80,
            bottom: 60,
            left: 40,
            width: 522
        };
        // all coords and widths are in jsPDF instance's declared units
        // 'inches' in this case
        pdf.fromHTML(
            source, // HTML string or DOM elem ref.
            margins.left, // x coord
            margins.top, { // y coord
                'width': margins.width, // max width of content on PDF
                'elementHandlers': specialElementHandlers
            },

            function (dispose) {
                // dispose: object with X, Y of the last line add to the PDF 
                //          this allow the insertion of new lines after html
                pdf.save('Test.pdf');
            }, margins
        );
    }
</script>

Krok 3: Dodaj zawartość ciała

<a href="javascript:demoFromHTML()" class="button">Run Code</a>
<div id="content">
    <h1>  
        We support special element handlers. Register them with jQuery-style.
    </h1>
</div>

Zapoznaj się z oryginalnym samouczkiem

Zobacz działające skrzypce


4
Dziękuję za opublikowanie tego, ale wypróbowałem dokładny kod powyżej (lokalnie) i generuje on pusty dokument pdf. W ogóle nie działa z jquery 1.11.0, więc użyłem tej samej wersji jquery, co na github.com/MrRio/jsPDF/blob/master/examples/js/jquery/ ...
user1063287

Wypróbowałem twój kod @Well Wisher, dając mi następujący błąd, dla pliku biblioteki itd. - Nie można odczytać właściwości 'length' undefined jspdf.plugin.from_html.js: 500
Uczeń

1
Tak, to jest naprawdę dobre ,,, Ale dane wyjściowe JSPdf nakładają się na inne elementy mojej tabeli, jak mogę to rozwiązać? .... Zmieniłem rozmiar czcionek i ustawiłem go na tryb poziomy, próbowałem większość modyfikacji, ale nic nie działa
Sudhir Belagali

1
Udało mi się uruchomić ten przykład tylko przy użyciu sieci CDN CloudFlare: <script src = " cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/… > lub <script src =" cdnjs.cloudflare.com /ajax/libs/jspdf/1.2.61/… > Ale zgadzam się, dokumentacja i ogólne różnice w źródłach kodu przyczyniają się do trudności w korzystaniu z tej wtyczki. Nawet te sieci CDN (których używa JSfiddle) różnią się od linku „pobierz lokalnie” @Well wisher referencje powyżej.
Scott,

1
@Scott i the oni usunęli link
Well Wisher

17

Potrzebujesz tylko tego linku jspdf.min.js

Ma w sobie wszystko.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>

2
Dzięki, to doprowadzało mnie do szału! Używanie wersji debugowania jspdf działało, podczas gdy inne wersje w dowolnej konfiguracji nie. Może minifikacja jakoś to psuje? albo robię to źle.
jookyone

To naprawdę mi pomogło. Używałem oryginalnego pliku jspdf.js i nie działał. Użycie jspdf.debug.js załatwiło sprawę.
Francisco Quintero,

Ciekawe dlaczego wersja produkcyjna nie działa ... Umieściłem wszystkie wtyczki na stronie html, a jednak pomogła tylko ta wersja debugowania.
ilter

Cześć, próbowałem tego, ale pojawia się błąd Error in function FileSaver@http://mrrio.github.io/jsPDF/dist/jspdf.debug.js:5875:18: get_URL(...).createObjectURL is not a function, to samo, jeśli używam wersji z altanką. Jakaś wskazówka?
dbr

Sprawdź najnowszą wersję na GitHub i odpowiednio zmień powyższy adres URL. Najnowsza wersja to 1.3.5.
pasx

8

Oto, co w końcu zrobiło to dla mnie (i wyzwala dyspozycję):

function onClick() {
  var pdf = new jsPDF('p', 'pt', 'letter');
  pdf.canvas.height = 72 * 11;
  pdf.canvas.width = 72 * 8.5;

  pdf.fromHTML(document.body);

  pdf.save('test.pdf');
};

var element = document.getElementById("clickbind");
element.addEventListener("click", onClick);
<h1>Dsdas</h1>

<a id="clickbind" href="#">Click</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>

A dla tych o skłonnościach KnockoutJS, trochę wiążące:

ko.bindingHandlers.generatePDF = {
    init: function(element) {

        function onClick() {
            var pdf = new jsPDF('p', 'pt', 'letter');
            pdf.canvas.height = 72 * 11;
            pdf.canvas.width = 72 * 8.5;

            pdf.fromHTML(document.body);

            pdf.save('test.pdf');                    
        };

        element.addEventListener("click", onClick);
    }
};

Czy jest coś więcej w tym fragmencie? Kiedy próbuję to uruchomić, pojawia się błąd wskazujący, że plik „pdf.canvas” jest niezdefiniowany. „Uncaught TypeError: Cannot set property 'height' of undefined”
Ryan Gibbs,

Nie wiem co masz na myśli? Fragment jest wykonywany przy użyciu tego samego kodu. Więc może coś jest nie tak w twojej implementacji. Czy możesz console.log (pdf) i udostępniać dane wyjściowe.
pim

To musiał być problem z pamięcią podręczną, czy coś w tym stylu, kiedy próbowałem to teraz z użyciem console.log (), kod został wykonany poprawnie. Nadal pojawia się problem z pustą stroną, ale to inna historia. Dzięki.
Ryan Gibbs

również mam błąd „Nie można odczytać właściwości 'addEventListener'”
Manjitha Teshara

Uwielbiam tę bibliotekę jsPDF (). BTW, jeśli ktokolwiek uzna to za przydatne, właśnie wymyśliłem składnię dołączania wywołania zwrotnego do uruchomienia po wygenerowaniu pliku PDF:pdf.save("myfile.pdf", function(){ alert("pdf generation/save finished!"); });
Christopher D. Emerson

4

Według najnowszej wersji (1.5.3) nie ma fromHTML()już metody. Zamiast tego powinieneś skorzystać z wtyczki jsPDF HTML, zobacz: https://rawgit.com/MrRio/jsPDF/master/docs/module-html.html#~html

Musisz także dodać bibliotekę html2canvas, aby działała poprawnie: https://github.com/niklasvh/html2canvas

JS (z dokumentacji API):

var doc = new jsPDF();   

doc.html(document.body, {
   callback: function (doc) {
     doc.save();
   }
});

Możesz również podać ciąg znaków HTML zamiast odniesienia do elementu DOM.


Wydaje się, że już nie działa - jQuery.Deferred wyjątek: doc.html nie jest funkcją TypeError: doc.html nie jest funkcją
DropHit

3

Czy nie powinieneś również używać biblioteki jspdf.plugin.from_html.js? Oprócz głównej biblioteki (jspdf.js), musisz użyć innych bibliotek do „operacji specjalnych” (np. Jspdf.plugin.addimage.js do używania obrazów). Sprawdź https://github.com/MrRio/jsPDF .


3
Wydaje się, że plik jspdf.source.js zawiera wszystkie inne biblioteki.
whossname

3

najpierw musisz stworzyć handler.

var specialElementHandlers = {
    '#editor': function(element, renderer){
        return true;
    }
};

następnie napisz ten kod w przypadku kliknięcia:

doc.fromHTML($('body').get(0), 15, 15, {
    'width': 170, 
    'elementHandlers': specialElementHandlers
        });

var pdfOutput = doc.output();
            console.log(">>>"+pdfOutput );

zakładając, że już zadeklarowałeś zmienną doc. Następnie zapisz ten plik pdf za pomocą wtyczki plików.


1

a jak w vuejs, jak to ma zastosowanie?

function onClick() {
  var pdf = new jsPDF('p', 'pt', 'letter');
  pdf.canvas.height = 72 * 11;
  pdf.canvas.width = 72 * 8.5;

  pdf.fromHTML(document.body);

  pdf.save('test.pdf');
};

var element = document.getElementById("clickbind");
element.addEventListener("click", onClick);
<h1>Dsdas</h1>

<a id="clickbind" href="#">Click</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>


Dzięki za opublikowanie przykładu vuejs użycia jdpsf
Shane G
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.