¿Cómo exportar una página web html a pdf con una API gratuita?

En este post veremos cómo convertir nuestra página web a PDF, esto es una tarea muy común en el desarrollo de sitios web, cómo exportar una página web o HTML a PDF.


Utilizaremos JavaScript par llamar la API que nos ayudará a exportar el HTML a PDF, podemos probar con diferentes páginas. Esta API nos será muy útil para exportar nuestros reportes HTML a PDF. Pasamos al ejemplo:

Ver Demo

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<title>Título</title>
</head>
<body>
<div class="container">
  <div class="row">
      <div class="col-md-12">
        <div class="form-group">
            <label for="exampleFormControlFile1">URL</label>
            <input class="form-control" type="text" id="txtUrl" placeholder="http://">
        </div>      
      </div>  
      <div class="col-md-12">
         <button type="button" id="btnExport" class="btn btn-success">Exportar a excel</button>
      </div>  
    </div>
 </div>
</body>
</html>

En el código anterior contamos con un HTML donde ponemos un campo de texto y un botón que nos sirve para llamar la función que hace la llamada a la API que convertirá nuestra página a PDF.

JavaScript

// JavaScript code
var overlayEstradaWebGroup = '<div class="overlayEstradaWebGroup"><img src="https://loading.io/spinners/bricks/lg.block-rotate-loading-gif.gif"/></div>';
$("#btnExport").click(function(){
  firmar();
})

function firmar() {
  $("body").append(overlayEstradaWebGroup);
            var dataJSON = {Pdf: "",Url: $("#txtUrl").val(),CabeceraPDFUrl: "",PiedePaginaPDFUrl: "",Orientation:true};
            $.ajax({
                type: 'POST',
                url: 'https://estradawebgroup.com/api/ConvertirPDF/GenerarPDF', 
                data: JSON.stringify(dataJSON),
                contentType: 'application/json; charset=utf-8', 
                dataType: 'json',
                success: function (data, textStatus, xhr) {
                  console.log(data);
                  // Insert a link that allows the user to download the PDF file
                  var link = document.createElement('a');
                  link.innerHTML = 'Download PDF file';
                  link.download = 'file.pdf';
                  link.href = 'data:application/pdf;base64,' + data.archivo; 
                  //document.body.appendChild(link);
                  $(".container").append(link)
                  $(".overlayEstradaWebGroup").remove();
                  
                   // window.open("data:application/pdf;base64, " + data.archivo);
                   // var sampleArr = base64ToArrayBuffer(data.archivo);
                    //saveByteArray("download doc firmado", sampleArr);
                },
                error: function (xhr, textStatus, errorThrown) {
                  console.log('Error in Operation');
                  $(".overlayEstradaWebGroup").remove();
                }
            }); 
}

En esta función que mandamos llamar cuando el usuario da clic en el botón btnExport, lo que hacemos en mediante Ajax mandamos llamar la API https://estradawebgroup.com/api/ConvertirPDF/GenerarPDF y le pasamos por POST los siguientes valores:

  • Pdf: Propiedad para convertir el archivo,
  • Url: La URL que va a convertir en PDF
  • CabeceraPDFUrl: Si tenemos una cabecera que queramos que nos ponga en todas las páginas del PDF, esta deberá ser una URL valida.
  • PiedePaginaPDFUrl: Si tenemos un pie de página que queramos que nos ponga en todas las páginas del PDF, esta deberá ser una URL valida.
  • Orientation: false es vertical y true es Horizontal.

La API gratuita para convertir el PDF nos regresa lo siguiente:

  • success: true si fue satisfactorio y false si genero un error.
  • mensaje:mensaje de error.
  • archivo: archivo en base64 del pdf

CSS

.overlayEstradaWebGroup {
    display: block;
    width: 100%;
    height: 100%;
    z-index: 999;
    position: absolute;
  top:0;
    background: rgba(0, 0, 0, 0.23);
}
.overlayEstradaWebGroup img{
  position: absolute;
  left: 50%;
  margin-left: -126px;
  top: 50%;
  margin-top: -126px;
}  

 

Artículos relacionados
Cómo exportar una página web con ASP.NET a PDF
Cómo exportar una página web con ASP.NET a PDF

En mi trabajo muchas ocasiones he tenido la ne

¿Cómo exportar una página web html a pdf con una API gratuita?
¿Cómo exportar una página web html a pdf con una API gratuita?

En este post veremos c&oacute;mo convertir nue

Cómo exportar una página web con PHP a PDF
Cómo exportar una página web con PHP a PDF

En el artículo anterior explique cómo exportar

16 Comentarios
  • Cisco Comentar
    jueves, 8 de marzo de 2018

    A person essentially lend a hand to make significantly posts I would state. That is the very first time I frequented your web page and thus far? I surprised with the research you made to create this particular publish amazing. Magnificent job!

  • Fregoso Comentar
    viernes, 16 de marzo de 2018

    obviously like your web site but you have to check the spelling on quite a few of your posts. Many of them are rife with spelling problems and I to find it very bothersome to inform the reality nevertheless I'll definitely come again again.

  • Trowbridge Comentar
    martes, 27 de marzo de 2018

    When I originally commented I clicked the "Notify me when new comments are added" checkbox and now each time a comment is added I get three emails with the same comment. Is there any way you can remove me from that service? Thank you!

  • Tran Comentar
    miércoles, 28 de marzo de 2018

    intentalo varias veces si funciona

  • Frederic Comentar
    viernes, 30 de marzo de 2018

    Yo agarre vip no es la gran cosa. whatsapp me gusto mas la gratis que la vip

  • Banks Comentar
    jueves, 5 de abril de 2018

    inscreve no meu canal

  • Winder Comentar
    martes, 10 de abril de 2018

    Hi there, every time i used to check web site posts here early in the morning, for the reason that i love to gain knowledge of more and more.

  • Knorr Comentar
    miércoles, 25 de abril de 2018

    Keep on working, great job!

  • Whitmore Comentar
    miércoles, 25 de abril de 2018

    Hello just wanted to give you a brief heads up and let you know a few of the images aren't loading correctly. I'm not sure why but I think its a linking issue. I've tried it in two different internet browsers and both show the same results.

  • McHale Comentar
    miércoles, 25 de abril de 2018

    Good answer back in return of this issue with real arguments and explaining everything regarding that.

  • Tauchert Comentar
    jueves, 26 de abril de 2018

    Pretty element of content. I simply stumbled upon your weblog and in accession capital to claim that I acquire in fact enjoyed account your blog posts. Any way I'll be subscribing in your augment or even I success you get admission to consistently fast.

  • Farrow Comentar
    viernes, 27 de abril de 2018

    I will right away grab your rss as I can't in finding your e-mail subscription link or e-newsletter service. Do you've any? Please permit me recognise in order that I may subscribe. Thanks.

  • Honeycutt Comentar
    martes, 1 de mayo de 2018

    Hi, i think that i saw you visited my website so i came to “return the favor”.I'm attempting to find things to improve my web site!I suppose its ok to use a few of your ideas!!

  • Mcnamee Comentar
    jueves, 17 de mayo de 2018

    This blog was... how do you say it? Relevant!! Finally I've found something which helped me. Thanks a lot!

  • Mcdaniels Comentar
    domingo, 27 de mayo de 2018

    Hi! Would you mind if I share your blog with my zynga group? There's a lot of people that I think would really enjoy your content. Please let me know. Thanks

  • Miles Comentar
    lunes, 28 de mayo de 2018

    I am extremely impressed with your writing skills and also with the layout on your blog. Is this a paid theme or did you modify it yourself? Anyway keep up the excellent quality writing, it's rare to see a great blog like this one nowadays.

Enviame un comentario