web-dev-qa-db-fra.com

Comment utiliser correctement la bibliothèque jsPDF

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 ne comprenne pas 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é ce qui suit:

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

javascriptjqueryhtmljspdf
72
Daniela costina Vaduva

vous pouvez utiliser pdf à partir de HTML comme suit,

Étape 1: Ajoutez 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 du code jsPDF

Personnalisez-le pour transmettre l'identifiant ou changez simplement #content pour qu'il soit 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 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>

Reportez-vous au tutoriel d'origine

Voir un violon en marche

118
Well Wisher

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

Il a tout dedans.

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

C'est finalement ce qui me l'a fait (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 de KnockoutJS, un peu contraignant:

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

Ne devriez-vous pas également utiliser la bibliothèque jspdf.plugin.from_html.js? Outre la bibliothèque principale (jspdf.js), vous devez utiliser d'autres bibliothèques pour des "opérations spéciales" (comme jspdf.plugin.addimage.js pour utiliser des images). Vérifiez https://github.com/MrRio/jsPDF .

3
Pedro Almeida

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

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

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

en supposant que vous avez déjà déclaré une variable doc. Et puis vous avez sauvegardé ce fichier pdf en utilisant File-Plugin.

3
Akshay Tyagi

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