admin管理员组

文章数量:1287579

I want to print image with javascript. So I used this code to open image in new window and print:

win = window.open(img.src,"_blank");
win.onload = function() { win.print(); }

This works fine with the default image file:

<img id="image1" src="myimage.jpg">

But when i replace the default image with image data read from disk:

var fileElem = document.getElementById("fileElem").files[0];
var reader = new FileReader();
reader.onload = function(event) {
   img.src = event.target.result;
};
reader.readAsDataURL(fileElem);

And then open new window & print - the image apears fine in the new window, but no print operation is done. How to make the win.print() to work?

I want to print image with javascript. So I used this code to open image in new window and print:

win = window.open(img.src,"_blank");
win.onload = function() { win.print(); }

This works fine with the default image file:

<img id="image1" src="myimage.jpg">

But when i replace the default image with image data read from disk:

var fileElem = document.getElementById("fileElem").files[0];
var reader = new FileReader();
reader.onload = function(event) {
   img.src = event.target.result;
};
reader.readAsDataURL(fileElem);

And then open new window & print - the image apears fine in the new window, but no print operation is done. How to make the win.print() to work?

  • javascript
  • image
  • printing
Share Improve this question asked Dec 16, 2013 at 14:07 JoeJoe 4193 gold badges7 silver badges13 bronze badges 5
  • t no print operation is done What does that mean? The print dialog does not appear? – epascarello Commented Dec 16, 2013 at 14:12
  • Yes, not print dialog apears in the second scenario. – Joe Commented Dec 16, 2013 at 14:29
  • Why use a new window? CSS Print Media, hide everything but an image when the print happens. – epascarello Commented Dec 16, 2013 at 14:39
  • can you post more informaion about win value. where it is called like that.try to provide environment in jsfiddle! – BlackPOP Commented Dec 16, 2013 at 14:41
  • epascarello thanks, If i want to print full sized big image it would be a problem with my website's layout. But it looks like a solution if I can't do it otherwise. – Joe Commented Dec 16, 2013 at 14:44
Add a ment  | 

2 Answers 2

Reset to default 5

OK!

I'v tried this on Chrome and it's work well :

<html>
    <head>
        <script language="javascript" type="text/javascript">
            function printImage() {
                var fileElem = document.getElementById("fileElem").files[0];
                var reader = new FileReader();
                reader.onload = function(event) {
                    var html  = "<html><head>" +
                        "</head>" +
                        "<body  style ='-webkit-print-color-adjust:exact;'>"+
                        "<img src=\"" + event.target.result + "\" onload=\"javascript:window.print();\"/>" +
                        "</body>";
                    var win = window.open("about:blank","_blank");
                    win.document.write(html);

                };
                reader.readAsDataURL(fileElem); 
            }
       </script>
   </head>
   <body>
       <input type="file" id="fileElem"/>
       <button onclick="printImage()">PRINT</button>
   </body>
</html>

Regards.

I'm not sure because I don't know all of your code, but maybe this could work:

var fileElem = document.getElementById("fileElem").files[0];
var reader = new FileReader();
reader.onload = function(event) {
   var win = window.open(event.target.result,"_blank");
   win.onload = function() { win.print(); }
};
reader.readAsDataURL(fileElem);

you don't need anymore "img" tag.

本文标签： Print image with JavascriptStack Overflow

版权声明：本文标题：Print image with Javascript - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741273070a2369573.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。