L'exportation de PDF avec jspdf pas de rendu CSS

Je suis en utilisant jspdf.debug.js pour exporter des données différentes à partir d'un site web, mais il ya quelques problèmes, je n'arrive pas à rendre le CSS dans le fichier PDF exporté et si j'ai une image dans la page que je suis l'exportation, le PDF retourne vide...

Que quelqu'un connait un moyen de résoudre ce problème ?

Ici est un jsfiddle montrant ce n'est pas le rendu de la CSS

Et mon script

$(document).ready(function() {
$('#export').click(function(){
var d = new Date().toISOString().slice(0, 19).replace(/-/g, ""),
        filename = 'financiar_' + d + '.pdf',
        pdf = new jsPDF('p', 'pt', 'letter'),
        specialElementHandlers = {
          '#editor': function( element, renderer ) {
              return true;
          }
    };
    pdf.fromHTML(
          $('.export').get(0) //HTML element
        , 25  //x coord
        , 25  //y coord
        , {
              'width': 550 //was 7.5, max width of content on PDF
            , elementHandlers: specialElementHandlers
        }
    );
    pdf.save( filename );
})
});

github problème avec quelques conseils sur ce qui est ici github.com/MrRio/jsPDF/issues/91

InformationsquelleAutor Alin | 2014-09-20

23

Que je sais jsPDF ne fonctionne pas avec le CSS et le même problème, j'ai été confronté.

Pour résoudre ce problème, j'ai utilisé Html2Canvas. Juste Ajouter HTML2Canvas JS et ensuite utiliser pdf.addHTML() au lieu de pdf.fromHTML().

Voici mon code (aucun autre code):
```
 var pdf = new jsPDF('p', 'pt', 'letter');
 pdf.addHTML($('#ElementYouWantToConvertToPdf')[0], function () {
     pdf.save('Test.pdf');
 });
```
Bonne Chance!

Edit: reportez-vous à cette ligne dans le cas où vous n'avez pas trouvé .addHTML()
- Hmm, je vais être à la recherche, mais aussi loin que je peux voir, il ne les sorties de la CSS1 à partir de la feuille de style. Hmm, je suis à creuser un peu.
- Comment puis-je enlever le fond noir et d'améliorer la qualité de sortie?
- Salut, pour une raison quelconque, mon imprimé en format PDF uniquement a la moitié, partie gauche. J'ai suivi vos instructions par l'ajout des scripts, à l'aide de pdf.addHTML() au lieu de pdf.fromHTML(). Tout soupçon? Merci
- Ce ne sera pas pour longtemps l'image. Si l'image/le contenu de plus d'une page.
- S'il vous plaît, il a travaillé avec moi, mais il y a des problèmes avec la langue arabe formiate! Toute aide
- Quel est l'enjeu?
- comme ce problème stackoverflow.com/questions/26701878/...
- ne peut pas générer de l'arabe format correctement
- Merci, je peux le gérer par créer une image à l'intérieur de toile contenant du texte arabe, puis lors de la conversion au format pdf, il est l'image plutôt que du texte 🙂 ces comme cet exemple
- addHTML n'est pas une fonction, j'ai ajouté HTML2Canvas JS ainsi.. et même pas une telle fonction dans jspdf..
- Réponse D'Édition. Veuillez vérifier.
- Savez-vous comment résoudre le problème si le fichier pdf floue? J'ai utilisé exactement le même code à partir de la réponse ci-dessus. Le fichier est généré, mais paraît floue.
- Pas sûr, mais pouvez-vous essayer cette autre structure HTML parce que peut-être il peut être de structure html?
InformationsquelleAutor Mihir
13

jspdf ne fonctionne pas avec le css mais il est capable de fonctionner avec html2canvas. Vous pouvez utiliser jspdf avec html2canvas.

inclure ces deux fichiers dans le script sur votre page :
```
<script type="text/javascript" src="html2canvas.js"></script>
  <script type="text/javascript" src="jspdf.min.js"></script>
  <script type="text/javascript">
  function genPDF()
  {
   html2canvas(document.body,{
   onrendered:function(canvas){

   var img=canvas.toDataURL("image/png");
   var doc = new jsPDF();
   doc.addImage(img,'JPEG',20,20);
   doc.save('test.pdf');
   }

   });

  }
  </script>
```
Vous avez besoin de télécharger des fichiers de script tels que
https://github.com/niklasvh/html2canvas/releases
https://cdnjs.com/libraries/jspdf

faire bouton cliquable sur la page de sorte qu'il va générer un fichier pdf et l'on verra même que celle de l'original de la page html.
```
<a href="javascript:genPDF()">Download PDF</a>  
```
Cela fonctionnera parfaitement.
- Merci, a fonctionné parfaitement pour moi.
InformationsquelleAutor Bhinal Chauhan
1

Vous pouvez obtenir de l'exemple de css mise en œuvre html pour la conversion en pdf à l'aide de jspdf sur le lien suivant:
JSFiddle Lien

C'est un exemple de code pour le jspdf html to pdf téléchargement.
```
$('#print-btn').click(() => {
    var pdf = new jsPDF('p','pt','a4');
    pdf.addHTML(document.body,function() {
        pdf.save('web.pdf');
    });
})
```
- Il pourrait être parce que dans un violon nous n'avons pas beaucoup d'accès modifier l'arrière-plan, mais si vous pouviez mettre en œuvre la même chose sur votre code, vous pouvez modifier l'arrière-plan avec des propriétés css.
InformationsquelleAutor rajesh yadav

Légère modification @rejesh-yadav merveilleuse réponse.

html2canvas maintenant retourne une promesse.

html2canvas(document.body).then(function (canvas) {
    var img = canvas.toDataURL("image/png");
    var doc = new jsPDF();
    doc.addImage(img, 'JPEG', 10, 10);
    doc.save('test.pdf');        
});

Espère que cela aide certains!

InformationsquelleAutor user3180664

-3

Pour supprimer un fond noir seulement ajouter de la couleur d'arrière-plan: blanc; pour le style de

InformationsquelleAutor JCristobal

Vous devez vous connecter pour publier un commentaire.