how can i save a part of webpage as a pdf using Javascript?

Question

I have referenced different answers here but its not working as i feel they are outdated in this site.

<div class="grid-container" id="resumepart">
<div class="grid-item1">
      <section class="section">
        <h1><?php echo $row['res_fname'];?><br><?php echo $row['res_lname'];?></h1><br>
        <span class="smallspace"><?php echo $row['res_profession'];?></span>
        <div class="banner topspace">About Me</div>
        <div class="botspace"> 
        <p><?php echo $row['res_aboutme'];?></p>
        </div>
        <div class="banner">Personal Info</div>
        <div class="spacetop">
        <p class="bold">Email</p> 
        <p><?php echo $row['res_email'];?></p>
        </div>
        <div class="spacetop">
        <p class="bold">Phone</p> 
        <p><?php echo $row['res_phone'];?></p>
        </div>
        <div class="spacetop">
        <p class="bold">Country</p> 
        <p><?php echo $row['res_country'];?></p>
        </div>
        <div class="spacetop">
        <p class="bold">City</p> 
        <p><?php echo $row['res_city'];?></p>
        </div>
      </section>
 </div>
 </div>
 <div class="buttons" id="buttons">
 <button class="button-9" onclick="downloadPDF()">Download</button>
 <button class="button-9" onclick="window.print()">Print</button>
 </div>

on clicking Download button, the div with ID 'resumepart' should only be saved as PDF. I am new to using Javascript and PDF conversion. Thanks in Advance!

Well first of all can you show the code behind your `downloadPDF()` function ? And I suggest to look into this post: [https://stackoverflow.com/questions/6896592/is-it-possible-to-save-html-page-as-pdf-using-javascript-or-jquery](https://stackoverflow.com/questions/6896592/is-it-possible-to-save-html-page-as-pdf-using-javascript-or-jquery) — Daftus, Apr 27 '23 at 17:22
downloadPDF function does not do anything as of now. And yes i have looked at that question and tried to implement the solutions but didnt work — DropKick, Apr 27 '23 at 17:23
EDIT: you need to install the jsPDF library https://github.com/parallax/jsPDF. I tested the code in the following JSFiddle and it's working for me, https://jsfiddle.net/j8cnsdw3/ — Daftus, Apr 27 '23 at 17:25

score 0 · Answer 1 · answered Apr 27 '23 at 17:42

This function worked perfectly for me when I implemented that feature,

function downloadPDF() {
  const doc = new jsPDF();
  const elementHandler = {
    '#ignorePDF': function (element, renderer) {
      return true;
    }
  };
  const source = window.document.getElementById("resumepart");
  doc.fromHTML(
    source,
    15,
    15,
    {
      'width': 170,
      'elementHandlers': elementHandler
    });
  doc.save('resume.pdf');
}

And then you call it:

<button class="button-9" onclick="downloadPDF()">Download</button>

You can import jsPDF like so: ` ` – Amaka Apr 27 '23 at 17:49 — Amaka, Apr 27 '23 at 17:49

how can i save a part of webpage as a pdf using Javascript?

1 Answers1