我正在处理一个作为网络应用程序构建的 ionic 5 应用程序。它没有移动组件。
我需要允许用户打印页面。当我有一个打印按钮并与如下所示的功能关联时，它仅打印可视区域。
printPage() {
window.print();
}
考虑到屏幕上的内容量，我可以判断该文档应该有 2-3 页长。
我看到有一个cordova-plugin-printer插件，但它用于从移动设备进行打印。
打印整个 DOM 的正确方法是什么？
假设我在几页和每当用户点击时都有一个打印按钮.它将以模态弹出内容,并可以从那里打印.任何想法将不胜感激.
我有几页打印按钮.当用户点击它时,需要在模态中输出内容而不是从该模态打印.
因此,我实例化一个具有指定高度的新jquery ui对话框窗口,其中内容导致滚动条出现.我在对话框窗口中有一个打印按钮,用于打印对话框窗口中的所有内容.
它目前只打印可见的行.
关于如何打印整个批次的任何想法？
我需要提供打印部分网页的选项.这是使用javascript window.print()回答:Bill Paetzke实现的.弹出窗口打开(这包含CSS样式),打印对话框也会打开.但CSS样式并没有出现在印刷品中.试过@media = print,但这也行不通.CSS样式主要由背景颜色组成.我得到的一个选项是用1px*1px的图像替换背景颜色并重复它.还有其他方法吗？
浏览器:IE7代码:
<html>
<head>
<style type="text/css" media="print,screen">
.hideMe{
display:block;
}
.PrintClass {
display:block;
}
.NoPrintClass{
display:block;
}
</style>
<script type="text/javascript"
src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"> </script>
<script type="text/javascript">
function PrintElem(elem)
{
Popup($('<div/>').append($(elem).clone()).html());
}
function Popup(data)
{
var mywindow;
mywindow = window.open('', 'mydiv','height=400,width=600,scrollbars=yes','');
mywindow.document.write('<html><head><title>my div</title>');
mywindow.document.write('<style type="text/css" media="print,screen">.hideMe{display:none;}.NoPrintClass{display:none;}</style>');
mywindow.document.write('</head><body>');
mywindow.document.write('drop down selected value in parent: '+mywindow.opener.document.getElementById('testSelect').options[mywindow.opener.document.getElementById('testSelect').selectedIndex].text+'<br/>');
mywindow.document.write('contentStarts<br/>');
mywindow.document.write(' using jquery: '+data);
mywindow.document.write(' using javascript: '+mywindow.opener.document.getElementById('mydiv').innerHTML);
mywindow.document.write('<br/>contentEnds');
mywindow.document.write('<br/>');
mywindow.document.write('</body></html>');
mywindow.document.focus();
mywindow.document.close();
mywindow.print();
return true;
}
</script>
</head>
<body>
This is not …请检查下面的HTML代码.第3个DIV部分可见,因为它被第2个(具有白色背景)覆盖.到目前为止一切都很好,一切都在IE和Firefox中正确显示.
我打印页面时问题开始.在Firefox中,它打印在页面上显示.在Internet Explorer 8中,它以某种方式完全打印所有DIVS.它看起来好像在第二个DIV(或全部)上应用了不透明度滤镜,这使第三个DIV完全可见......
我为页面的打印版本创建了一个带有新内容(在javascript中)的白色叠加层.由于上述问题,它无法正常工作,因为叠加层下方的所有内容也会打印出来......
为什么IE8会打印这种隐形内容？有解决方案吗？
<html>
<head>
</head>
<body>
<div style="background-color:#999999;position:relative;border:solid 1px black;width:500px;height:500px;">
<div style="position:absolute;width:300px;height:200px;top:5px;left:5px;border:dashed 1px #cccccc;z-index:99;background-color:white;"></div>
<div style="position:absolute;width:100px;height:200px;top:100px;left:50px;border:dashed 5px #cccccc;z-index:98;background-color:white;"></div>
</div>
</body>
</html>
我正在尝试Image使用此处的示例打印ASP.NET .
当我将上面的例子用于div时,它可以工作,但我无法使其适应其他任何东西.我怎么才能打印出来Image？我是否Image在div中包装并将脚本中的".text()"部分更改为其他内容？