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

Estrada Web Group
Administrador
¿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;
}  

 

Compartir artículo:

Más artículos geniales

Cómo exporte datos de tablas HTML a Excel, CSV, PNG y PDF con jQuery

Cómo exporte datos de tablas HTML a Excel, CSV, PNG y PDF con jQuery

Exportar datos a Excel, pdf, entre otros formatos es una característica muy común en los sitios web. Hay muchas herramientas que se usan para exportar datos de tablas en formato xml, csv y png pero en esta ocasión te mostrare el plugin TableExport.

Ver artículo completo
¿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ó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.

Ver artículo completo

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla ;