update

ts_web/elements/viewer.ts

@@ -506,6 +506,17 @@ export class DeDocumentViewer extends DeesElement {
           />
           <span class="spacing-value">${this.pageGap}px</span>
         </div>
+
+        <div class="controls__divider"></div>
+
+        <!-- Print Button -->
+        <button
+          class="controls__button"
+          @click=${() => this.handlePrint()}
+          title="Print Document"
+        >
+          <dees-icon icon="lucide:printer"></dees-icon>
+        </button>
       </div>
     `;
   }
@@ -582,6 +593,88 @@ export class DeDocumentViewer extends DeesElement {
     this.pageGap = parseInt((e.target as HTMLInputElement).value, 10);
   }
 
+  private async handlePrint(): Promise<void> {
+    // Create a print-specific container
+    const printContainer = document.createElement("div");
+    printContainer.className = "dedocument-print-container";
+    printContainer.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 999999;
+      background: white;
+      overflow: visible;
+    `;
+
+    // Create a document element in print mode
+    const printDoc = document.createElement("dedocument-dedocument") as DeDocument;
+    printDoc.letterData = this.letterData;
+    printDoc.documentSettings = this.documentSettings;
+    printDoc.printMode = true;
+    printDoc.pageGap = 0;
+
+    printContainer.appendChild(printDoc);
+    document.body.appendChild(printContainer);
+
+    // Add print styles
+    const printStyles = document.createElement("style");
+    printStyles.id = "dedocument-print-styles";
+    printStyles.textContent = `
+      @media print {
+        body > *:not(.dedocument-print-container) {
+          display: none !important;
+        }
+        .dedocument-print-container {
+          position: static !important;
+          width: auto !important;
+          height: auto !important;
+        }
+        dedocument-dedocument {
+          display: block !important;
+        }
+        dedocument-page {
+          page-break-after: always;
+          page-break-inside: avoid;
+          break-after: page;
+          break-inside: avoid;
+        }
+        dedocument-page:last-child {
+          page-break-after: auto;
+          break-after: auto;
+        }
+        @page {
+          size: A4;
+          margin: 0;
+        }
+      }
+    `;
+    document.head.appendChild(printStyles);
+
+    // Wait for the document to render
+    await new Promise((resolve) => setTimeout(resolve, 500));
+
+    // Trigger print
+    window.print();
+
+    // Clean up after print dialog closes
+    const cleanup = () => {
+      printContainer.remove();
+      printStyles.remove();
+      window.removeEventListener("afterprint", cleanup);
+    };
+
+    window.addEventListener("afterprint", cleanup);
+
+    // Fallback cleanup after a delay (in case afterprint doesn't fire)
+    setTimeout(() => {
+      if (document.body.contains(printContainer)) {
+        cleanup();
+      }
+    }, 60000);
+  }
+
   private calculateFitWidth(): void {
     const viewport = this.shadowRoot?.querySelector(".viewport");
     if (!viewport) return;