add print html page functionality

This commit is contained in:
Nate Kelley 2025-08-08 14:13:17 -06:00
parent cb02074cba
commit 1e9e3c6a80
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
4 changed files with 57 additions and 46 deletions

View File

@ -1,5 +1,9 @@
import { PAGE_CONTROLLER_ID } from '@/controllers/ReportPageControllers/ReportPageController';
import type { PlateEditor } from 'platejs/react';
import { ReportPageController } from '@/controllers/ReportPageControllers/ReportPageController';
export const buildExportHtml = async (editor: PlateEditor, options?: {}): Promise<string> => {
export const useBuildExportHtml2 = () => {
return async ({ reportId }: { reportId: string }) => {
return '';
};
};

View File

@ -1,6 +1,7 @@
import type { PlateEditor } from 'platejs/react';
import { NodeTypeLabels } from '../config/labels';
import { buildExportHtml } from './buildExportHtml';
import { printHTMLPage } from './printHTMLPage';
type Notifier = (message: string) => void;
@ -20,42 +21,7 @@ export const exportToPdf = async ({
try {
const html = await buildExportHtml(editor, { title: filename });
// Open a print window with the rendered HTML so the user can save as PDF
const printWindow = window.open('', '_blank');
if (!printWindow) throw new Error('Unable to open print window');
printWindow.document.open();
printWindow.document.write(html);
printWindow.document.close();
// Close the print window after the user prints or cancels
const handleAfterPrint = () => {
try {
// printWindow.close();
} catch (e) {
console.error('Failed to close print window', e);
}
};
printWindow.addEventListener('afterprint', handleAfterPrint);
// Trigger print when resources are loaded
const triggerPrint = () => {
try {
printWindow.focus();
// Set the title for the print window so the OS save dialog suggests it
printWindow.document.title = filename;
printWindow.print();
} catch (e) {
console.error('Failed to trigger print dialog', e);
}
};
if (printWindow.document.readyState === 'complete') {
// Give a brief moment for styles to apply
setTimeout(triggerPrint, 100);
} else {
printWindow.addEventListener('load', () => setTimeout(triggerPrint, 100));
}
printHTMLPage({ html, filename });
openInfoMessage?.(NodeTypeLabels.pdfExportedSuccessfully.label);
} catch (error) {

View File

@ -0,0 +1,38 @@
export const printHTMLPage = ({ html, filename }: { html: string; filename: string }) => {
// Open a print window with the rendered HTML so the user can save as PDF
const printWindow = window.open('', '_blank');
if (!printWindow) throw new Error('Unable to open print window');
printWindow.document.open();
printWindow.document.write(html);
printWindow.document.close();
// Close the print window after the user prints or cancels
const handleAfterPrint = () => {
try {
printWindow.close();
} catch (e) {
console.error('Failed to close print window', e);
}
};
printWindow.addEventListener('afterprint', handleAfterPrint);
// Trigger print when resources are loaded
const triggerPrint = () => {
try {
printWindow.focus();
// Set the title for the print window so the OS save dialog suggests it
printWindow.document.title = filename;
printWindow.print();
} catch (e) {
console.error('Failed to trigger print dialog', e);
}
};
if (printWindow.document.readyState === 'complete') {
// Give a brief moment for styles to apply
setTimeout(triggerPrint, 100);
} else {
printWindow.addEventListener('load', () => setTimeout(triggerPrint, 100));
}
};

View File

@ -29,6 +29,7 @@ import { useSaveToCollectionsDropdownContent } from '@/components/features/dropd
import { getReportEditor } from '@/controllers/ReportPageControllers/ReportPageController/editorRegistry';
import { NodeTypeLabels } from '@/components/ui/report/config/labels';
import { useExportReport } from '@/components/ui/report/hooks';
import { useBuildExportHtml2 } from '@/components/ui/report/hooks/buildExportHtml2';
export const ReportThreeDotMenu = React.memo(
({
@ -315,19 +316,21 @@ const useDuplicateReportSelectMenu = (): DropdownItem => {
const useDownloadPdfSelectMenu = ({ reportId }: { reportId: string }): DropdownItem => {
const { openErrorMessage } = useBusterNotifications();
const { data: reportName } = useGetReport({ reportId }, { select: (x) => x.name });
const { exportToPdf } = useExportReport();
const buildExportHtml2 = useBuildExportHtml2({ reportId });
const onClick = async () => {
try {
const editor = getReportEditor(reportId);
const html = await buildExportHtml2({ reportId });
console.log('html', html);
// const editor = getReportEditor(reportId);
if (!editor) {
console.error('Editor not found');
openErrorMessage(NodeTypeLabels.failedToExportPdf.label);
return;
}
// if (!editor) {
// console.error('Editor not found');
// openErrorMessage(NodeTypeLabels.failedToExportPdf.label);
// return;
// }
await exportToPdf({ editor, filename: reportName });
// await exportToPdf({ editor, filename: reportName });
} catch (error) {
console.error(error);
openErrorMessage('Failed to export report as PDF');