added: hideWrapperOnPrint option

VolodymyrBaydalka · Jan 17, 2025 · dac6be3 · dac6be3
1 parent cbe1fe8
commit dac6be3
Show file tree

Hide file tree

Showing 11 changed files with 45 additions and 16 deletions.
diff --git a/dist/docx-preview.js b/dist/docx-preview.js
diff --git a/dist/docx-preview.js.map b/dist/docx-preview.js.map
diff --git a/dist/docx-preview.min.js b/dist/docx-preview.min.js
diff --git a/dist/docx-preview.min.js.map b/dist/docx-preview.min.js.map
diff --git a/dist/docx-preview.min.mjs b/dist/docx-preview.min.mjs
diff --git a/dist/docx-preview.min.mjs.map b/dist/docx-preview.min.mjs.map
diff --git a/dist/docx-preview.mjs b/dist/docx-preview.mjs
@@ -3147,9 +3147,13 @@ class HtmlRenderer {
     }
     renderDefaultStyle() {
         var c = this.className;
-        var styleText = `
+        var wrapperStyle = `
 .${c}-wrapper { background: gray; padding: 30px; padding-bottom: 0px; display: flex; flex-flow: column; align-items: center; } 
-.${c}-wrapper>section.${c} { background: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); margin-bottom: 30px; }
+.${c}-wrapper>section.${c} { background: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); margin-bottom: 30px; }`;
+        if (this.options.hideWrapperOnPrint) {
+            wrapperStyle = `@media not print { ${wrapperStyle} }`;
+        }
+        var styleText = `${wrapperStyle}
 .${c} { color: black; hyphens: auto; text-underline-position: from-font; }
 section.${c} { box-sizing: border-box; display: flex; flex-flow: column nowrap; position: relative; overflow: hidden; }
 section.${c}>article { margin-bottom: auto; z-index: 1; }
@@ -3865,6 +3869,7 @@ const defaultOptions = {
     experimental: false,
     className: "docx",
     inWrapper: true,
+    hideWrapperOnPrint: false,
     trimXmlDeclaration: true,
     ignoreLastRenderedPageBreak: true,
     renderHeaders: true,

diff --git a/dist/docx-preview.mjs.map b/dist/docx-preview.mjs.map
diff --git a/index.html b/index.html
@@ -18,14 +18,26 @@
     <link href="./demo/thumbnail.example.css" rel="stylesheet">
     <script crossorigin src="https://unpkg.com/tiff.js@1.0.0/tiff.min.js"></script>
     <script src="./demo/tiff-preprocessor.js"></script>
+
+    <style>
+        @media print {
+            .no-print {
+                display: none;
+            }
+
+            .overflow-auto {
+                overflow: initial !important;
+            }
+        }
+    </style>
 </head>
 
 <body class="vh-100 d-flex flex-column">
-    <div class="hstack bg-black">
+    <div class="hstack bg-black no-print">
         <a class="mx-auto p-2 text-white" href="https://war.ukraine.ua">Support Ukraine 🇺🇦</a>
     </div>
 
-    <div class="hstack p-2 gap-2 bg-light">
+    <div class="hstack p-2 gap-2 bg-light no-print">
 
         <input id="files" type="file" class="form-control" style="width: 50ch;" accept=".docx" />
         <div class="col-2">
@@ -46,7 +58,7 @@
     </div>
 
     <div class="flex-grow-1 d-flex flex-row" style="height: 0;">
-        <details class="docx-thumbnails h-100">
+        <details class="docx-thumbnails h-100 no-print">
             <summary></summary>
             <div id="thumbnails-container" class="docx-thumbnails-container"></div>
         </details>
@@ -57,7 +69,8 @@
         let currentDocument = null;
         const docxOptions = Object.assign(docx.defaultOptions, {
             debug: true,
-            experimental: true
+            experimental: true,
+            hideWrapperOnPrint: true
         });
 
         const container = document.querySelector("#document-container");

diff --git a/src/docx-preview.ts b/src/docx-preview.ts
@@ -4,6 +4,7 @@ import { HtmlRenderer } from './html-renderer';
 
 export interface Options {
     inWrapper: boolean;
+    hideWrapperOnPrint: boolean;
     ignoreWidth: boolean;
     ignoreHeight: boolean;
     ignoreFonts: boolean;
@@ -31,6 +32,7 @@ export const defaultOptions: Options = {
     experimental: false,
     className: "docx",
     inWrapper: true,
+    hideWrapperOnPrint: false,
     trimXmlDeclaration: true,
     ignoreLastRenderedPageBreak: true,
     renderHeaders: true,

diff --git a/src/html-renderer.ts b/src/html-renderer.ts
@@ -515,9 +515,13 @@ export class HtmlRenderer {
 
 	renderDefaultStyle() {
 		var c = this.className;
-		var styleText = `
+		var wrapperStyle = `
 .${c}-wrapper { background: gray; padding: 30px; padding-bottom: 0px; display: flex; flex-flow: column; align-items: center; } 
-.${c}-wrapper>section.${c} { background: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); margin-bottom: 30px; }
+.${c}-wrapper>section.${c} { background: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); margin-bottom: 30px; }`;
+		if (this.options.hideWrapperOnPrint) {
+			wrapperStyle = `@media not print { ${wrapperStyle} }`;
+		}
+		var styleText = `${wrapperStyle}
 .${c} { color: black; hyphens: auto; text-underline-position: from-font; }
 section.${c} { box-sizing: border-box; display: flex; flex-flow: column nowrap; position: relative; overflow: hidden; }
 section.${c}>article { margin-bottom: auto; z-index: 1; }