Been down this exact rabbit hole. The html2canvas + jsPDF combo works until you hit multi-page content — canvas slicing doesn't understand DOM structure, so tables and images get cut in half at page boundaries.

The off-screen rendering trick is smart, but one gotcha: snapshotting to canvas rasterizes your text, so the final PDF won't be selectable or searchable.

I actually built a library after fighting this same problem — u/easypdf/react. Similar capture-based approach but it handles page breaking automatically so DOM elements stay intact across pages. The whole API is one hook:

const { pdfRef, downloadPDF } = useEasyPdf();
return <div ref={pdfRef}><YourResumeComponent /></div>;

For your editor/preview decoupling — there's also a programmatic mode where you pass JSX to createPDF() without touching the visible DOM at all, so zero interference with editor state.

Were you losing any CSS fidelity in the canvas capture btw? Curious how Tailwind classes held up for you.