¿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:
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:
Cargando...
Artículos recientes
-
-
Cómo exportar una página web con PHP a PDF
05 marzo 2015
