Moti Mashiah
asked on
Print images with javascript.
Hi Guys,
I am trying to print images from my dom:
This is what I am doing:
//dom
//javascript
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.
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>
//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();
}
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Changing objects in @media print { } allows one to customize the CSS of the print output.