react-to-print
react-to-print copied to clipboard
Published
20 hours ago •
MatthewHerbst
MatthewHerbst
react-to-print custom print html content dev vs prod discrepancy
I am utilizing react-to-print to extract the html of a component in order to generate a PDF with the same styles
const handlePrint = useReactToPrint({
content: () => componentRef.current,
copyStyles: true,
print: async (printIframe: HTMLIFrameElement) => {
const document = printIframe.contentDocument;
if (document) {
const html = document.getElementsByTagName('html')[0];
try {
// fetch puppet and pass htmlString as body
const result = await fetch('/api/puppeteer', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ html: html?.outerHTML })
});
The issue here is I am getting different outputs for html.outerHTML between dev and prod. In dev, all styles work well, but in a prod build none of the styles are loaded. Not sure if this is a bug with nextjs interacting with react-to-print.
Here are the first 1,000 characters of html.outerHTML:
In dev env:
<html><head><style>
@page {
/* Remove browser default header (title) and footer (url) */
margin: 0;
}
@media print {
body {
/* Tell browsers to print background colors */
-webkit-print-color-adjust: exact; /* Chrome/Safari/Edge/Opera */
color-adjust: exact; /* Firefox */
}
}
</style><style id="react-to-print-0">*, ::before, ::after { box-sizing: border-box; border-width: 0px; border-style: solid; border-color: rgb(229, 231, 235); }
::before, ::after { --tw-content: ''; }
html { line-height: 1.5; text-size-adjust: 100%; tab-size: 4; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-feature-settings: normal; font-variation-settings: normal; }
body { margin: 0px; line-height: inheri
In prod build:
<html><head><style>
@page {
/* Remove browser default header (title) and footer (url) */
margin: 0;
}
@media print {
body {
/* Tell browsers to print background colors */
-webkit-print-color-adjust: exact; /* Chrome/Safari/Edge/Opera */
color-adjust: exact; /* Firefox */
}
}
</style><link rel="preload" href="/_next/static/css/af4209565143e128.css" as="style" crossorigin=""><link rel="stylesheet" href="/_next/static/css/af4209565143e128.css" crossorigin="" data-n-g=""><style id="react-to-print-2">@keyframes go2264125279 {
0% { transform: scale(0) rotate(45deg); opacity: 0; }
100% { transform: scale(1) rotate(45deg); opacity: 1; }
}
@keyframes go3020080000 {
0% { transform: scale(0); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes go463499852 {
0% { transform: scale(0) rotate(90deg); opacity: 0; }
100% { transform: scale
