Search code examples
htmlpdfscrollable

Convert scrollable div to pdf file


I have scrollable div container with content. I wanna convert it to pdf and download. I used same packages but they only show visible part of div not the whole scrollable area . I want pdf file is to be editable not a image file. Here is a small part of page . content

I have used some packages like jsPDF and did some research on internet but couldn' find any solution.


Solution

  • function printDiv() {
      //Getting the div which is to be printed
      var divContents = document.getElementById("printable").innerHTML;
      //Openning a new window of broser of specific size
      var a = window.open('', '', 'height=500, width=500');
      //.write() method is used to include the contents in new window
      a.document.write('<html><head></head>'); //inside <head> you can add your own styling
      a.document.write('<body>');
      a.document.write(divContents);
      a.document.write('</body></html>');
      a.document.close();
      //printing the new window
      a.print();
    }
    .btn {
      padding: 15px 40px;
      background-color: dodgerblue;
      color: aliceblue;
      font-weight: bold;
      cursor: pointer;
    }
    
    #printable {
      width: 200px;
      height: 200px;
      font-size: 1.2rem;
      overflow: scroll;
    }
    <!-- Scrollable div which is to be printed-->
    <div id="printable">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore vel voluptatem quibusdam placeat at alias modi possimus sequi perspiciatis odit velit delectus beatae quidem quam nisi voluptas reprehenderit, quasi maxime, aliquam iure ducimus doloribus!
      Totam, in ut, tenetur praesentium vitae nesciunt sed aliquid maxime saepe laboriosam facilis excepturi numquam! Veritatis id nisi earum. Maxime possimus veniam blanditiis at neque? Ut earum rerum consectetur ab voluptate nulla ipsa ullam. Impedit, magnam?</div>
    <br>
    <p>
      <a class="btn" onclick="printDiv()">Print Attendance</a>
    </p>