L'exportation de la page HTML au format PDF sur le clic de l'utilisateur à l'aide de JavaScript

Lorsque l'utilisateur cliquera sur GeneratePDF bouton, j'ai besoin d'exporter le code html de la page dans un fichier PDF. Je suis avec succès à l'exportation de la page HTML dans le fichier PDF, mais pour le premier clic seulement, je suis en mesure de télécharger les données au format PDF, mais à partir de la deuxième clic, je ne parviens pas à télécharger les données au format PDF. Je ne suis pas sûr de l'endroit où je suis allé mal dans le code.

Veuillez vérifier le code ici:

JS:

$(function() {
  var doc = new jsPDF();
  var specialElementHandlers = {
    '#editor': function(element, renderer) {
      return true;
    }
  };
  $('#cmd').click(function() {
    doc.fromHTML($('#target').html(), 15, 15, {
      'width': 170,
      'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');
  });
});

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.1.135/jspdf.min.js"></script>
<script type="text/javascript" src="http://cdn.uriit.ru/jsPDF/libs/adler32cs.js/adler32cs.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js
"></script>
<script type="text/javascript" src="libs/Blob.js/BlobBuilder.js"></script>
<script type="text/javascript" src="http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.from_html.js"></script>
<script type="text/javascript" src="js/basic.js"></script>

<body id="target">
  <div id="content">
    <h3>Hello, this is a H3 tag</h3>
    <a class="upload">Upload to Imgur</a> 
    <h2>this is <b>bold</b> <span style="color:red">red</span></h2> 
    <p>Feedback form with screenshot This script allows you to create feedback forms which include a screenshot, created on the clients browser, along with the form. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation
      as it does not make an actual screenshot, but builds the screenshot based on the information available on the page. How does it work? The script is based on the html2canvas library, which renders the current page as a canvas image, by reading the
      DOM and the different styles applied to the elements. This script adds the options for the user to draw elements on top of that image, such as mark points of interest on the image along with the feedback they send. It does not require any rendering
      from the server, as the whole image is created on the clients browser. No plugins, no flash, no interaction needed from the server, just pure JavaScript! Browser compatibility Firefox 3.5+ Newer versions of Google Chrome, Safari & Opera IE9
    </p>

  </div>
  <button id="cmd">generate PDF</button>
</body>

</html>

  • peut-être que stackoverflow.com/questions/18191893/... ?
  • Non j'ai essayé avec elle.. sa ne fonctionne pas
  • J'ai roulé la question que vous simplement constituée Kristof réponse, faisant de la réponse de perdre son sens. Ce n'est pas ok, quand vous avez de nouvelles questions, demandez-en un nouveau, ne pas muter la question de départ, si elle l'a déjà des réponses. Merci!
  • violon !trouvé .
  • hey c'est de travailler pour vous dans IE9?
InformationsquelleAutor Navyah | 2013-11-05
  1. 28

    C'est parce que vous définissez votre "doc" variable à l'extérieur de votre événement click. La première fois que vous cliquez sur le bouton de la doc variable contient une nouvelle jsPDF objet. Mais si vous cliquez une deuxième fois, cette variable ne peut être utilisée de la même manière, plus. Comme il est déjà défini et utilisé la fois précédente.

    le modifier:

    $(function () {

    var specialElementHandlers = {
        '#editor': function (element,renderer) {
            return true;
        }
    };
 $('#cmd').click(function () {
        var doc = new jsPDF();
        doc.fromHTML(
            $('#target').html(), 15, 15, 
            { 'width': 170, 'elementHandlers': specialElementHandlers }, 
            function(){ doc.save('sample-file.pdf'); }
        );

    });  
});

    et il va fonctionner.

    • Merci Kristof Feys, mais quand je clique sur le bouton, je peux voir les 2 windows. on est enregistrer au format PDF fenêtre et une nouvelle fenêtre s'ouvrant avec vue pdf, Comment puis-je supprimer PDf afficher dans une nouvelle fenêtre...
    • Hmmm... quand je l'ai testé ce dans jsFiddle je n'ai reçu que le "enregistrer en pdf" de la fenêtre. Je dirais que ces 2 fenêtres du navigateur / plugin related...
    • Oui, Dans jsFiddle c'est que de la SaveTo PDF fenêtre, mais dans l'Application Principale, Il est à obtenir un plus de fenêtre ouverte lorsque l'utilisateur clic,Comment puis-je supprimer cette nouvelle fenêtre.
    • Comme je n'arrive pas à reproduire votre problème, je ne peux pas vraiment debug il soit. Vous pourriez probablement essayer de supprimer tous vos plugins javascript utilisé (à l'exception de jquery & jspdf) et voir si cela fonctionne alors. Ensuite, vous pouvez les ajouter un par un pour voir qui produit l'erreur (si ma conjecture est correcte et qu'un de ces sont la production de la question de cours) ... Ou si vous avez pu reproduire le problème sur jsFiddle qui pourraient vous aider 🙂
    • Vous pouvez le voir dans cette JSFiddle, lorsque l'on clique sur le "bouton " générer" il montré 2 windows. l'une est la fenêtre pour enregistrer le fichier PDF et un autre nouveau navigateur est arriver a ouvert avec vue PDF jsfiddle.net/y2b7Q/299
    • Dans Firefox, c'est l'affichage de la nouvelle fenêtre, mais dans Chrome son travail parfait, mais dans Safari et IE sa ne fonctionne pas
    • vous pouvez essayer en l'enveloppant dans downloadify (cfr cet exemple: github.com/MrRio/jsPDF/blob/master/examples/downloadify.html)
    • laissez-nous continuer cette discussion dans le chat
    • J'ai travaillé sur l'exemple ci-dessus, et il ne travaille pas dans IE10. Et de style CSS n'est pas appliquée dans le fichier PDF. Comment obtenir la réelle styles CSS au format PDF et IE10 question.
    • $(document).ready(function) et $(function) sont identiques; learn.jquery.com/using-jquery-core/document-ready juste dit, "Si vous écrivez du code que les gens qui ne sont pas expérimentés avec jQuery peut le voir, il est préférable d'utiliser la forme longue."
    • qu'est-var specialElementHandlers = { '#editeur': function (element,rendu) { return true; } }; indique?
    • J'ai utilisé la solution ci-dessus, mais je vais avoir un vide de fichier PDF. Lorsque je vérifie la console, j'obtiens cette erreur jsPDF Warning: rendering issues? provide a callback to fromHTML! (anonymous) @ jspdf.debug.js:7747 je suis en utilisant le jsPDF CA hébergé bibliothèque Que puis-je faire?
    • Venez de générer un fichier pdf vide. J'ai également le même message d'erreur que @Rmf
    • j'ai mis à jour le code, si vous obtenez un fichier pdf vide, vous devriez essayer d'enregistrer le document dans une fonction de rappel (voir exemple)

    InformationsquelleAutor Kristof Feys