What is the best way to export a dynamic site from Webflow as a PDF file without encountering CORS policy errors?
TL;DR
- Use a PDF generation tool that accepts public URLs (e.g., Puppeteer, PDFCrowd) and point it to your live Webflow-hosted URL.
- Avoid exporting and running the site locally, as it causes CORS issues and blocked assets.
Exporting a dynamic Webflow site (especially pages using CMS content) as a PDF can be tricky, especially due to browser-based CORS policy errors when using external tools. Here's how to do it correctly.
1. Understand the CORS Problem
- CORS (Cross-Origin Resource Sharing) errors usually happen when a script on one domain tries to access resources (images, fonts, data) from another domain without the proper permissions.
- When using browser-based PDF tools (e.g.,
html2pdf.js,puppeteer, extensions, etc.), assets hosted on Webflow’s CDN can trigger CORS blocks.
2. Use Webflow’s Hosted Version (Live URL)
- Avoid exporting the site and running it locally or on another server, which worsens CORS issues.
- Instead, use the live Webflow-hosted site URL when generating the PDF. This ensures all Webflow CDN assets load without restriction.
3. Use an External PDF Generation Tool with URL Input
- Use tools that render the entire public URL and convert it to PDF:
- Puppeteer or Playwright (headless Chrome via Node.js script)
- PDFCrowd (https://pdfcrowd.com)
- WeasyPrint for developers
- BrowserStack Automate with PDF snapshot scripts
- PrintFriendly (https://printfriendly.com)
- These services fetch the live site directly and avoid local script-based limitations.
4. Avoid Localhost or Downloaded HTML
- Exporting via Webflow’s Export Code and opening it locally in a browser will lead to blocked assets due to origin mismatch.
- Fonts, scripts, background images, and Webflow CMS content will either not load or cause CORS errors.
5. Generate PDF from CMS Pages
- If you have dynamic content, publish the page to your live domain (e.g.,
https://yoursite.webflow.io/blog/title-of-post). - Run the PDF tool on that full URL, not on static HTML.
- Tools like Puppeteer allow adding a script to print each CMS page in a loop.
6. Optional: Use Backend Proxy If You Must Export Locally
- If you absolutely must export the site and run it elsewhere:
- Set up a local server or proxy that adds CORS headers (
Access-Control-Allow-Origin: *). - Mirror the assets, or host them on your own domain with CORS headers.
- Still not recommended for most cases due to CMS limitations.
Summary
To avoid CORS errors when exporting a dynamic Webflow site as a PDF, use the live hosted Webflow URL with a PDF generation tool that accepts public URLs. Avoid exporting and running the site locally, as this triggers asset loading restrictions.
