如何在沒有HTML的情況下在網站上打印圖像

Question

有人可以告訴我如何在網頁中打印圖像，而在圖像周圍留下文字和HTML嗎？

在我的網站上是一個顯示圖像的頁面，它允許用戶通過

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

鏈接。 問題是打印頁面帶有一些HTML和網站上的一些文本。 但是我只想要圖像。 有沒有辦法只獲取圖像並避免其他一切？

謝謝

Answer 1

您應該為此使用CSS媒體查詢，例如：

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

img或任何其他更特定的選擇器，將您要打印的圖像作為目標。

-演示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 個解決方案

解決方案1
5 已采納 2017-11-19 08:14:13

-演示jsFiddle-

解決方案2
0 2017-11-19 08:11:37

如何在沒有HTML的情況下在網站上打印圖像

問題描述

2 個解決方案

解決方案1 5 已采納 2017-11-19 08:14:13

-演示jsFiddle-

解決方案2 0 2017-11-19 08:11:37

解決方案1
5 已采納 2017-11-19 08:14:13

解決方案2
0 2017-11-19 08:11:37