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
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
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.