I have a rather complex react page, with both canvas elements, svg's, draftjs (WISIYG editor), and regular MUI components. I want to export this page as a pdf. The window.print option is too rigid and creates problems when the user goes beyond one page in the pdf with their WYSIWYG content. I do not want to convert the WYSIWYG content to an image and then put it into the pdf, as it is impossible to create a pleasing UI in the pdf with this option. Is there an "easy" way to export such a page? Alternatively, if anyone knows how to export the content as an HTML file this would also be great.
You'll want to render the html as PDF. In node, the best way to go about this is to use a headless browser to render the html and use those tools to export as PDF.
Puppeteer is a headless chrome you can use https://github.com/puppeteer/puppeteer. You'll want to render your react page as HTML and pass it to puppeteer:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://news.ycombinator.com', {
waitUntil: 'networkidle2',
});
await page.pdf({ path: 'hn.pdf', format: 'a4' });
await browser.close();
})();
There's some libraries that wrap this functionality https://www.npmjs.com/package/html-pdf-node.
I've used PhantomJS based PDF rendering in the past, and I'd recommend you use Puppeteer.