diff --git a/ts_web/elements/viewer.ts b/ts_web/elements/viewer.ts index a1510e6..2d136d8 100644 --- a/ts_web/elements/viewer.ts +++ b/ts_web/elements/viewer.ts @@ -506,6 +506,17 @@ export class DeDocumentViewer extends DeesElement { /> ${this.pageGap}px + +
+ + + `; } @@ -582,6 +593,88 @@ export class DeDocumentViewer extends DeesElement { this.pageGap = parseInt((e.target as HTMLInputElement).value, 10); } + private async handlePrint(): Promise { + // 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;