JavaScript覆蓋屏幕上的數據並刷新頁面

我一直在研究一個項目，我只需要打印隱藏的div的內容。下面的解決方案工作正常，但用div取代頁面內容，然後調用窗口的打印，然後用原始內容替換頁面。這很好，但是當我在此之後點擊頁面或嘗試再次打印時，頁面會刷新。JavaScript覆蓋屏幕上的數據並刷新頁面

有沒有辦法，而無需打開一個新的窗口來打印div的內容，該頁面仍然可以正常工作？

$scope.printDiv = function(printable) { 
    var restorePage = document.body.innerHTML; 
     var printContent = document.getElementById(printable).innerHTML; 
     document.body.innerHTML = "<html><head><title></title></head><body>" + printContent + "</body>"; 
     window.print(); 
     document.body.innerHTML = restorePage; 
    };

來源

2016-01-20 Brandon Wilson

把id放在雙引號中;的document.getElementById（「可印刷」）的innerHTML。第4行如何處理：document.body.innerHTML = printContent; –

我已經創建了一個指令，做了很多這樣的事情。它涉及到創建一個新窗口，用你想要打印的HTML填充它，打印該窗口，然後最終關閉。

的代碼如下所示：

$scope.printPage = function() { 
    var pageToPrint = $window.open('', 'Print Page', 'width=800, height=600'); 
    pageToPrint.document.write(angular.element(pageHtml).html()); 
    pageToPrint.document.close(); 
    pageToPrint.focus(); 
    pageToPrint.print(); 
    pageToPrint.close(); 
}

這適用於所有的瀏覽器，乾淨一旦用戶使用打印對話框窗口完成關閉所有的東西。

來源

2016-01-20 20:42:56

今天早上我做了同樣的事情，它使用靜態數據。每個隱藏的'div'都有不同的信息，並且不會引入不同的數據。 –

@BrandonWilson然後它聽起來像你的問題不是'如何打印html'，而是'如何獲得正確的html'。這與你發佈的內容完全不同。你會需要一個全新的問題，並附上額外的代碼。 –

看到一個類似的問題，我發現：AJAX - Print Page Content

看來answer of Matt Razza是你所期待的。

如果你想打印無形內容，您可以使用兩個不同的 CSS文件，其中你隱藏/顯示通過顯示器所需的內容不同的媒體（屏幕VS打印）：無;然後通過window.print（）產生打印對話框。
<link rel="stylesheet" type="text/css" href="theme1.css" media="screen" /> 
<link rel="stylesheet" type="text/css" href="theme2.css" media="print" /> 
<div class="hidden_on_page">YOU CAN'T SEE ME BUT YOU CAN PRINT ME!</div> 
<div class="on_page">YOU CAN SEE ME BUT YOU CAN'T PRINT ME</div> 
在theme1.css
然後：
.hidden_on_page { display: none; } 
主題2.css：
.on_page { display: none; } 
，並通過在需要時您將觸發打印對話框產卵：
window.print(); 

來源

2016-01-20 20:48:04

你可以用CSS來做：https://stackoverflow.com/a/356123/1516112

當用戶點擊你的按鈕時，使用.no-print類將你的整個頁面包裝在div中。接下來將您的內容添加到前一個div旁邊的另一個div中。致電print()並恢復您的頁面。它應該工作。

來源

2016-01-20 20:55:41 nikoskip

JavaScript覆蓋屏幕上的數據並刷新頁面

回答

相關問題