jquery - tutorial - Exportar PDF con jspdf no representa CSS

jspdf html to pdf

Question

Estoy usando jspdf.debug.js para exportar diferentes datos de un sitio web, pero hay algunos problemas, no puedo hacer que muestre el CSS en el PDF exportado y si tengo una imagen en la página que estoy exportando, el PDF vuelve en blanco ...

¿Alguien sabe una manera de arreglar esto?

Aquí hay un jsfiddle muestra que no está representando el CSS

Y mi guion

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

Answer 1

Como sé, jsPDF no funciona con CSS y el mismo problema que estaba enfrentando.

Para resolver este problema, utilicé Html2Canvas . Simplemente agregue HTML2Canvas JS y luego use pdf.addHTML() lugar de pdf.fromHTML() .

Aquí está mi código (no hay otro código):

 var pdf = new jsPDF(''p'', ''pt'', ''letter'');
 pdf.addHTML($(''#ElementYouWantToConvertToPdf'')[0], function () {
     pdf.save(''Test.pdf'');
 });

¡La mejor de las suertes!

Editar: consulte esta línea en caso de que no haya encontrado .addHTML()

Answer 2

Ligero cambio a @ rejesh-yadav maravillosa respuesta.

html2canvas ahora devuelve una promesa.

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

Espero que esto ayude un poco!

Answer 3

Para eliminar el fondo negro solo agregue background-color: white; al estilo de

Answer 4

Puede obtener el ejemplo de conversión de html a pdf implementado por css usando jspdf en el siguiente enlace: JSFiddle Link

Este es un código de muestra para la descarga de jspdf html a pdf.

$(''#print-btn'').click(() => {
    var pdf = new jsPDF(''p'',''pt'',''a4'');
    pdf.addHTML(document.body,function() {
        pdf.save(''web.pdf'');
    });
})

Answer 5

jspdf no funciona con css pero puede funcionar junto con html2canvas. Puede usar jspdf junto con html2canvas.

incluya estos dos archivos en el script en su página:

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

Necesita descargar archivos de script como https://github.com/niklasvh/html2canvas/releases https://cdnjs.com/libraries/jspdf

haga clic en el botón en la página para que genere pdf y se vea igual que el de la página html original.

<a href="javascript:genPDF()">Download PDF</a>  

Funcionará perfectamente.