How to print an image using javascript

javascript asp.net image printing

19,759

Solution 1

Because you're passing a wrong parameter to the printing function. Printing something in JavaScript is as easy as calling window.print(); method. To test it, simply use developer tools of your browser and write into its console:

window.print();

Now, when you want to print something specific, you have two ways:

Create a special stylesheet for printing in the same page, which hides other elements and only shows your specified region.
Or, open a new window, copy what you want there, then print it.

Now, what you can do is to write your own function:

function printImage(image)
{
        var printWindow = window.open('', 'Print Window','height=400,width=600');
        printWindow.document.write('<html><head><title>Print Window</title>');
        printWindow.document.write('</head><body ><img src=\'');
        printWindow.document.write(image.src);
        printWindow.document.write('\' /></body></html>');
        printWindow.document.close();
        printWindow.print();
}

var image = document.getElementById('image');
printImage(image);

and you can also see this function in action here.

Just let the browser open popup, and also note that I only pass the src value of the image element to the new window.

Solution 2

Yes.

The following java script will help you to print an image in image control.

var printContent = document.getElementById('divImage');
var img = document.getElementById('imgMain');

var windowUrl = 'MyPage.aspx';
var uniqueName = new Date();
var windowName = "MyPage" + uniqueName.getTime();

printWindow = window.open(windowUrl, windowName, 'location=1,status=1,scrollbars=1,width=800,height=600');

printWindow.document.write("<div style='width:100%;'>");
printWindow.document.write("<img id='img' src='" + img.src + "'/>");
printWindow.document.write("</div>");

printWindow.document.close();
printWindow.focus();
printWindow.print();
printWindow.close();
return false;

Solution 3

this is better solution that also work fine in google chrome:

   var printWindow = window.open('', 'Print Window', 'height=533,width=800');
        printWindow.document.write('<html><head><title>Print Window</title>');

        printWindow.document.write("<script src='script/jquery-1.11.3.min.js' type='text/javascript'><\/script>");


        printWindow.document.write("<script type='text/javascript'>");

        printWindow.document.write("var DoPrint = false;");
        printWindow.document.write("$(document).ready(function () {");

        printWindow.document.write("DoPrint = true;");

        printWindow.document.write("});");

        printWindow.document.write("<\/script>");


        printWindow.document.write('</head><body ><img src=\'');
        printWindow.document.write(document.getElementById('image').src);
        printWindow.document.write('\' /></body></html>');
        printWindow.document.close();


        function Print() {

            if (typeof printWindow.DoPrint != "undefined" && printWindow.DoPrint == true) {

                clearInterval(PrintintervalNumber);

                printWindow.print();
                printWindow.close();

            }

        }


        PrintintervalNumber = setInterval(Print, 1000);

19,759

Author by

notAnonymousAnymore

Updated on June 04, 2022

Comments

notAnonymousAnymore about 2 years

I am trying to print an ASP.NET Image using the example here.

When I use the above example for a div, it works, but I can't adapt it to print anything else. How can I get it to print an Image? Do I wrap the Image in a div and change the ".text()" part in the script to something else?
notAnonymousAnymore over 12 years

tried this. just gives the text "null" in the new window, instead of an image. tried it with a raw <img /> just in case the asp.net image wasn't rendering properly
Nate almost 10 years

You can also add printWindow.close() as the last line to automatically close the window after printing.