feat(print): Support print current page to png.

Author: walkthunder

assets/src/webpage.txt.js

@@ -1,3 +1,5 @@
+var htmlToImage = require('html-to-image');
+var download = require('downloadjs');
 
 //#region Helpers
 
@@ -570,25 +572,32 @@ function formatPage() {
     preview.style.height = '100%'
 }
 
-function printAsPDF() {
+function printAsPNG() {
 	// Add CSS styles for print layout
 	const styles = `
 	  <style>
-		@media print {
-		  /* Apply any necessary styles for print layout */
-		  .sidebar-left, .sidebar-right {
-			display: none;
-		  }
-		  .document-container {
+		.sidebar-left, .sidebar-right {
+			display: none !important;
+		}
+		.document-container {
 			height: 100%;
-			padding-bottom: 0;
-
-		  }
-		  .document-container .markdown-preview-view {
+			padding-bottom: 0 !important;
+			overflow: visible;
+		}
+		.document-container .markdown-preview-view {
 			padding: unset;
-			overflow: scroll;
+			overflow: visible;
 			height: 100%;	
-		  }
+		}
+		.webpage-container {
+			overflow: scroll;
+		}
+		.markdown-preview-section {
+			position: relative !important;
+		}
+		.markdown-preview-section .site-footer {
+			position: absolute;
+			width: 100%;
 		}
 	  </style>
 	`;
@@ -604,23 +613,40 @@ function printAsPDF() {
   printWindow.document.write(styles + htmlContent);
   printWindow.document.close();
 
-  // Wait for a short delay to ensure content rendering
-  setTimeout(function () {
-    // Print the window as PDF
-    printWindow.print();
+//   window.toPng = htmlToImage.toPng;
+//   window.download = download;
+//   window.printWin = printWindow;
+//   window.printBody = printWindow.document.body;
+
+  printWindow.document.addEventListener('DOMContentLoaded', function() {
+	console.log('dom loaded');
+	const contentsNode = printWindow.document.body.querySelector('.markdown-preview-section');
+	const footerNode = printWindow.document.body.querySelector('.site-footer');
+	if (!contentsNode) {
+		console.error('valid contents not found');
+		return;
+	}
+
+	if (footerNode) {
+		contentsNode.appendChild(footerNode);
+	}
 
-    // Close the print window after printing
-    setTimeout(function () {
-      printWindow.close();
-    }, 100);
-  }, 500);
+	htmlToImage.toPng(contentsNode, { backgroundColor: '#fff' })
+		.then(function (dataUrl) {
+			console.log('data url: ', dataUrl);
+			download(dataUrl, document.title);
+		});
+		setTimeout(function () {
+			printWindow.close();
+		}, 300);
+  });
 }
 
 function setupPrintBtn(setupOnNode) {
 	setupOnNode.getElementById("print_btn")?.addEventListener('click', e => {
 		e.preventDefault();
-		console.log('print...');
-		printAsPDF();
+		console.log('print image...');
+		printAsPNG();
 	})
 }
 function setupThemeToggle(setupOnNode)

assets/webpage.txt.js

@@ -44,9 +44,11 @@
     "chai-as-promised": "^7.1.1",
     "cross-env": "^7.0.3",
     "dotenv": "^16.0.0",
+    "downloadjs": "^1.4.7",
     "electron": "^18.3.15",
     "esbuild": "0.14.47",
     "esbuild-css-modules-plugin": "^2.7.1",
+    "html-to-image": "^1.11.11",
     "jsdom": "^19.0.0",
     "mocha": "^9.2.2",
     "prettier": "^2.6.2",

package.json

@@ -74,7 +74,9 @@ export class Analytics4 {
                     method: 'POST',
                     body: JSON.stringify(payload)
                 }
-            )
+            ).catch(err => {
+                console.warn('ga error ', err);
+            })
     };
 
     trace(eventName: string, params?: Record<string, unknown>) {

pnpm-lock.yaml

@@ -689,6 +689,7 @@ export class HTMLGenerator {
 	public static generateDarkmodeToggle(inline: boolean = true, usingDocument: Document = document): HTMLElement {
 		// programatically generates the above html snippet
 		let toggle = usingDocument.createElement("div");
+		toggle.style.display = 'flex';
 		let label = usingDocument.createElement("label");
 		label.classList.add(inline ? "theme-toggle-container-inline" : "theme-toggle-container");
 		label.setAttribute("for", "theme_toggle");
@@ -700,11 +701,26 @@ export class HTMLGenerator {
 		div.classList.add("toggle-background");
 		label.appendChild(input);
 		label.appendChild(div);
+
 		toggle.appendChild(label);
 
+		const btn = this.generatePrintBtn(usingDocument);
+		toggle.appendChild(btn);
 		return toggle;
 	}
 
+	public static generatePrintBtn(usingDocument: Document = document) {
+		let btn = usingDocument.createElement("div");
+		btn.classList.add('print-btn');
+		btn.setAttribute('id', 'print_btn');
+
+		const icon = usingDocument.createElement('span')
+		icon.classList.add('print-btn-icon');
+		icon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-printer"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect width="12" height="8" x="6" y="14"/></svg>`
+		btn.appendChild(icon);
+		return btn;
+	}
+
 	public static generateSearchBar(usingDocument: Document = document): HTMLElement {
 		const outerContainer = usingDocument.createElement('div');
 		outerContainer.classList.add('search-view-outer');