What is the best way to export a dynamic site from Webflow as a PDF file without encountering CORS policy errors?

Exporting a dynamic site from Webflow as a PDF can be tricky due to CORS (Cross-Origin Resource Sharing) policy errors, especially when using client-side JavaScript tools like html2canvas or jsPDF. Here’s how to do it effectively without running into CORS issues.

1. Use a Server-Side PDF Generation Service

• CORS errors typically happen when client-side scripts try to access external resources (fonts, images, scripts) that are not served with appropriate CORS headers.
• A server-side tool bypasses browser CORS policies because the server makes the web requests directly.

Recommended solution: Use a PDF generation API like DocRaptor, PDFShift, Puppeteer (self-hosted), or CloudConvert.

• These services can fetch your live, dynamic Webflow page and turn it into a PDF.
• They handle external assets like fonts and images without triggering CORS errors.
• DocRaptor and PDFShift accept a public URL and return a PDF version of the rendered page.

2. Make the Dynamic Page Public

• Publish your Webflow CMS site to a live URL (e.g., yourdomain.com/report-page).
• Make sure any gated content or authentication is disabled for the PDF page, or the server won’t be able to access it.

3. Prepare the Page for PDF Rendering

• Use a dedicated CMS Collection Page with URL parameters or slugs to render the specific dynamic content you need.
• Design the page using print-friendly styling:
• Use @media print CSS in your Webflow project’s custom code section.
• Hide navigation, buttons, or interactive elements that shouldn't appear in the PDF.

@media print {  .navbar, .download-button { display: none; }}

• In production, this should be added in the Custom Code > Head section using <style> tags.

4. Trigger PDF Generation with an External Tool

Use one of the following services:

• DocRaptor: Accepts URL and returns a styled, CORS-free PDF.
• PDFShift: POST your page URL or HTML and get a clean PDF back.
• Puppeteer (if self-hosting): Render a headless Chromium browser that snapshots your Webflow page.

In all cases:

• Submit the public URL of your Webflow CMS page to the service API.
• Configure options such as page size, margins, or image rendering quality.

5. Optional: Automate With Zapier or Make (Integromat)

• Use a Webhook or scheduled trigger to send a URL to DocRaptor or PDFShift when a CMS item is published.
• This enables automatic PDF generation for each dynamic entry without manual effort.

Summary

To generate a PDF of your dynamic Webflow site without CORS issues, publish the page publicly, use a server-side PDF service like DocRaptor or PDFShift, and apply print-friendly styling with @media print. Avoid client-side tools like html2canvas, as they trigger CORS errors when rendering Webflow-hosted assets.