Question

112

printing Bootstrap modal data

rated 0 times [ 114] [ 2] / answers: 1 / hits: 5113 / 3 Years ago, sat, july 25, 2020, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

saiget

Add To Favorites

Follow

Total Points: 64

Total Questions: 105

Total Answers: 105

Location: Belarus

Member since Tue, Mar 14, 2023

9 Months ago

saiget questions

1 .node is not a valid Win32 application

Thu, Aug 12, 21, 00:00, 2 Years ago

1 Difference between async await in python vs JavaScript

Sat, Jun 26, 21, 00:00, 2 Years ago

1 How to get the name of Material UI 'Autocomplete' component?

Fri, Jun 26, 20, 00:00, 4 Years ago

1 How to delay intersection observer API

Thu, May 14, 20, 00:00, 4 Years ago

1 Passport + Express + Typescript req.user.email undefined

Wed, Apr 1, 20, 00:00, 4 Years ago

View All

answered 3 Years ago quinlanhenryf · Accepted Answer

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.

}

printing Bootstrap modal data

Answers

Print Bootstrap Modal Body with jQuery

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

saiget