Comment utiliser correctement la bibliothèque jsPDF

je veux convertir certaines de mes divs en PDF et j'ai essayé la bibliothèque jsPDF mais sans succès. Il semble que je ne puisse pas comprendre ce que je dois importer pour faire fonctionner la bibliothèque. J'ai parcouru les exemples et je n'arrive toujours pas à le comprendre. J'ai essayé ce qui suit: 

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

D'après jQuery et: 

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

pour les tests mais je reçois: 

"Cannot read property '#smdadminbar' of undefined"

où #smdadminbar est la première div de corps.

63
demandé sur Amal Murali 2013-05-31 17:53:24

5 réponses

vous pouvez utiliser pdf de html comme suit,

Étape 1: ajouter le script suivant à l'en-tê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 un script HTML pour exécuter le code jsPDF

Personnalisez ceci pour passer l'identifiant ou juste changer le contenu #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: ajouter votre contenu corporel 

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

se référer au tutoriel d'origine

voir violon de travail

98
répondu Well Wisher 2017-01-12 12:56:42

vous n'avez besoin de ce lien que jspdf.min.js

il y a tout dedans. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
17
répondu user890332 2017-01-13 17:06:23

c'est finalement ce qui a fait pour moi (et déclenche 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 ceux de l'inclinaison KnockoutJS, une petite reliure: 

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);
    }
};
6
répondu pimbrouwers 2018-02-02 21:24:16

ne devriez-vous pas aussi utiliser le jspdf.plugin.from_html.bibliothèque js? Outre la bibliothèque principale (jspdf.js), vous devez utiliser d'autres bibliothèques pour les "opérations spéciales" (comme jspdf.plugin.addimage.js pour l'utilisation d'images). Vérifier https://github.com/MrRio/jsPDF .

3
répondu Pedro Almeida 2013-06-27 22:10:11

tout d'abord, vous devez créer un gestionnaire. 

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

puis écrivez ce code dans l'événement de clic: 

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

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

si vous avez déjà déclaré doc variable. Et puis vous avez enregistrer ce fichier pdf en utilisant File-Plugin.

3
répondu Akshay Tyagi 2015-02-06 08:21:50