Humangoodking Blog

Dynamically generate a PDF from your CMS powered posts

August 25, 2023

Author: Grant Emerson

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>

Additional Posts

If you’ve ever wondered what it’s like to trade packed-out venues for packed-out code editors, I’ve got stories. The blog is where I share the twists, turns, facepalms, and breakthroughs of going from full-time musician to full-time web dev. Check out some highlights below—and maybe get inspired to start your own remix.