Skip to content

Commit ff5000a

Browse files
committed
feat(print): Support print current page to png.
1 parent c533416 commit ff5000a

File tree

6 files changed

+121
-48
lines changed

6 files changed

+121
-48
lines changed

assets/src/webpage.txt.js

Lines changed: 50 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
var htmlToImage = require('html-to-image');
2+
var download = require('downloadjs');
13

24
//#region Helpers
35

@@ -570,25 +572,32 @@ function formatPage() {
570572
preview.style.height = '100%'
571573
}
572574

573-
function printAsPDF() {
575+
function printAsPNG() {
574576
// Add CSS styles for print layout
575577
const styles = `
576578
<style>
577-
@media print {
578-
/* Apply any necessary styles for print layout */
579-
.sidebar-left, .sidebar-right {
580-
display: none;
581-
}
582-
.document-container {
579+
.sidebar-left, .sidebar-right {
580+
display: none !important;
581+
}
582+
.document-container {
583583
height: 100%;
584-
padding-bottom: 0;
585-
586-
}
587-
.document-container .markdown-preview-view {
584+
padding-bottom: 0 !important;
585+
overflow: visible;
586+
}
587+
.document-container .markdown-preview-view {
588588
padding: unset;
589-
overflow: scroll;
589+
overflow: visible;
590590
height: 100%;
591-
}
591+
}
592+
.webpage-container {
593+
overflow: scroll;
594+
}
595+
.markdown-preview-section {
596+
position: relative !important;
597+
}
598+
.markdown-preview-section .site-footer {
599+
position: absolute;
600+
width: 100%;
592601
}
593602
</style>
594603
`;
@@ -604,23 +613,40 @@ function printAsPDF() {
604613
printWindow.document.write(styles + htmlContent);
605614
printWindow.document.close();
606615

607-
// Wait for a short delay to ensure content rendering
608-
setTimeout(function () {
609-
// Print the window as PDF
610-
printWindow.print();
616+
// window.toPng = htmlToImage.toPng;
617+
// window.download = download;
618+
// window.printWin = printWindow;
619+
// window.printBody = printWindow.document.body;
620+
621+
printWindow.document.addEventListener('DOMContentLoaded', function() {
622+
console.log('dom loaded');
623+
const contentsNode = printWindow.document.body.querySelector('.markdown-preview-section');
624+
const footerNode = printWindow.document.body.querySelector('.site-footer');
625+
if (!contentsNode) {
626+
console.error('valid contents not found');
627+
return;
628+
}
629+
630+
if (footerNode) {
631+
contentsNode.appendChild(footerNode);
632+
}
611633

612-
// Close the print window after printing
613-
setTimeout(function () {
614-
printWindow.close();
615-
}, 100);
616-
}, 500);
634+
htmlToImage.toPng(contentsNode, { backgroundColor: '#fff' })
635+
.then(function (dataUrl) {
636+
console.log('data url: ', dataUrl);
637+
download(dataUrl, document.title);
638+
});
639+
setTimeout(function () {
640+
printWindow.close();
641+
}, 300);
642+
});
617643
}
618644

619645
function setupPrintBtn(setupOnNode) {
620646
setupOnNode.getElementById("print_btn")?.addEventListener('click', e => {
621647
e.preventDefault();
622-
console.log('print...');
623-
printAsPDF();
648+
console.log('print image...');
649+
printAsPNG();
624650
})
625651
}
626652
function setupThemeToggle(setupOnNode)

assets/webpage.txt.js

Lines changed: 25 additions & 15 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,11 @@
4444
"chai-as-promised": "^7.1.1",
4545
"cross-env": "^7.0.3",
4646
"dotenv": "^16.0.0",
47+
"downloadjs": "^1.4.7",
4748
"electron": "^18.3.15",
4849
"esbuild": "0.14.47",
4950
"esbuild-css-modules-plugin": "^2.7.1",
51+
"html-to-image": "^1.11.11",
5052
"jsdom": "^19.0.0",
5153
"mocha": "^9.2.2",
5254
"prettier": "^2.6.2",

pnpm-lock.yaml

Lines changed: 25 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/ga.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,9 @@ export class Analytics4 {
7474
method: 'POST',
7575
body: JSON.stringify(payload)
7676
}
77-
)
77+
).catch(err => {
78+
console.warn('ga error ', err);
79+
})
7880
};
7981

8082
trace(eventName: string, params?: Record<string, unknown>) {

src/html-generation/html-generator.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -689,6 +689,7 @@ export class HTMLGenerator {
689689
public static generateDarkmodeToggle(inline: boolean = true, usingDocument: Document = document): HTMLElement {
690690
// programatically generates the above html snippet
691691
let toggle = usingDocument.createElement("div");
692+
toggle.style.display = 'flex';
692693
let label = usingDocument.createElement("label");
693694
label.classList.add(inline ? "theme-toggle-container-inline" : "theme-toggle-container");
694695
label.setAttribute("for", "theme_toggle");
@@ -700,11 +701,26 @@ export class HTMLGenerator {
700701
div.classList.add("toggle-background");
701702
label.appendChild(input);
702703
label.appendChild(div);
704+
703705
toggle.appendChild(label);
704706

707+
const btn = this.generatePrintBtn(usingDocument);
708+
toggle.appendChild(btn);
705709
return toggle;
706710
}
707711

712+
public static generatePrintBtn(usingDocument: Document = document) {
713+
let btn = usingDocument.createElement("div");
714+
btn.classList.add('print-btn');
715+
btn.setAttribute('id', 'print_btn');
716+
717+
const icon = usingDocument.createElement('span')
718+
icon.classList.add('print-btn-icon');
719+
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>`
720+
btn.appendChild(icon);
721+
return btn;
722+
}
723+
708724
public static generateSearchBar(usingDocument: Document = document): HTMLElement {
709725
const outerContainer = usingDocument.createElement('div');
710726
outerContainer.classList.add('search-view-outer');

0 commit comments

Comments
 (0)