Uno de los requisitos que he tenido que crear en apps del mundo real es la necesidad de crear un contrato en PDF, el mismo que tenga una imagen, y se puede descargar al dispositivo.
En el modulo general, en app.module.ts tenemos que llamar al modulo file que nos ayudará una vez creado el PDF, generar el archivo para descarga. El código del app.module.ts quedaría así:
}
Finalmente compilamos todo el proyecto con ionic serve y funcionaría así.
Finalmente se descarga el PDF y listo terminamos por el día de hoy.
PDF MAKE
Investigando he dado con una librería llamada PDF Make, aquí esta el sitio web si gustas darle un super vistazo al sin número de opciones que tiene. http://pdfmake.org/#/, hasta tiene una parte donde tu mismo puedes experimentar http://pdfmake.org/playground.html algunos cambios, pero nosotros lo tenemos que implementar en ionic 5. Así que veamos como.Ionic 5 y Generación de PDF
Creamos una nueva aplicación en ionic con el comando:ionic start crearPdf blankNecesitamos dos directivas instalarla en nuestro proyecto, con los siguientes comandos:
ionic cordova plugin add cordova-plugin-file
npm install @ionic-native/file
En el modulo general, en app.module.ts tenemos que llamar al modulo file que nos ayudará una vez creado el PDF, generar el archivo para descarga. El código del app.module.ts quedaría así:
import { File } from '@ionic-native/file/ngx';Y en los providers añadirlo, quedando así:
providers: [En el home.page.html o en la página donde quieras generar el PDF, deberás incluir un botón o un método que llame ta función, para este caso crearemos un botón que diga Generar PDF. Y quedaría de la siguiente forma:
StatusBar,
File,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
<ion-content>En el archivo .ts del Home crearemos la función crearPDF, quedando así el archivo home.page.ts:
<div id="wrapper">
<ion-button color="primary" (click)='crearPdf()' >Generar PDF</ion-button>
</div>
</ion-content>
makePdf(){
pdfmake.vfs = pdfFonts.pdfMake.vfs;
var docDefinition = {
content: [
{
columns: [
{
image: 'data:image/png;base64, (aqui tu imagen en base 64)
},
[
{ text: 'CLARO', style: 'header' },
{ text: 'Contrato de Contratacion de Servicios', style: 'sub_header' },
{ text: 'WEBSITE: https://claro.com.ec/', style: 'url' },
]
]
}
],
styles: {
header: {
bold: true,
fontSize: 20,
alignment: 'right'
},
sub_header: {
fontSize: 18,
alignment: 'right'
},
url: {
fontSize: 16,
alignment: 'right'
}
},
pageSize: 'A4',
pageOrientation: 'portrait'
};
/* pdfmake.createPdf(docDefinition).open(); */
pdfmake.createPdf(docDefinition).download('archivo');
Finalmente compilamos todo el proyecto con ionic serve y funcionaría así.
Finalmente se descarga el PDF y listo terminamos por el día de hoy.
Comentarios
Publicar un comentario