Remove From My Forums

Printing a Detail View Page

Question
0

Sign in to vote
User982203039 posted

Is it possible to print a detail list view page as it would look. My details page has the a class

<dl class="dl-horizontal">

Is it possible from the page just to clock File, Print and have the format just like the detail view? Is seem to print as if there was no class at all.

Thanks,

EB
Tuesday, August 13, 2019 8:40 PM

All replies

0

Sign in to vote

User-1038772411 posted

Hello, Baze72

As per your requirement you can print details view normally but with css class you can't right? so follow below link hope it will help for you.

https://www.webcredible.com/blog/print-stylesheet-definitive-guide/

Thanks.

Wednesday, August 14, 2019 6:33 AM

User288213138 posted

Hi Baze72,
According to your description, i made a demo for your reference.

You can put a reference of bootstrap into the printed page.

<script type="text/javascript">     
        function PrintDiv() {
            var divToPrint = document.getElementById('divToPrint');
            var popupWin = window.open('', '_blank', 'width=300,height=300');
            popupWin.document.open();
            popupWin.document.write('<html><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/2.3.2/css/bootstrap.min.css"/> <body onload="window.print()">' + divToPrint.innerHTML + '</html>');
            popupWin.document.close();
        }
    </script>



<div id="divToPrint">
            <dl class="dl-horizontal">
                <dt>Coffee</dt>
                <dd>- black hot drink</dd>
                <dt>Milk</dt>
                <dd>- white cold drink</dd>
            </dl>
        </div>
        <div>
            <input type="button" value="print" onclick="PrintDiv();" />

The result:

Note: Class ="dl-horizontal" is deprecated in Bootstrap v4. I used version 2.3.2 and v3 is also not supported in chrome.

Best regards,

Sam

Wednesday, August 14, 2019 7:27 AM

Asked by:

Printing a Detail View Page

Question

All replies