feat: replace html2canvas with native high-quality browser printing

This commit is contained in:
2026-06-23 13:15:38 +00:00
parent a4a1c82acc
commit 189bf399dc
3 changed files with 43 additions and 26 deletions
+9 -9
View File
@@ -120,18 +120,17 @@ const App: React.FC = () => {
}, [handleReset]);
const handleExport = (action: 'preview' | 'download') => {
if (reportsData && reportsData.length > 0) {
const fileName = `Relatorio_SteelCheck_${reportsData[0].identification.certificateNumber || 'analise'}`;
exportAsPdf('printable-report-container', fileName, action);
}
// Both actions now use native high-quality browser printing/PDF saving
window.print();
};
return (
<div className="min-h-screen">
{isLoading && <Loader />}
<Header onReset={handleReset} onClearKey={handleClearKey} hasKey={hasKey} provider={provider} />
<div className="min-h-screen print:bg-white print:m-0 print:p-0">
<div className="print:hidden">
{isLoading && <Loader />}
<Header onReset={handleReset} onClearKey={handleClearKey} hasKey={hasKey} provider={provider} />
<main className="container mx-auto p-4 sm:p-6 md:p-8 max-w-7xl">
<main className="container mx-auto p-4 sm:p-6 md:p-8 max-w-7xl">
{!hasKey ? (
<ApiKeySetup onKeySave={handleKeySave} />
) : !reportsData ? (
@@ -199,9 +198,10 @@ const App: React.FC = () => {
</div>
)}
</main>
</div>
{reportsData && (
<div className="absolute -left-[9999px] top-0 opacity-0" aria-hidden="true">
<div className="hidden print:block print:w-[210mm] print:mx-auto" aria-hidden="true">
<PrintableReport reports={reportsData} />
</div>
)}
+1 -1
View File
@@ -15,7 +15,7 @@ export const PrintableReport: React.FC<PrintableReportProps> = ({ reports }) =>
style={{ width: '210mm', background: 'white' }}
>
{reports.map((report, idx) => (
<div key={idx} className="report-page pdf-export bg-white" style={{ minHeight: '297mm' }}>
<div key={idx} className="report-page bg-white" style={{ minHeight: '297mm' }}>
<ReportDisplay report={report} />
</div>
))}
+33 -16
View File
@@ -30,21 +30,38 @@
animation: fade-in 0.5s ease-out forwards;
}
/* Force black text for PDF generation */
.pdf-export .text-slate-400,
.pdf-export .text-slate-500,
.pdf-export .text-slate-600,
.pdf-export .text-slate-700,
.pdf-export .text-slate-800,
.pdf-export .text-slate-900,
.pdf-export .text-slate-300,
.pdf-export .text-slate-200 {
color: #000000 !important;
}
/* High-quality native browser printing */
@media print {
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
@page {
margin: 0;
size: A4;
}
/* Also ensure borders are clearly visible */
.pdf-export .border-slate-100,
.pdf-export .border-slate-200,
.pdf-export .border-slate-50 {
border-color: #cbd5e1 !important; /* slate-300 */
body {
background: white !important;
}
/* Force black text for PDF generation */
.report-page .text-slate-400,
.report-page .text-slate-500,
.report-page .text-slate-600,
.report-page .text-slate-700,
.report-page .text-slate-800,
.report-page .text-slate-900,
.report-page .text-slate-300,
.report-page .text-slate-200 {
color: #000000 !important;
}
/* Also ensure borders are clearly visible */
.report-page .border-slate-100,
.report-page .border-slate-200,
.report-page .border-slate-50 {
border-color: #cbd5e1 !important; /* slate-300 */
}
}