From ea74d1891c3c57765d3bde94c226a2de5fbfcdfa Mon Sep 17 00:00:00 2001 From: isUnknown Date: Mon, 8 Dec 2025 14:05:16 +0100 Subject: [PATCH] feat: add print button that replaces page content for printing MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Instead of trying to print iframe directly, the print button: 1. Collects all styles from the iframe 2. Replaces the main page content with iframe content 3. Triggers window.print() 4. Reloads the page to restore the app This ensures the PagedJS rendered content prints correctly. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- src/App.vue | 153 ++++++++++++++++++++++++++++++---------------------- 1 file changed, 88 insertions(+), 65 deletions(-) diff --git a/src/App.vue b/src/App.vue index f51be59..cee7e1b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -4,7 +4,7 @@ import EditorPanel from './components/editor/EditorPanel.vue'; import ElementPopup from './components/ElementPopup.vue'; import PagePopup from './components/PagePopup.vue'; import PreviewLoader from './components/PreviewLoader.vue'; -import { onMounted, onUnmounted, ref, watch, computed, provide } from 'vue'; +import { onMounted, ref, watch, computed, provide } from 'vue'; import { useStylesheetStore } from './stores/stylesheet'; import Coloris from '@melloware/coloris'; @@ -274,79 +274,66 @@ watch( } ); -// Handle Cmd+P / Ctrl+P to print the iframe content -const handlePrint = async (event) => { - if ((event.metaKey || event.ctrlKey) && event.key === 'p') { - event.preventDefault(); - const frame = activeFrame.value; - if (frame && frame.contentDocument) { - const doc = frame.contentDocument; +// Print the PagedJS content +const printPreview = async () => { + const frame = activeFrame.value; + if (!frame || !frame.contentDocument) return; - // Collect all styles (inline and from stylesheets) - let allStyles = ''; + const doc = frame.contentDocument; - // Get inline - - ${bodyContent} - - `; - - // Open print window - const printWindow = window.open('', '_blank'); - printWindow.document.write(printContent); - printWindow.document.close(); - - // Wait for rendering then print - setTimeout(() => { - printWindow.print(); - printWindow.close(); - }, 100); } } + + // Save current page content + const originalContent = document.body.innerHTML; + const originalStyles = document.head.innerHTML; + + // Replace page content with iframe content + document.head.innerHTML = ` + + Impression + + `; + document.body.innerHTML = doc.body.innerHTML; + + // Print + window.print(); + + // Restore original content after print dialog closes + setTimeout(() => { + document.head.innerHTML = originalStyles; + document.body.innerHTML = originalContent; + // Re-mount Vue app would be needed, so we reload instead + window.location.reload(); + }, 100); }; -onMounted(() => { - renderPreview(true); - window.addEventListener('keydown', handlePrint); -}); - -onUnmounted(() => { - window.removeEventListener('keydown', handlePrint); -}); +onMounted(() => renderPreview(true));