Humangoodkind Designs

Dynamically generate a PDF from your CMS powered posts

Dynamically generate a PDF with this script

Grant Emerson
·
August 25, 2023
·
Read Time

Need to generate up to date PDFs of your CMS content but don't want to repeatedly update the document in addition to the posts? 

Embed this script into your webflow template page and you will be able to generate up to date PDFs of your CMS content on demand.

This script with generate the download button (see button HTML element) that will trigger the generation of the PDF and open that file in a new tab while maintaining the styling from your CMS.

Open up an HTML Embed block and paste the code in there and hit publish. You should be good to go!

This utilizes the "html2pdf.js" library. The documentation can be found HERE.

<button id="pdf-btn">Download Page</button>
<!-- Include html2pdf library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script>
document.getElementById('pdf-btn').onclick = function () {
// Your html2pdf code here.
var element = document.getElementById('main-asset-content');
 var opt = {
 margin:       1,
 filename:     '{ add title field here }.pdf',
 image:        { type: 'jpeg', quality: 0.98 },
 html2canvas:  { scale: 2 },
 jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
 };
html2pdf(element, opt);  
 }
 </script>
Written byGrant EmersonFounder, Humangoodkind Designs · Nashville, TN

Building Shopify and Webflow storefronts for brands that compete on quality, not price since 2020. Enterprise eCommerce at SVPWorldwide. Forbes 30 Under 30.

What's next

Sound like your site?
Let's fix it.

Every project starts with a direct conversation — not a form, not a discovery questionnaire.

More from Insights

View all posts