Convert scrollable div to pdf file

Question

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.

Does this answer your question? [Generate pdf from HTML in div using Javascript](https://stackoverflow.com/questions/18191893/generate-pdf-from-html-in-div-using-javascript) — JoSSte, Jun 14 '23 at 08:50

score 0 · Accepted Answer · edited Jun 17 '23 at 11:20

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>

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Jun 16 '23 at 13:30

Convert scrollable div to pdf file

1 Answers1