printing Bootstrap modal data

I have a bootstrap modal which contains table, and table consist of multiple pages, when i print the modal it only prints the part of modal that is unscrolled, means it looks like on printing the page JS take the screenshot of modal window. Code i tried:

@media print {
    .modal-body { 
             width: auto;
             height: auto;
             overflow: visible !important;  
    }
    
        body.modal-open {
        visibility: hidden;
    }

    body.modal-open .modal .modal-header,
    body.modal-open .modal .modal-body {
        visibility: visible; 
    }
    .modal-footer{
        visibility:hidden;
    }
    .modal-header{
        visibility:hidden;
    }
}

This is the image i obtained after using jquery printThis library

Print Bootstrap Modal Body with jQuery

Make a print function that removes everything. Then append the modal body to the main content after printing your data and append everything back where it belongs. It may not be a perfect solution if you have a more significant site, although this should be enough to figure out how to implement this in your situation.

$(document).on("click", ".print", function () {
  const section = $("section");
  const modalBody = $(".modal-body").detach();

  const content = $(".content").detach();
  section.append(modalBody);
  window.print();
  section.empty();
  section.append(content);
  $(".modal-body-wrapper").append(modalBody);
});

.modal-body-wrapper {  // Make sure that you have a wrapper.
  overflow-y: scroll;  // It allows scrolling, but the body is printed
  height: 60vh;        // in full.
}

See Demo : https://jsfiddle.net/hexzero/5Lzocqpn/