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覆盖屏幕上的数据并刷新页面

回答

相关问题