I built a reusable IconButton with printing functionality, but It won't print the CSS
I built an IconButton which can already print text with the window.print() function.
It takes title, text and a ReactNode as an optional prop.
It works just fine, but my problem is, if I put in a Reactnode, it only prints the text the node has in it, not the style, size, basically the CSS of the node.
Tried various solutions and ways, but somehow I never end up getting the result I want.
Has anybody made something like this who knows how to do it?
Thank you in advance! :)
interface PrintIconButtonProps {
title: string;
text: string;
node?: ReactNode;
}
export const PrintIconButton = ({
title,
text,
node,
}: PrintIconButtonProps) => {
function handlePrint() {
const printWindow = window.open("", "_blank");
printWindow?.document.write(
`<html><head><title>TITLE</title><h1>${title}<h1/><h3>${text}<h3/>${node}<style>@media print {body * { visibility: visible; } #printableContent, #printableContent * { visbility: visible; } #printableContent { position: absolute; left: 0; top: 0; } } </style></head></html>`
);
printWindow?.document.close();
printWindow?.print();
}
return <button onClick={handlePrint}>Icon goes here</button>;
};