使用javascript打印图像

1

是的，只是把图像放在屏幕上，然后在JavaScript中调用window.print();，它应该弹出。

（这是怎么了谷歌地图/谷歌日历做印刷）

来源

2010-05-25 22:44:52

+1

很酷。但是如果我想要一个不同的图像来显示启动弹出窗口？ – andrew 2010-05-25 22:47:40

+0

查看要打印的CSS样式。基本上可以在屏幕视图中隐藏图像，然后在打印视图中可见。 – 2010-05-25 23:14:30

21

popup = window.open(); 
popup.document.write("imagehtml"); 
popup.focus(); //required for IE 
popup.print();

来源

2010-05-25 22:48:31

+0

这将如何使用按钮工作？该按钮将启动此操作，但实际上会打印单独的图像。 – andrew 2010-05-25 23:04:03

+2

我不会为你编写所有的代码，这个地方的重点在于学习。 ;）你会使用按钮上的onmouseup事件： http://www.w3schools.com/jsref/event_onmouseup.asp – 2010-05-25 23:12:08

+2

我不想让你为我写...只是想指向正确的资源。我需要一个地方开始。谢谢。 – andrew 2010-05-25 23:13:27

8

使用此体内块

<img src="images.jpg" id="mainImg" /> 
<input type="button" value="Print Image" onclick="printImg()" />

来源

2012-09-04 03:21:50

+0

这在Chrome控制台中不起作用。 – Flea777 2013-11-13 20:14:23

0

这头块

<script type="text/javascript"> 
function printImg() { 
    pwin = window.open(document.getElementById("mainImg").src,"_blank"); 
    pwin.onload = function() {window.print();} 
} 
</script>

使用本在Chrome中运行：

<body ><img src="image.jpg" alt="" style="display: block; width: 100%; height: 100%;"> 

      <script type="text/javascript"> 
       window.onload = function() { 
        window.print(); 
        setTimeout(function() { 
         window.close(); 
        }, 1); 
       }; 
      </script> 
    </body>

来源

2014-04-30 18:20:54

4

此代码将在弹出窗口中打开YOUR_IMAGE_URL，打印后显示打印对话框并关闭弹出窗口。

var popup; 

function closePrint() { 
    if (popup) { 
     popup.close(); 
    } 
} 

popup = window.open(YOUR_IMAGE_URL); 
popup.onbeforeunload = closePrint; 
popup.onafterprint = closePrint; 
popup.focus(); // Required for IE 
popup.print();

MDN Reference code

来源

2014-06-04 09:02:43

12

另一个伟大的解决方案！一切归功于Codescratcher

<script type="text/javascript"> 
function ImagetoPrint(source) { 
    return "<html><head><script>function step1(){\n" + 
      "setTimeout('step2()', 10);}\n" + 
      "function step2(){window.print();window.close()}\n" + 
      "</scri" + "pt></head><body onload='step1()'>\n" + 
      "<img src='" + source + "' /></body></html>"; 
} 
function PrintImage(source) { 
    Pagelink = "about:blank"; 
    var pwa = window.open(Pagelink, "_new"); 
    pwa.document.open(); 
    pwa.document.write(ImagetoPrint(source)); 
    pwa.document.close(); 
}

<a href="#" onclick="PrintImage('YOUR_IMAGE_PATH_HERE.JPG'); return false;">PRINT</a>

查看完整的例子在这里： http://www.codescratcher.com/javascript/print-image-using-javascript/#comment-762

来源

2015-08-11 13:27:17

+0

为什么会有10 ms超时？为什么不简单地'' – Shasak 2015-11-27 10:54:27

+0

Codecratcher站点有点令人困惑我将此代码上传到我的github帐户：请参阅工作演示https://rawgit.com/orellabac/printFromJavascript/master/Print_Image.htm代码位于：https： //github.com/orellabac/printFromJavascript/ – orellabac 2017-06-12 21:14:36

0

我只花了45分钟，这个“简单”的问题，试图得到它我的方式希望它能够运作。

我在img标签内部有一个图像，它由我必须打印的jQuery Barcode插件动态生成。我想让它在另一个窗口打印，然后关闭窗口。这一切都应该发生在用户点击jQuery Grid插件中的按钮之后，jQuery-UI对话框中的对话框以及jQuery-UI对话框扩展器应用于其中。

我调整了每个人的答案，直到我终于想出了这个，也许它可以帮助某人。

w = window.open(document.getElementById("UB-canvas").src); 
w.onload = function() { w.print(); } 
w.onbeforeunload = setTimeout(function() { w.close(); },500); 
w.onafterprint = setTimeout(function() { w.close(); },500);

的setTimeout不仅仅是妈和笑声，这是我发现Firefox 42会打这些功能的唯一途径。它只是简单地跳过.close()函数，直到我为它添加了一个断点，然后它完美地工作。所以我假设它在应用onbeforeload事件函数和onafterprint事件函数之前创建了这些窗口实例，或者其他东西。

来源

2015-12-02 18:42:42 Kickass

使用javascript打印图像

回答

相关问题