Question

我是网络开发界的新手，我有以下问题

我想在HTML5中实现一个打印图像的按钮（而不是整个HTML页面）

我尝试了此问题中的代码Print image on website

但我得到了一个未处理的例外：

0x800a138f - Microsoft JScript runtime error : Umable to get value of the property 'innerHTML':object is null or undefined

任何人都可以指导我如何做到这一点吗？

谢谢！

编辑：当我说打印时，我指的是在物理打印机上打印，而不是在屏幕上显示

Answer 1

这样的东西？我鞭打了这个

<!DOCTYPE>
<html>
<body>
<button onclick="showimage()">Click Here for Image</button>
</body>
<script type="text/javascript">
function showimage() {
    var _body = document.getElementsByTagName('body') [0];
    var img = document.createElement('img');
    //you can replace the link with any image you want
    img.setAttribute('src', 'http://i.123g.us/c/cute_teddy/card/109882.gif');
    img.setAttribute('alt', 'Picture');
    _body.appendChild(img);
}
</script>
</html>

jsFiddle Here

如果您需要帮助了解其工作原理，请不要犹豫。基本上，我们有一个按钮，我们创建img标签并设置适当的属性。成功完成后，我们可以将其附加到HTML文档的正文中以便显示。我建议您对DOM（文档对象模型）有一个很好的理解，因为您不熟悉Web开发/ Javascript。

Answer 2

所以这是一个非常简单的方法：

<!DOCTYPE>
<html>
<body>
<button onclick="showimage()">Click Here for Image</button>
</body>
<script type="text/javascript">
function showimage() {
     if (typeof img== 'object')
                    img= img.src;
                window.win = open(img);
                setTimeout('win.document.execCommand("Print")', 500);
}
</script>
</html>

用HTML5 / Javascript打印图像

2 个答案: