Question

我正在使用我发现的代码片段，使用隐藏的可见性来显示多页表单。很有可能我的所有问题都来自这种方法。那资源来自这里： http://www.devx.com/webdev/Article/10483/0/page/2

显示表单的多个页面是一种相当简单的方法......它可能从未打算允许打印。

<html>
<head>

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script language="JavaScript">

$.getScript("printThis.js", function(){
});

var currentLayer = 'page1';
function showLayer(lyr){
hideLayer(currentLayer);
document.getElementById(lyr).style.visibility = 'visible';
currentLayer = lyr;
}

function hideLayer(lyr){
document.getElementById(lyr).style.visibility = 'hidden';
}
function showValues(form){
var values = '';
var len = form.length - 1; //Leave off Submit Button
for(i=0; i<len; i++){
    if(form[i].id.indexOf("C")!=-1||form[i].id.indexOf("B")!=-1)
        continue;
    values += form[i].id;
    values += ': ';
    values += form[i].value;
    values += '\n';
}
alert(values);
}
</script>

<style>
body{
font: 10pt sans-serif;
}
.page{
position: absolute;
top: 10;
left: 100;
visibility: hidden;
}
</style>
</head>

<body>
<form id="multiForm" action="App1.php" method="POST" action="javascript:void(0)" onSubmit="showValues(this)" id="app">

<div id="page1" class="page" style="visibility:visible;">

Applicant Name: <input type="text" size="50" name="name1" >

</form>
<p><input type="button" id="C1" value="Continue" onClick="showLayer('page2')"></p>
</div>

<div id="page2" class="page">

This is Page 2
<br>
<input type="button" id="B1" value="Go Back" onClick="showLayer('page1')">
<input type="button" id="B2" value="Print App" onClick="$('#page1').printThis({})">
<br><br>

</div>
</form>
</body>
</html>

“打印应用”按钮正确调用printThis插件。但是，我没有从page1 DIV部分获得任何内容。所有打印的是右上角的正常标题部分（第1页，共1页）和左下角的空白和页面右下方的日期...没有内容，我的样本文件应该是申请人名称输入框。< / p>

我认为这是因为在显示page2的内容时，page1的DIV设置为“hidden”。如果我在按钮调用中替换“page2”，那么我会按预期从第2页获取内容。

所以...我猜我所追求的是一种临时更改printThis按钮调用中引用的DIV的方法，只需足够长的时间即可执行页面打印。

有什么想法吗？

Answer 1

我是插件作者 - 您需要将打印媒体查询合并到您的CSS中。

这也有助于用户选择文件＆gt;打印或控制+ P，因为它将显示所有表单元素。

打印介质查询允许您专门针对打印页面进行样式更改。

示例：

@media print {
     #page1, #page2 {
        display: block;
        visibility: visible;
        position: relative;
     }
}

您可以在css中加入此内容。

此外，根据您的上述代码 - 您的页面中包含css和javascript内联。您应该考虑将两者都移动到外部文件，以进行维护和改进代码标准。

printThis不适用于您当前的设置，因为插件会查找您指定的容器（选择器）以及文档头部中的任何链接的css。

因此，对于上述情况，您可以执行以下操作：

<!-- move all of this to the bottom of the page for performance -->
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="printThis.js"></script>
<script type="text/javascript" src="myJavascript.js"></script>
<!-- the above file is your javascript externalized, remove $.getScript, wrap in $(document).ready() -->

然后把它放在脑子里：

<link type='text/css' rel='stylesheet' href='style.css'>
<!-- contains your css from the page, including the print media query -->

使用隐藏的div方法将空白页发送到打印机

1 个答案: