Create Angular and Firebase reports

Question

Create Angular and Firebase reports

Asked 6 years, 10 months ago

Viewed 536 times

0

What to use to create reports with Angular and Firebase?

I have an application in the area of health with Angular and Firebase, I’m coming in the part of system reports and would like alternatives in creating reports.

The reports shall:

Be displayed online within the system and with the option to print.
Be downloaded in PDF to archive and if necessary print as well.

I would like to know what I can use to form reports with Angular and Firebase, I have been doing some research but nothing pleased me so, because I would like something that was faster for development.

1 answer

Browser other questions tagged html firebase typescript report angular

You are not signed in. Login or sign up in order to post.

by codermarcos • **378** points · Answer 1 · 2018-02-06T13:13:46+00:00

It had an application with angular and firebase as well but it was a PDV printed the requests as follows had a class or template for each type of request in that class had two methods one to draw the html that was going to be printed and the other to call the print window:

// relatorioPrinter.model.ts

export class RelatorioPrinter {
   public impressao: string;

   constructor(dados: any) {
       this.paint(dados);
   }

   public print(): void {
       const params = [
          '', 
          '_blank', 
          'height=ALTURA_DO PDF,width=LARGURA_DO_PDF'
       ]

       const popup = window.open(...params);

       popup.document.open();
       popup.document.write(this.impressao);
       popup.document.close();
   }

   public paint(dados: any): void {
       this.impressao = `<!DOCTYPE html>
                      <html>
                        <head>
                           <style>
                           /* SEU ESTILO AQUI */
                           </style>
                        </head>
                        <body onload="window.print()">`;

        this.impressao += `SEU HTML AQUI ${dados.SEUS_DADOS_AQUI}`;
        this.impressao += '</body></html>';
   }
}

To use was simple:

// exemplo.component.ts

import { Component } from '@angular/core';
import { RelatorioPrinter } from 'app/models/relatorioPrinter';

@Component({
    selector: 'app-exemplo',
    templateUrl: './exemplo.component.html'
 })
 export class ExemploComponent {
    public printer: RelatorioPrinter; 

    public constructor() { 
        const seuDados = {};
        this.printer = new RelatorioPrinter(seuDados);
    }
 }

Well then I needed a more robust solution to compress many reports etc. but at first it helped me a lot.

I hope I helped :D