From d3dd804a3f822c084e15a6be4bbf98fe7cf38f75 Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Fri, 8 Aug 2025 11:39:43 -0600 Subject: [PATCH] pdf export coming soon. --- .../ui/report/hooks/useExportReport.ts | 114 +----------------- 1 file changed, 1 insertion(+), 113 deletions(-) diff --git a/apps/web/src/components/ui/report/hooks/useExportReport.ts b/apps/web/src/components/ui/report/hooks/useExportReport.ts index a1a22a34b..29ea0ce53 100644 --- a/apps/web/src/components/ui/report/hooks/useExportReport.ts +++ b/apps/web/src/components/ui/report/hooks/useExportReport.ts @@ -79,119 +79,7 @@ export const useExportReport = () => { }; const exportToPdf = async (editor: PlateEditor) => { - try { - const { default: html2canvas } = await import('html2canvas-pro'); - - const editorNode = editor.api.toDOMNode(editor); - if (!editorNode) throw new Error('Editor not found'); - - // Clone the editor DOM to a sandbox so we can mutate it for printing - const clonedRoot = editorNode.cloneNode(true) as HTMLElement; - - // Sandbox: attach off-screen to compute sizes and rasterize metrics - const sandbox = document.createElement('div'); - sandbox.setAttribute('data-report-print-sandbox', 'true'); - sandbox.style.position = 'fixed'; - sandbox.style.left = '-10000px'; - sandbox.style.top = '0'; - sandbox.style.width = '850px'; - sandbox.style.pointerEvents = 'none'; - sandbox.appendChild(clonedRoot); - document.body.appendChild(sandbox); - - // Ensure consistent fonts in the clone - clonedRoot.style.fontFamily = - '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'; - - // Replace metric figures with rasterized images so only charts become images in PDF - const figureNodes = Array.from( - clonedRoot.querySelectorAll('figure[data-metric-figure]') - ); - - await Promise.all( - figureNodes.map(async (figure) => { - // Render the figure to a canvas, then replace with an image element - const canvas = await html2canvas(figure, { - backgroundColor: '#ffffff', - useCORS: true - }); - - const image = document.createElement('img'); - image.src = canvas.toDataURL('image/png'); - image.style.width = `${canvas.width}px`; - image.style.height = 'auto'; - image.setAttribute('data-exported-metric-image', 'true'); - - figure.replaceWith(image); - }) - ); - - // Build printable HTML document - const printWindow = window.open('', '_blank'); - if (!printWindow) throw new Error('Unable to open print window'); - - const headStyles = Array.from(document.querySelectorAll('link[rel="stylesheet"], style')) - .map((n) => n.outerHTML) - .join('\n'); - - const printHtml = ` - - - - - ${headStyles} - - - -
${clonedRoot.outerHTML}
- - `; - - printWindow.document.open(); - printWindow.document.write(printHtml); - printWindow.document.close(); - - // Wait for images to load in the print window before printing - await new Promise((resolve) => { - const imgs = Array.from(printWindow.document.images); - if (imgs.length === 0) return resolve(); - let loaded = 0; - imgs.forEach((img) => { - if (img.complete) { - loaded++; - if (loaded === imgs.length) resolve(); - } else { - img.onload = () => { - loaded++; - if (loaded === imgs.length) resolve(); - }; - img.onerror = () => { - loaded++; - if (loaded === imgs.length) resolve(); - }; - } - }); - }); - - // Cleanup sandbox - sandbox.remove(); - - // Print. User can select "Save as PDF" to get a true text PDF with charts as images. - printWindow.focus(); - printWindow.print(); - - openInfoMessage(NodeTypeLabels.pdfExportedSuccessfully.label); - } catch (error) { - console.error(error); - openErrorMessage(NodeTypeLabels.failedToExportPdf.label); - } + openInfoMessage('PDF export coming soon...'); }; const exportToImage = async (editor: PlateEditor) => {