Question

有人可以告诉我如何在我的网页上打印图像，留下文字和图像周围的HTML吗？

在我的网站中，这是一个显示图像的页面，它允许用户通过

打印图像

<a href="#" onclick="window.print()">PRINT</a>

链接。问题是打印页面附带了一些HTML和网站上的一些文本。但我只想要这个形象。有没有办法只获取图像并避免其他所有内容？

由于

Answer 1

您应该使用CSS媒体查询，例如：

@media print {
    body *:not(img) {display:none;}
}

img或针对您要打印的图片的任何更具体的选择器。

-DEMO jsFiddle-

Answer 2

你可以做的一件事就是直接调用window.print，在页面底部保留一个隐藏的div。用户单击打印按钮后，立即在隐藏的div中添加图像。然后只打印隐藏div的内容。在点击按钮的功能中，这样的东西

var mywindow = window.open('', 'PRINT', 'height=400,width=600');

    mywindow.document.write('<html><head><title>' + document.title  + '</title>');
    mywindow.document.write('</head><body >');
    mywindow.document.write('<h1>' + document.title  + '</h1>');
    mywindow.document.write(document.getElementById("idOfYourHiddenDiv").innerHTML);
    mywindow.document.write('</body></html>');

    mywindow.document.close();
    mywindow.focus();

    mywindow.print();
    mywindow.close();

如何在没有HTML

2 个答案:

-DEMO jsFiddle-