What is the best way to export a dynamic site from Webflow as a PDF file without encountering CORS policy errors?
TL;DR
- Publish your dynamic Webflow site to Webflow's domain to ensure full rendering of CMS content.
- Use a server-side tool like Puppeteer to load the live URL and generate the PDF, bypassing CORS issues and preserving full page fidelity.
Exporting a dynamic Webflow site as a PDF can be tricky due to CORS policy restrictions when attempting to generate PDFs client-side from external data. Here's how to do it effectively without triggering CORS issues.
1. Use a Server-Side PDF Generation Tool
- Avoid client-side libraries like
html2pdf.jsorjsPDFif your site pulls in dynamic CMS data, as they'll often hit CORS policy errors when trying to fetch images or fonts. - Instead, use a server-side service such as:
- Puppeteer (headless Chrome for Node.js)
- Playwright
- PDFLayer or PDFShift (API-based)
These services render the entire page on a server with full browser access, bypassing CORS.
2. Publish to Webflow’s Domain First
- Before exporting or printing to PDF, publish the site to Webflow’s hosted domain (e.g., yoursite.webflow.io).
- These pages load CMS data normally and are fully rendered static HTML, which makes them ideal for server-side PDF rendering.
3. Adjust Styling for Print
- Add print-specific styles in your Webflow project for proper PDF formatting:
- Go to Page Settings > Custom Code > Inside