Link to home
Start Free TrialLog in
Avatar of Moti Mashiah
Moti MashiahFlag for Canada

asked on

Print images with javascript.

Hi Guys,
I am trying to print images from my dom:
This is what I am doing:
//dom
<div id="thumbnailViewerDiv" style="width: 200px; height: 700px; background-color: darkgray; text-align: center;">
            <img src="1.Jpg" width="150" height="200">
            <img src="2.Jpg" width="150" height="200">
            <img src="3.Jpg" width="150" height="200">
  
        </div>

Open in new window


//javascript
 function ImageReturne() {
        var div = document.getElementById("thumbnailViewerDiv");
        var img = div.getElementsByTagName("img");
        var imgList = "";
        for (let i = 0; i < img.length; i++) {
            imgList += "<img src='" + img[i].src + "' />"
        }
        debugger;
        var firstFunc = function step1(){ setTimeout('step2()', 10);}
        var secondFunc = function step2(){window.print();window.close()}

        var getImages = "<html><head><script>\n" + firstFunc + "\n" + secondFunc + "</scri" + "pt></head><body onload='step1()'>\n" +
        "'" + imgList + "" + "</body></html>";
        return getImages;
    }


    function PrintImage() {
        Pagelink = "about:blank";
        var pwa = window.open(Pagelink, "_new");
        pwa.document.open();
        pwa.document.write(ImageReturne());
        pwa.document.close();
    }

Open in new window


All working fine, but the pics cut off on the right side when the print popup and also there are picture that go too much down or one pic go on the half page and the other half on another page.
Any idea?

Actually...I fount one solution and it is to change the scale t 50 when I am in the window.print() screen.
If you have better solution before it goes to the printer I would be happy to hear.
Thank you.
ASKER CERTIFIED SOLUTION
Avatar of NerdsOfTech
NerdsOfTech
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Changing objects in @media print { } allows one to customize the CSS of the print output.