Tinha uma aplicação com angular e firebase tambem mas era um PDV
imprimia os pedidos da seguinte forma tinha uma classe ou modelo para cada tipo de pedido nessa classe tinha dois metodos um para desenhar o html que ia ser impresso e a outra para chamar a janela de impressão:
// 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>';
}
}
Para usar era simples:
// 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);
}
}
Bom depois precisei de um solução mais robusta para compactar muitos relatorios etc.. mas de inicio isso me ajudou bastante.
Espero ter ajudado :D