structured-render 0.0.3 → 0.0.4

package/dist/render/browser-rendering.js

@@ -73,6 +73,44 @@ export var OutputImageType;
     OutputImageType["Download"] = "download";
 })(OutputImageType || (OutputImageType = {}));
 // cspell:enable
+/**
+ * Triggers a file download from a Blob without opening the content in the browser.
+ *
+ * Firefox's content handler auto-opens downloaded PDFs in a new tab when it detects the `.pdf`
+ * extension on a blob URL download. To prevent this, Firefox uses a `data:` URI with an
+ * `application/octet-stream` MIME type. Data URIs don't carry a URL path, so Firefox can't perform
+ * extension-based content-type sniffing and won't match the download against its PDF handler.
+ *
+ * Other browsers use a standard blob URL + anchor download approach.
+ */
+async function triggerBlobDownload(blob, downloadFileName) {
+    const anchor = globalThis.document.createElement('a');
+    anchor.download = downloadFileName;
+    anchor.style.display = 'none';
+    if (navigator.userAgent.toLowerCase().includes('firefox')) {
+        const dataUrl = await new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => {
+                resolve(String(reader.result).replace(/^data:[^;]*;/, 'data:application/octet-stream;'));
+            };
+            reader.onerror = () => {
+                reject(new Error('Failed to read blob for download.'));
+            };
+            reader.readAsDataURL(blob);
+        });
+        anchor.href = dataUrl;
+    }
+    else {
+        const downloadBlob = new Blob([blob], { type: 'application/octet-stream' });
+        anchor.href = URL.createObjectURL(downloadBlob);
+        globalThis.setTimeout(() => {
+            URL.revokeObjectURL(anchor.href);
+        }, 40_000);
+    }
+    globalThis.document.body.append(anchor);
+    anchor.click();
+    anchor.remove();
+}
 function createHtml2PdfOptions(fileName) {
     return {
         margin: [
@@ -123,25 +161,44 @@ export async function renderInBrowser(structuredRenderData, { fileName, outputTy
     const htmlString = convertTemplateToString(html `
         <div class=${contentDivClass}>${DOMPurify.sanitize(dirtyHtml)}</div>
     `);
-    /**
-     * Render in a clean iframe context so html2canvas only clones the minimal iframe document
-     * instead of the entire host page DOM (which is extremely slow on complex pages).
-     */
     const html2PdfOptions = createHtml2PdfOptions(fileName);
-    const canvas = await renderHtmlToCanvas(htmlString, String(options.styles), html2PdfOptions);
-    const instance = htmlToPdf().set(html2PdfOptions).from(canvas);
     if (outputType.pdf) {
-        if (outputType.pdf === OutputPdfType.Download) {
-            return await instance.save(fileName);
+        /**
+         * For PDFs, create a hidden container in the main document (not an iframe) so html2pdf can
+         * inspect the DOM for page break positions while also having access to the styles. Passing
+         * a canvas loses page break info (tables get sliced). Passing an iframe element loses
+         * styles (html2pdf clones elements into the main document, dropping iframe styles).
+         */
+        const { wrapper, contentElement } = createIsolatedContentDiv(htmlString, String(options.styles), html2PdfOptions);
+        try {
+            const instance = htmlToPdf().set(html2PdfOptions).from(contentElement);
+            if (outputType.pdf === OutputPdfType.Download) {
+                const pdfBlob = (await instance.outputPdf(OutputPdfType.Blob));
+                const pdfFileName = fileName.endsWith('.pdf')
+                    ? fileName
+                    : `${fileName}.pdf`;
+                await triggerBlobDownload(pdfBlob, pdfFileName);
+                return;
+            }
+            else {
+                return await instance.outputPdf(outputType.pdf, {
+                    filename: fileName,
+                });
+            }
         }
-        else {
-            return await instance.outputPdf(outputType.pdf, {
-                filename: fileName,
-            });
+        finally {
+            wrapper.remove();
         }
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     }
     else if (outputType.image) {
+        /**
+         * For images, render to a canvas in a clean iframe context so html2canvas only clones the
+         * minimal iframe document instead of the entire host page DOM (which is extremely slow on
+         * complex pages). No page break logic is needed for images.
+         */
+        const canvas = await renderHtmlToCanvas(htmlString, String(options.styles), html2PdfOptions);
+        const instance = htmlToPdf().set(html2PdfOptions).from(canvas);
         if (outputType.image === OutputImageType.Download) {
             return await instance.toImg().save(fileName);
         }
@@ -155,11 +212,45 @@ export async function renderInBrowser(structuredRenderData, { fileName, outputTy
     }
 }
 /**
- * Render HTML content to a canvas using a clean, minimal iframe. This avoids the massive
- * performance penalty from html2canvas cloning the entire host page document (including all custom
- * elements, shadow DOM, and styles) just to render a small content div.
+ * Create a hidden container div in the main document with styles and content. Unlike an iframe, the
+ * styles live in the same document context so html2pdf.js can see them when it clones the element.
+ * This allows html2pdf to both render styles correctly AND inspect the DOM for page break positions.
+ *
+ * The caller is responsible for removing the returned wrapper when done.
  */
-async function renderHtmlToCanvas(htmlString, stylesString, html2PdfOptions) {
+function createIsolatedContentDiv(htmlString, stylesString, html2PdfOptions) {
+    const marginArray = normalizeMargin(html2PdfOptions.margin);
+    /** A4 page width in mm. */
+    const pageWidthMm = 210;
+    const innerWidthMm = pageWidthMm - marginArray[1] - marginArray[3];
+    const wrapper = globalThis.document.createElement('div');
+    wrapper.style.position = 'fixed';
+    wrapper.style.left = '-10000px';
+    wrapper.style.top = '0';
+    wrapper.style.width = `${innerWidthMm}mm`;
+    wrapper.style.overflow = 'hidden';
+    wrapper.setAttribute('aria-hidden', 'true');
+    const styleElement = globalThis.document.createElement('style');
+    styleElement.textContent = [
+        baseContentResetStyles,
+        stylesString,
+    ].join('\n');
+    wrapper.append(styleElement);
+    const contentContainer = globalThis.document.createElement('div');
+    contentContainer.innerHTML = htmlString;
+    wrapper.append(contentContainer);
+    globalThis.document.body.append(wrapper);
+    const contentElement = assertWrap.isDefined(contentContainer.firstElementChild);
+    return { wrapper, contentElement };
+}
+/**
+ * Create an isolated iframe containing the rendered HTML content and styles. The iframe provides a
+ * minimal document context so that html2canvas / html2pdf only need to process a small DOM tree
+ * instead of the entire host page.
+ *
+ * The caller is responsible for removing the iframe when done.
+ */
+async function createIsolatedContentIframe(htmlString, stylesString, html2PdfOptions) {
     const marginArray = normalizeMargin(html2PdfOptions.margin);
     /** A4 page width in mm. */
     const pageWidthMm = 210;
@@ -181,22 +272,31 @@ async function renderHtmlToCanvas(htmlString, stylesString, html2PdfOptions) {
         '</body></html>',
     ].join('');
     globalThis.document.body.append(iframe);
-    try {
-        await new Promise((resolve) => {
-            iframe.addEventListener('load', () => {
-                resolve();
-            }, {
-                once: true,
-            });
+    await new Promise((resolve) => {
+        iframe.addEventListener('load', () => {
+            resolve();
+        }, {
+            once: true,
         });
-        const iframeDoc = assertWrap.isDefined(iframe.contentDocument);
-        await iframeDoc.fonts.ready;
-        /**
-         * Elements from the iframe exist in a different window context, so `instanceof HTMLElement`
-         * (from the parent window) fails. Use assertWrap.isDefined since we control the HTML
-         * written to the iframe and know the first child is always an element.
-         */
-        const contentElement = assertWrap.isDefined(iframeDoc.body.firstElementChild);
+    });
+    const iframeDoc = assertWrap.isDefined(iframe.contentDocument);
+    await iframeDoc.fonts.ready;
+    /**
+     * Elements from the iframe exist in a different window context, so `instanceof HTMLElement`
+     * (from the parent window) fails. Use assertWrap.isDefined since we control the HTML written to
+     * the iframe and know the first child is always an element.
+     */
+    const contentElement = assertWrap.isDefined(iframeDoc.body.firstElementChild);
+    return { iframe, contentElement };
+}
+/**
+ * Render HTML content to a canvas using a clean, minimal iframe. This avoids the massive
+ * performance penalty from html2canvas cloning the entire host page document (including all custom
+ * elements, shadow DOM, and styles) just to render a small content div.
+ */
+async function renderHtmlToCanvas(htmlString, stylesString, html2PdfOptions) {
+    const { iframe, contentElement } = await createIsolatedContentIframe(htmlString, stylesString, html2PdfOptions);
+    try {
         return await importHtml2Canvas()(contentElement, {
             ...html2PdfOptions.html2canvas,
         });

package/dist/render/render-pdf.js

@@ -50,16 +50,65 @@ export async function printPdf(renderInput, params) {
         ...params,
     }));
     const blobUrl = URL.createObjectURL(pdfBlob);
+    /**
+     * Firefox uses PDF.js to render PDFs in iframes, which doesn't support printing via
+     * `contentWindow.print()` on blob URLs. Open a new window instead so Firefox's native PDF
+     * viewer handles it.
+     */
+    if (navigator.userAgent.toLowerCase().includes('firefox')) {
+        const printWindow = globalThis.window.open(blobUrl);
+        if (!printWindow) {
+            URL.revokeObjectURL(blobUrl);
+            throw new Error('Failed to open print window. Check your popup blocker settings.');
+        }
+        return;
+    }
     const printFrame = globalThis.document.createElement('iframe');
-    printFrame.style.display = 'none';
+    printFrame.style.position = 'fixed';
+    printFrame.style.left = '-10000px';
+    printFrame.style.top = '0';
+    printFrame.style.width = '1px';
+    printFrame.style.height = '1px';
+    printFrame.style.border = 'none';
+    printFrame.style.opacity = '0';
     printFrame.src = blobUrl;
     globalThis.document.body.append(printFrame);
     return new Promise((resolve) => {
         printFrame.onload = () => {
-            printFrame.contentWindow?.print();
-            URL.revokeObjectURL(blobUrl);
-            resolve();
-            printFrame.remove();
+            const contentWindow = printFrame.contentWindow;
+            if (!contentWindow) {
+                URL.revokeObjectURL(blobUrl);
+                printFrame.remove();
+                resolve();
+                return;
+            }
+            function cleanup() {
+                URL.revokeObjectURL(blobUrl);
+                printFrame.remove();
+                resolve();
+            }
+            let resolved = false;
+            function resolveOnce() {
+                if (resolved) {
+                    return;
+                }
+                resolved = true;
+                globalThis.window.removeEventListener('focus', focusFallback);
+                cleanup();
+            }
+            /**
+             * Fallback: when the print dialog closes (print or cancel), focus returns to the main
+             * window. Some browsers don't fire `afterprint` on the iframe's contentWindow when the
+             * user cancels.
+             */
+            function focusFallback() {
+                resolveOnce();
+            }
+            contentWindow.addEventListener('afterprint', () => {
+                resolveOnce();
+            }, { once: true });
+            globalThis.window.addEventListener('focus', focusFallback, { once: true });
+            contentWindow.print();
         };
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "structured-render",
-    "version": "0.0.3",
+    "version": "0.0.4",
     "description": "A library for safely rendering arbitrary data generated from any source.",
     "keywords": [
         "render",