Comment utiliser correctement la bibliothèque jsPDF

Question

Je veux convertir certains de mes divs en PDF et j'ai essayé la bibliothèque jsPDF mais sans succès. Il semble que je n'arrive pas à comprendre ce que je dois importer pour que la bibliothèque fonctionne. J'ai parcouru les exemples et je n'arrive toujours pas à comprendre. J'ai essayé les éléments suivants :

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

Après jQuery et :

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

à des fins de test mais je reçois :

"Cannot read property '#smdadminbar' of undefined"

où #smdadminbar est la première division du corps.

Answer 1

Vous pouvez utiliser le pdf à partir du html comme suit,

Etape 1 : Ajouter le script suivant à l'entête

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

ou télécharger localement

Étape 2 : Ajouter le code HTML script pour exécuter le code jsPDF

Personnalisez ceci pour passer l'identifiant ou changez simplement #content pour être l'identifiant dont vous avez besoin.

 <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>

Étape 3 : Ajoutez le contenu de votre corps

<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>

Reportez-vous au tutoriel original

Voir un violon en état de marche

Answer 2

Vous avez seulement besoin de ce lien jspdf.min.js

Il y a tout dedans.

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

Answer 3

D'après la dernière version (1.5.3), il n'y a pas d'erreur d'écriture. fromHTML() plus de méthode. Vous devez plutôt utiliser le plugin jsPDF HTML, voir : https://rawgit.com/MrRio/jsPDF/master/docs/module-html.html#~html

Vous devez également ajouter la bibliothèque html2canvas pour qu'elle fonctionne correctement : https://github.com/niklasvh/html2canvas

JS (d'après les documents de l'API) :

var doc = new jsPDF();   

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

Vous pouvez également fournir une chaîne HTML au lieu d'une référence à l'élément DOM.

Answer 4

C'est finalement ce qui a fait l'affaire pour moi (et qui a déclenché une disposition) :

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>

Et pour les adeptes de KnockoutJS, une petite liaison :

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);
    }
};

Answer 5

Et en vuejs, comment est-il applicable ?

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>