I’m attempting to print off the contents of a React TinyMCE Editor using an HTML to PDF converter, but when I extract the contents and set it in their own page the styling is very different. It retains some of the styling but not all of it.

If I press ctrl + p within the editor it works great and comes out styled as a document. But when I use puppeteer to print off the web page as a PDF, it prints off the full page including the wrapping content (toolbars, menu, etc.) and doesn’t apply the nice default styling to the content.

I’ve tried extracting and displaying the content with something like the below:

const ref = useRef(null);
const [editorContent, setEditorContent] = useState(null);
return <>
{editorContent &&
   <div className="mce-content-body" dangerouslySetInnerHTML={{"__html": editorContent}}></div>
}
<form className={classNames([{"d-none": editorContent !== null}])}>
   <Editor
       onInit={(evt, editor) => {
          ref.current = editor;
          setEditorContent(ref.current.getBody());
       }}
       initialValue={props.initialContent}
       // other props
   />
</form>
<>

and I’ve played around with the classes for a bit to ensure I’ve added in the skin.min.css and content.min.css etc. but I still haven’t been able to trick the browser into believing it should come out the same as if the user pressed Ctrl + P on the editor content.

Am I missing some hidden @media print {} or something like that to make the same style of printout?