How to print an image using javascript

Question

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?

Saeed Neamati · Accepted Answer · 2011-12-09T10:08:25.880

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.

You can also add `printWindow.close()` as the last line to automatically close the window after printing. — Nate, Aug 09 '14 at 16:30

score 2 · Answer 2 · edited Apr 19 '12 at 15:00

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;

score 1 · Answer 3 · answered Oct 20 '15 at 09:23

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);

score 0 · Answer 4 · answered Dec 09 '11 at 09:58

0

Yep, instead of using .text(), you use .html() where you pass the <img /> (including the source of course) to the fake document ready for print.

answered Dec 09 '11 at 09:58

Ahmed Nuaman

12,662
15
55
87

tried this. just gives the text "null" in the new window, instead of an image. tried it with a raw just in case the asp.net image wasn't rendering properly – notAnonymousAnymore Dec 09 '11 at 10:07

score 0 · Answer 5 · answered Dec 09 '11 at 10:14

Why not just make it this simple?

<input type="button" value="Print Div" onclick="PrintElem('<img src=myimage.jpg>')" />

and then call Popup like this: Popup(elem);

(you don't really need this Popup() function if you pass an image to print like this)

How to print an image using javascript

5 Answers5