0

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!

DropKick
  • 13
  • 5
  • 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

1 Answers1

0

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>

Amaka
  • 141
  • 1
  • 8