How to generate a PDF with Javascript on Webflow [Low-code]

Hi there!

This took me some time to figure out so I’m sharing it with everyone in case it’s useful to others.

I had a client who I was building an assessment for and wanted to have the report page generate a PDF with. We wanted to turn this page into a report:

Here’s how it works

PDF Generation from HTML using html2canvas and jsPDF

This script generates a PDF document from a specific HTML content section. When the “Download PDF” button is clicked (#download-pdf), it captures the content of a designated HTML element with the class content-download. The captured content is converted into an image using the html2canvas library, which is then transformed into a PDF using the jsPDF library.

How It Works

  1. The script adds a click event listener to the button with the ID download-pdf.

  2. When the button is clicked, the following steps occur:

    a. The button text changes temporarily to “Generating…” to indicate processing.

    b. The content of the HTML element with class content-download is selected for conversion.

    c. The html2canvas library converts the selected HTML content into a PNG image.

    d. The jsPDF library is employed to create a PDF document that matches the image’s dimensions.

    e. The captured image in base64 format is added to the PDF using the addImage method.

    f. The PDF document is saved as “attributes-results.pdf” using the save method.

    g. The button text is restored to its original state.

  3. Any errors encountered are logged to the console, and the button text is reset.

Libraries Used

  • html2canvas: Captures HTML content and converts it into an image.

  • jsPDF: Creates and manipulates PDF documents in JavaScript.

How to use

  1. Place the html2canvas and jsPDF libraries in the body section of your page.

<!-- This pulls in two libraries and a script for the Download PDf-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>

<script
src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"
integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
  
 
  1. Place this provided JavaScript code in the body section of your page.
<!-- This is the script you need to actually download your webpage as a PDf-->


<script>

document.querySelector('#download-pdf').addEventListener('click', function () {
  const downloadButton = document.querySelector('#download-pdf');
  const originalButtonText = downloadButton.textContent;
  downloadButton.textContent = 'Generating...';

  const contentToCapture = document.querySelector('.content');

  html2canvas(contentToCapture).then((canvas) => {
    const base64image = canvas.toDataURL('image/png');
    const pdf = new jsPDF('p', 'px', [canvas.width, canvas.height]);
    pdf.addImage(base64image, 'PNG', 0, 0, canvas.width, canvas.height);
    pdf.save('attributes-results.pdf');

    downloadButton.textContent = originalButtonText;
  }).catch((error) => {
    console.error('An error occurred:', error);
    downloadButton.textContent = originalButtonText;
  });
});



</script>
  1. It should look like this

  1. Create a button and update the ID download-pdf to trigger PDF generation.

  2. Identify the div element to capture as a PDF by assigning it the class content.

  1. When users click the “Download PDF” button, the script captures the content, converts it into an image, and saves it as a PDF.

Note: Reach out to me if you’re having issues in this thread

If you found this useful please give my Github project a star here.

Additionally, if you would like to sign up and take this assessment to demo it then please sign here. The whole project is built on Webflow and this assessment measures 42 of your Attributes, the core drivers of performance. You can find out things like where do you rank on adaptability, generosity, persistence and resilience. It’s fun!

3 Likes

Nice build! Thanks for sharing :+1:

This is very helpful! Two questions if you can:

  1. Mine worked but it did not include any of the images that I have on the DIV that I applied the “content-download” class to. Do I need to adjust it in some way to pick up the background and other images so it looks exactly like what is in that DIV? I marked the images that are missing on page one with this screenshot.
  2. My report (a similar assessment for a different purpose) is long - likely 15-20 pages. Is there a way that this can break it into specific pages? Can I mark page breaks for example?

Thanks!

R/O link
https://preview.webflow.com/preview/manager-material?utm_medium=preview_link&utm_source=designer&utm_content=manager-material&preview=0d2ab9ab510036fa0f32bed6d5d99abe&pageId=6559f1a2800621546a8e6230&itemId=6559f327a072a99e276c6c72&workflow=preview

This is kind of exactly what I was looking for.

What I wanted was to have a webflow page with a collection list presented in the dom as a type of table with each row representing a CMS item.

Then I want to implement finsweet filter to filter the collection based on certain criteria and then print the filtered list. (It’s for a restaurant booking system).

What I want to know is if it’s possible to always generate in a A4 print size with each page fitting a set number or items which if is reached would generate a second PDF page in the document.

Also do you know if it’s possible to design the page to be printed? Not the dynamic content but the template which it is placed on?

Thanks a lot my man!