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

Question

我一直在從事一個項目，我只需要打印隱藏的div的內容。 下面的解決方案工作正常，但是將頁面內容替換為div然后調用窗口的打印，然后將頁面替換為原始內容。 很好，但是當我在此之后單擊頁面或嘗試再次打印時，頁面將刷新。

有沒有一種方法，而無需打開新窗口來打印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;
    };

Answer 1

我創建了一個指令，該指令執行的操作與此類似。 它涉及到創建一個新窗口，用您要打印的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();
}

這適用於所有瀏覽器，並在用戶完成打印對話框窗口后徹底關閉所有內容。

Answer 2

看到我發現的類似問題： AJAX-打印頁面內容

Matt Razza的答案似乎是您想要的。

如果您嘗試打印不可見的內容，則可以將兩個不同的css文件用於不同的媒體（屏幕和打印），在其中通過顯示隱藏/取消隱藏所需的內容： 然后通過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(); 

Answer 3

您可以使用CSS來做到這一點： https ： //stackoverflow.com/a/356123/1516112

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

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

問題描述

3 個解決方案

解決方案1
0 2016-01-20 20:42:56

解決方案2
0 2016-01-20 20:48:04

解決方案3
0 2016-01-20 20:55:41

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

問題描述

3 個解決方案

解決方案1 0 2016-01-20 20:42:56

解決方案2 0 2016-01-20 20:48:04

解決方案3 0 2016-01-20 20:55:41

解決方案1
0 2016-01-20 20:42:56

解決方案2
0 2016-01-20 20:48:04

解決方案3
0 2016-01-20 20:55:41