Printing a div card with exact styles as it appears on the web page

Question

On my web form, I have these div card where there are labels with values, and two image controls. The labels on the card can have their font-family and color changed by the user o the client side to the desire of the user, using controls provided to do these actions. If the user changes the color or font-family of the labels and tries to print, the result does not reflect the exact position or appearance of the labels with regards to color or font-family; it does not retain the background image on the div card as well. Please forum, how do I have a print code that can print and output the same view as it appears on the web page?

This is how the card displays on the page

You can see that the Access level, Date and Time are aligned horizontally in a row, but when printing in the preview, they 3 labels are aligned vertically.

This is the output below

The above output did not print as it appears on the page.

My HTML and Javascript print code.

<asp:UpdatePanel ID="UpdatePane1" runat="server" ClientIDMode="Static" UpdateMode="Conditional">
                    <ContentTemplate>
                        <div class="row col-sm-12" runat="server" style="width: 100%; margin: 0 auto; padding: 10px; margin-bottom: 0%;">
                            <div class="col-sm-7" style="width: 100%; margin-bottom: 1%;">
                                <asp:Panel ID="pnlContents" runat="server" BorderStyle="Solid" BorderWidth="2" BorderColor="#f0f1f2">
                                    <div class="card1" runat="server" id="permit" style="width: 100%; margin: 0 auto; padding: 6px; border-radius: 6px; border: 1px solid #dde0e2;">
                                    <div class="row" style="width: 100%;">
                                        <div class="col-2">
                                            <asp:Image ID="Image2" ImageUrl="~/images/resources/linkedin.png" AlternateText="logo" runat="server" Width="35" Height="35" />
                                        </div>
                                        <div class="col-8">
                                            <span style="float: inline-start;">
                                                <div style="text-align: center;">
                                                    <asp:Label ID="Label7" runat="server" Text="Sleek Inc"></asp:Label>
                                                </div>
                                                <div style="text-align: center;">
                                                    <asp:Label ID="title" runat="server" Text="JAZZ MUSICAL FEST"></asp:Label>
                                                </div>
                                                <div style="text-align: center;">
                                                    <asp:Label ID="Label8" runat="server" Text="Emerald Event Center, 75 Mayne Avenue, Calabar"></asp:Label>
                                                </div>
                                            </span>
                                        </div>
                                        <hr style="margin-top: 3px;" />
                                    </div>
                                    <div class="eventdetail" runat="server" id="eventdetail" style="display: block; margin: 0 auto; margin-top: 5%;">
                                        <div class="row" style="width: 100%;">
                                            <div class="col-4">
                                                <asp:Label ID="Label4" runat="server" Text="Access Level"></asp:Label>
                                            </div>
                                            <div class="col-4">
                                                <asp:Label ID="Label5" runat="server" Text="Date"></asp:Label>
                                            </div>
                                            <div class="col-4">
                                                <asp:Label ID="Label6" runat="server" Text="Time"></asp:Label>
                                            </div>
                                        </div>
                                        <div class="row" style="width: 100%;">
                                            <div class="col-4">
                                                <asp:Label ID="Label11" runat="server" Text="REGULAR"></asp:Label>
                                            </div>
                                            <div class="col-4">
                                                <asp:Label ID="Label13" runat="server" Text="Mar 17, 2023"></asp:Label>
                                            </div>
                                            <div class="col-4">
                                                <asp:Label ID="Label15" runat="server" Text="8:00 PM"></asp:Label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row" style="margin-top: 5%; margin-bottom: -1%;">
                                        <div class="col-sm-10">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <asp:Label ID="Label2" runat="server" Text="David Iriepekin"></asp:Label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row" style="width: 100%; margin: 0 auto;">
                                            <div class="col-sm-5">
                                                <div class="form-group">
                                                    <div class="input-group">
                                                        <asp:Label ID="phonelbl" runat="server" Text="0802347568"></asp:Label>
                                                    </div>
                                                </div>
                                                <div class="form-group" style="float: left; font-size: 5pt;">
                                                    <div class="input-group">
                                                        <asp:Label ID="permitID" runat="server" Text="31570"></asp:Label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-7">
                                                <div class="form-group" style="float: right; font-size: 5pt;">
                                                    <div class="input-group">
                                                        <asp:Image ID="Image3" ImageUrl="Test.png" runat="server" Width="80" Height="80" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    <div class="card" style="width: 100%; background-color: #f2f8fb; border: 0.1px solid #dde0e2;">
                                    </div>
                                </div>
                                </asp:Panel>
                            </div>

                            <div class="col-sm-4" style="margin-top: 2%; left: 0; z-index: 999; width: 100%; margin: 0 auto; padding: 10px; border-radius: 4px; border: 0.2px solid #f0f1f2; background-color: #fff;">
                                <div class="" style="width: 100%; margin: 0 auto; padding: 6px; margin-top: 1%; border-radius: 4px;">
                                    <div style="margin-top: 1%; margin-bottom: 4%;">
                                        <label style="font-weight: 500; font-size: 8pt; color: #93979e;">Edit your permit</label>
                                    </div>
                                    <asp:Label ID="headcolor" runat="server">Header Color</asp:Label>
                                    <div class="input-group" style="font-size: 4pt;">
                                        <asp:TextBox ID="TextBox1" runat="server" AutoCompleteType="None" Font-Size="4pt" CssClass="form-control" />
                                        <cc1:ColorPickerExtender ID="ColorPicker1" runat="server" TargetControlID="TextBox1"
                                            PopupButtonID="ColorBtn" PopupPosition="TopRight" OnClientColorSelectionChanged="ColorChanged" />
                                        <div class="input-group-append">
                                            <span class="input-group-text" id="ColorBtn" runat="server" style="height: auto; background-color: transparent; color: #404344;">
                                                <span id="toggle_picker" class="fad fa-eye-dropper" aria-hidden="true" style="cursor: pointer; font-size: 11pt; border: none;"></span>
                                            </span>
                                        </div>
                                    </div>
                                    <asp:Label ID="Label3" runat="server">Background Color</asp:Label>
                                    <div class="input-group" style="font-size: 4pt;">
                                        <asp:TextBox ID="BackTxt" runat="server" AutoCompleteType="None" Font-Size="4pt" CssClass="form-control" />
                                        <cc1:ColorPickerExtender ID="ColorPickerExtender1" runat="server" TargetControlID="BackTxt"
                                            PopupButtonID="BackColorBtn" PopupPosition="TopRight" OnClientColorSelectionChanged="BackChangedColor" />
                                        <div class="input-group-append">
                                            <span class="input-group-text" id="BackColorBtn" runat="server" style="height: auto; background-color: transparent; color: #404344;">
                                                <span id="perm_id" class="fad fa-eye-dropper" aria-hidden="true" style="cursor: pointer; font-size: 11pt; border: none;"></span>
                                            </span>
                                        </div>
                                    </div>
                                    <asp:Label ID="fontlbl" runat="server">Choose Font</asp:Label>
                                    <div class="input-group">
                                        <input type="text" class="fonts" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </ContentTemplate>
                    <Triggers>
                    </Triggers>
                </asp:UpdatePanel>
                <br />
                <div style="margin: 0 auto; padding: 10px;">
                    <asp:Button ID="PermitPrint" runat="server" CssClass="btn navbar-btn" Text="Print" OnClientClick="return PrintPanel();" />
                </div>


 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://rawgit.com/tommoor/fontselect-jquery-plugin/master/fontselect.css" />
    <script src="https://rawgit.com/tommoor/fontselect-jquery-plugin/master/jquery.fontselect.js"></script>
    <script type="text/javascript">
         //This is the javascript for changing label font family.
        $(document).ready(function () {
            function selectFontAndApplyToEle(fontName, callback) {
                $('div.font-select').find('.fs-results li').removeClass('active');
                var dropEle = $('div.font-select').find('.fs-drop');
                var fontToSelect = $('div.font-select').find('.fs-results li:contains(' + fontName + ')');
                dropEle.addClass('fs-drop-op');
                var posFont = fontToSelect.offset().top
                var posFontOffset = $('div.font-select').find('.fs-results li:first').offset().top
                $('div.font-select').find('.fs-results').scrollTop(posFont - posFontOffset);
                fontToSelect.addClass('active').trigger('click');
                setTimeout(function () {
                    $('div.font-select a div').trigger('click');
                    dropEle.removeClass('fs-drop-op');
                    callback && callback(fontToSelect.data('value').replace(/\+/g, ' '));
                }, 500);
            }

            $(function () {
                $('input.fonts').fontselect({
                    style: 'font-select',
                    placeholder: 'Select a font',
                    lookahead: 2
                }).on('change', function (e) {
                    var fontFamily = $(this).val().replace(/\+/g, ' ');
                    $('.card1').css('font-family', fontFamily);
                });
                selectFontAndApplyToEle('Anton', function (fontFamily) {
                    $('.card1').css('font-family', fontFamily);
                    setTimeout(function () {
                        selectFontAndApplyToEle('Anonymous Pro', function (fontFamily) {
                            $('.card1').css('font-family', fontFamily);
                        });
                    }, 1000);
                });
            });
        });
        //My sidebar toggle navigation
        $("#sidebar").mCustomScrollbar({
            theme: "minimal"
        });

        $('#sidebarCollapse').on('click', function () {

            $('#sidebar').toggleClass('active');

            $('.collapse.in').toggleClass('in');
            $('a[aria-expanded=true]').attr('aria-expanded', 'false');
        });

         //This is where label colors can be changed, both for all labels and one label.
        function ColorChanged(sender) {
            document.getElementById("title").style.color = "#" + sender.get_selectedColor();
        }
            function ChangedAllColor(sender) {
                document.getElementById("permit").style.color = "#" + sender.get_selectedColor();
            }

        function PrintPanel() {
            var panel = document.getElementById("<%=pnlContents.ClientID %>");
            var printWindow = window.open('', '', 'height=500,width=800');
            printWindow.document.write('<html><head><title>DIV Contents</title>');
            printWindow.document.write('</head><body >');
            printWindow.document.write(panel.innerHTML);
            printWindow.document.write('</body></html>');
            printWindow.document.close();
            setTimeout(function () {
                printWindow.print();
            }, 500);
            return false;
        }
    </script>

Answer 1

Hi @Donald Symmons

Yesterday I mentioned the method of converting first into pictures and then into PDF. I tested today and the result is invalid.

Today I changed your js method directly to:

function PrintPanel() {
            window.print();
        }

I found that it prints out the style you want.

But I know you don't want to print out the Edit program as well.

So the change I made was to fill in the <div>above label so that it could hold up one page.

<div class="row col-sm-12" runat="server" style="width: 100%; margin: 0 auto; padding: 10px; margin-bottom: 0%;">
                <div class="col-sm-7" style="width: 100%; margin-bottom: 1%;">
                    <asp:Panel ID="pnlContents" runat="server" BorderStyle="Solid" BorderWidth="2" BorderColor="#f0f1f2">
                        <div class="card1" runat="server" id="permit" style="width: 100%; margin: 0 auto; padding: 6px; border-radius: 6px; border: 1px solid #dde0e2;">
                            <div class="row" style="width: 100%;">
                                <div class="col-2">
                                    <asp:Image ID="Image2" ImageUrl="~/images/resources/linkedin.png" AlternateText="logo" runat="server" Width="35" Height="35" />
                                </div>
                                <div class="col-8">
                                    <span style="float: inline-start;">
                                        <div style="text-align: center;">
                                            <asp:Label ID="Label7" runat="server" Text="Sleek Inc"></asp:Label>
                                        </div>
                                        <div style="text-align: center;">
                                            <asp:Label ID="title" runat="server" Text="JAZZ MUSICAL FEST"></asp:Label>
                                        </div>
                                        <div style="text-align: center;">
                                            <asp:Label ID="Label8" runat="server" Text="Emerald Event Center, 75 Mayne Avenue, Calabar"></asp:Label>
                                        </div>
                                    </span>
                                </div>
                                <hr style="margin-top: 3px;" />
                            </div>
                            <div class="eventdetail" runat="server" id="eventdetail" style="display: block; margin: 0 auto; margin-top: 5%;">
                                <div class="row" style="width: 100%;">
                                    <div class="col-4">
                                        <asp:Label ID="Label4" runat="server" Text="Access Level"></asp:Label>
                                    </div>
                                    <div class="col-4">
                                        <asp:Label ID="Label5" runat="server" Text="Date"></asp:Label>
                                    </div>
                                    <div class="col-4">
                                        <asp:Label ID="Label6" runat="server" Text="Time"></asp:Label>
                                    </div>
                                </div>
                                <div class="row" style="width: 100%;">
                                    <div class="col-4">
                                        <asp:Label ID="Label11" runat="server" Text="REGULAR"></asp:Label>
                                    </div>
                                    <div class="col-4">
                                        <asp:Label ID="Label13" runat="server" Text="Mar 17, 2023"></asp:Label>
                                    </div>
                                    <div class="col-4">
                                        <asp:Label ID="Label15" runat="server" Text="8:00 PM"></asp:Label>
                                    </div>
                                </div>
                            </div>
                            <div class="row" style="margin-top: 5%; margin-bottom: -1%;">
                                <div class="col-sm-10">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <asp:Label ID="Label2" runat="server" Text="David Iriepekin"></asp:Label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row" style="width: 100%; margin: 0 auto;">
                                <div class="col-sm-5">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <asp:Label ID="phonelbl" runat="server" Text="0802347568"></asp:Label>
                                        </div>
                                    </div>
                                    <div class="form-group" style="float: left; font-size: 5pt;">
                                        <div class="input-group">
                                            <asp:Label ID="permitID" runat="server" Text="31570"></asp:Label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-7">
                                    <div class="form-group" style="float: right; font-size: 5pt;">
                                        <div class="input-group">
                                            <asp:Image ID="Image3" ImageUrl="Test.png" runat="server" Width="80" Height="80" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <div class="card" style="width: 100%; background-color: #f2f8fb; border: 0.1px solid #dde0e2;">
                            </div>
                        </div>
                    </asp:Panel>


                </div>

                <div class="div1" style="margin-top: 2%; left: 0; z-index: 999; width: 100%; margin: 0 auto; padding: 10px; border-radius: 4px; border: 0.2px solid #f0f1f2; background-color: #fff;">
                    <div class="" style="width: 100%; margin: 0 auto; padding: 6px; margin-top: 1%; border-radius: 4px;">
                        <div style="margin-top: 1%; margin-bottom: 4%;">
                            <label style="font-weight: 500; font-size: 8pt; color: #93979e;">Edit your permit</label>
                        </div>
                        <asp:Label ID="headcolor" runat="server">Header Color</asp:Label>
                        <div class="input-group" style="font-size: 4pt;">
                            <asp:TextBox ID="TextBox1" runat="server" AutoCompleteType="None" Font-Size="4pt" CssClass="form-control" />
                            <cc1:ColorPickerExtender ID="ColorPicker1" runat="server" TargetControlID="TextBox1"
                                PopupButtonID="ColorBtn" PopupPosition="TopRight" OnClientColorSelectionChanged="ColorChanged" />
                            <div class="input-group-append">
                                <span class="input-group-text" id="ColorBtn" runat="server" style="height: auto; background-color: transparent; color: #404344;">
                                    <span id="toggle_picker" class="fad fa-eye-dropper" aria-hidden="true" style="cursor: pointer; font-size: 11pt; border: none;"></span>
                                </span>
                            </div>
                        </div>
                        <asp:Label ID="Label3" runat="server">Background Color</asp:Label>
                        <div class="input-group" style="font-size: 4pt;">
                            <asp:TextBox ID="BackTxt" runat="server" AutoCompleteType="None" Font-Size="4pt" CssClass="form-control" />
                            <cc1:ColorPickerExtender ID="ColorPickerExtender1" runat="server" TargetControlID="BackTxt"
                                PopupButtonID="BackColorBtn" PopupPosition="TopRight" OnClientColorSelectionChanged="BackChangedColor" />
                            <div class="input-group-append">
                                <span class="input-group-text" id="BackColorBtn" runat="server" style="height: auto; background-color: transparent; color: #404344;">
                                    <span id="perm_id" class="fad fa-eye-dropper" aria-hidden="true" style="cursor: pointer; font-size: 11pt; border: none;"></span>
                                </span>
                            </div>
                        </div>
                        <asp:Label ID="fontlbl" runat="server">Choose Font</asp:Label>
                        <div class="input-group">
                            <input type="text" class="fonts" />
                        </div>
                    </div>
                </div>
            </div>
        </ContentTemplate>
        <Triggers>
        </Triggers>
    </asp:UpdatePanel>
    <br />
    <div style="margin: 0 auto; padding: 10px;">
        <asp:Button ID="PermitPrint" runat="server" CssClass="btn navbar-btn" Text="Print" OnClientClick="return PrintPanel();" />

    </div>

Of course, for demonstration purposes, I only tested your font.

OutPut:

In fact, your previous code, I think the "innerhtml" to be printed did not contain the new styles. But I searched for a long time and couldn't find where. I think this method works well.

Best regards,
Qi You

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

To ensure that the print output matches the appearance of the web page, you can use CSS media queries to define a separate stylesheet for printing. In this stylesheet, you can specify the font-family, color, and other styles that should be used for printing.

Here's an example:

Define a separate CSS file for printing, let's call it print.css

In this file, define the styles that should be applied for printing, for example:

body {
  font-family: Arial, sans-serif;
  font-size: 12pt;
  color: #333;
}
.card {
  background-image: none;
  border: 1px solid #ccc;
  padding: 10px;
}
.card label {
  font-size: 14pt;
  font-weight: bold;
  color: #000;
}

In your HTML file, add a link to this stylesheet in the head section:

<head>
  <link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>

When the user clicks on the print button, use the window.print() function to open the print dialog:

<button onclick="window.print()">Print</button>

When the user clicks on this button, the print dialog will open, and the styles defined in print.css will be applied to the print output, ensuring that it matches the appearance of the web page.

I hope this helps!

Answer 3

To save ink, most browsers have an option to not print background color or images.

to have full control of the print image, it should be a pdf file.