1

Tengo un formulario en Angular de varias páginas. Me gustaría exportar el html a PDF unificado por páginas y poder darle estilos, no que salga en el pdf una captura de pantalla de lo que se está viendo.

Gracias de antemano

2
  • Está bien que describas cuál es tu objetivo, pero además sería necesario que mostrases cuál ha sido tu progreso hasta el momento, de lo contrario será muy difícil ayudarte. Commented el 29 ago. 2019 a las 6:57
  • Te aconsejo completar el recorrido de bienvenida para entender cómo hacer buenas preguntas que sean bien recibidas. Commented el 29 ago. 2019 a las 8:42

1 respuesta 1

2

En mi trabajo tuve que realizar exactamente eso. Existe la libreria html2canvas, pero descubri que esta podria llegar a ser muy lenta, ya que clona todo el DOM y lo introduce en un iFrame, ademas de esta forma no reconocia a componente hijos de Angular, asi ejecute una de sus funciones y clone todo los elementos del contenedor que necesitaba con los estilos para luego convertilos en imagen y asi pasarlos a un pdf con jsPDF. Es muy posible que esta solucion se lenta pero se podria dejar en service worker.

import { DocumentCloner } from 'html2canvas/dist/lib/dom/document-cloner';
import * as jsPDF from 'jsPDF';
import { drawHTML } from 'rasterizeHTML';

const pdf: jsPDF = new jsPDF({
  format:           'letter',
  putOnlyUsedFonts: true,
  unit:             'px',
});
const documentCloner: DocumentCloner = new DocumentCloner(element, {
      id:             (Math.round(Math.random() * 1000) + Date.now()).toString(16),
      ignoreElements: true,
      inlineImages:   true,
      copyStyles:     true,
    });

    documentCloner.documentElement = documentCloner.cloneNode(element) as HTMLElement;
    const elementFrame = documentCloner.clonedReferenceElement;

    const element: HTMLDivElement = elementDom;
    const styleElement: CSSStyleDeclaration = 
    window.getComputedStyle(elementDom);
    const heightPage: number = parseInt(styleElement['height'], 10);
    const widthPage: number = parseInt(styleElement['width'], 10);

  const canvas = document.createElement('canvas') as HTMLCanvasElement;
    canvas.width = widthPage;
    canvas.height = heightPage;
    console.time('Rasterize');
    await drawHTML(elementFrame.innerHTML, canvas);

  const dataImage: string = canvas.toDataURL('image/png');
    const pdfWidth = pdf.internal.pageSize.width;
    const pdfHeight = (heightPage * pdfWidth) / widthPage;

    pdf.addImage(dataImage, 'PNG', 0, 0, pdfWidth, pdfHeight);

    pdf.save('project_page.pdf');

Este fue el codigo que utilice, espero que te sea de utilida, y por mi parte proximamente mejorare esto, ya que es lento y la imagen no es mucha calidad (en mi caso, todo depende de la cantidad de nodos que toque copiar), asi que cualquier contribuccion sera recibida.

1
  • La funcionalidad de un service worker no es la de hacer un trabajo lento y pesado en segundo plano. Todo lo contrario, su reacción debe ser la más rápida posible y delegar las esperas en eventos para no penalizar la experiencia del usuario.
    – franmost
    Commented el 3 sept. 2019 a las 5:57

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.