Print specific part of webpage asp.net

Question

I am trying to print a specific part of my application. My div. It works in html single page, but not in my application. My page is in ASP.NET and c#, but as I could not embed the function in C#, i am trying through javascript. However, there is a problem with the property inner.html

error:

0x800a138f - JavaScript runtime error: Unable to get property 'innerHTML' of undefined or null reference

code:

<script type="text/javascript">
    function printdiv
        var prtContent = document.getElementById("specific");
        var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
        WinPrint.document.write(prtContent.innerHTML);
        WinPrint.document.close();
        WinPrint.focus();
        WinPrint.print();
        WinPrint.close();
</script>

<asp:Button ID="printButton" runat="server" Text="Print Results" OnClientClick="printdiv()"/>

My page is in asp, maybe that's the problem? How can i make it equivalent to print the div i want specifically?

edit, i don't know if it is relevant: specific part of div

That is being caused by `document.getElementById("specific")` not being able to find an element with that Id. Check the spelling and case of the div's Id attribute. If that doesn't help, update the question with the HTML of the div that you're trying to print. — Diado, Dec 13 '17 at 08:55
Update the question with the HTML of the div that you're trying to print so that we can see it? — Diado, Dec 13 '17 at 12:58
This question shows you a way to do this without any code, just some plain old css: https://stackoverflow.com/questions/355313/how-do-i-hide-an-element-when-printing-a-web-page — AsheraH, Nov 19 '19 at 13:27

score 1 · Answer 1 · answered Dec 13 '17 at 09:37

Use the below code. Happy coding.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function PrintDiv() {
            var contents = document.getElementById("dvContents").innerHTML;
            var frame1 = document.createElement('iframe');
            frame1.name = "frame1";
            frame1.style.position = "absolute";
            frame1.style.top = "-1000000px";
            document.body.appendChild(frame1);
            var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument;
            frameDoc.document.open();
            frameDoc.document.write('<html><head><title>DIV Contents</title>');
            frameDoc.document.write('</head><body>');
            frameDoc.document.write(contents);
            frameDoc.document.write('</body></html>');
            frameDoc.document.close();
            setTimeout(function () {
                window.frames["frame1"].focus();
                window.frames["frame1"].print();
                document.body.removeChild(frame1);
            }, 500);
            return false;
        }
    </script>
</head>
<body>
    <form id="form1">
    <span style="font-size: 10pt; font-weight: bold; font-family: Arial">Sample by Manoj Bhardwaj</span>
    <hr />
    <div id="dvContents" style="border: 1px dotted black; padding: 5px; width: 300px">
        <span style="font-size: 10pt; font-weight: bold; font-family: Arial">Hi,
            <br />
            This is <span style="color: #18B5F0">a sample code my manoj</span>.<br />
            i hope this will help you to print a div</span>
    </div>
    <br />
    <input type="button" onclick="PrintDiv();" value="Print" />
    </form>
</body>
</html>

i hope this will help you out.

Same error.0x800a138f - JavaScript runtime error: Unable to get property 'innerHTML' of undefined or null reference — , Dec 13 '17 at 09:53

score 0 · Answer 2 · answered Nov 19 '19 at 13:07

You have to change OnClientClick from OnClientClick="printdiv()" to OnClientClick=" return printdiv()"

so your code suppose to

    <script type="text/javascript">
        function PrintDiv() {
            var contents = document.getElementById("dvContents").innerHTML;
            var frame1 = document.createElement('iframe');
            frame1.name = "frame1";
            frame1.style.position = "absolute";
            frame1.style.top = "-1000000px";
            document.body.appendChild(frame1);
            var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument;
            frameDoc.document.open();
            frameDoc.document.write('<html><head><title>DIV Contents</title>');
            frameDoc.document.write('</head><body>');
            frameDoc.document.write(contents);
            frameDoc.document.write('</body></html>');
            frameDoc.document.close();
            setTimeout(function () {
                window.frames["frame1"].focus();
                window.frames["frame1"].print();
                document.body.removeChild(frame1);
            }, 500);
            return false;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <span style="font-size: 10pt; font-weight: bold; font-family: Arial">Sample by Dharmin Shah</span>
        <hr />
        <div id="dvContents" style="border: 1px dotted black; padding: 5px; width: 300px" runat="server">
            <span style="font-size: 10pt; font-weight: bold; font-family: Arial">Hi,
            <br />
                This is <span style="color: #18B5F0">Dharmin's sample code</span>.<br />
                i hope this will help you to print a div</span>
        </div>
        <br />
        <asp:Button ID="Button" runat="server" Text="Button" OnClientClick="return PrintDiv();" value="Print" />

    </form>

</body>

Print specific part of webpage asp.net

2 Answers2