使用window.print（）打印HTML表单 [英] Printing HTML Form using window.print()
问题描述
我负责建立一个HTML表单链接到数据库的任务。这里没有问题。
问题是我需要用户能够打印该表单。
因此，我使用HTML按钮构建打印按钮，并在其后面放置了一些JQuery，以便表单正确格式化（删除一些边框，背景图像等），并使用窗口.print（）打印我的表单。
这是问题：
我的表格长6到7页。
但预计它在谷歌浏览器上打印效果良好（所有部分都在单独页面上），但在IE（最新版本）中，某些字段和某些部分 在一些页面上。
我认为问题在于IE如何使用边距和填充。
我也检查过对于任何参数，我可以传递给 window.print（）在Google上，也许它可以帮助但没有找到任何东西。
有人可以提供另一种方式或其他功能，我可以使用，所以我的表单在浏览器上打印时看起来相同？或者，也许有人可以指出如果我犯了一个错误。
这是我的代码：
HTML：
< div id =divCodeSecurite>
< h3 class =Titre> Codes desécuritédes ascenseurs< / h3>
< span class =SHL MixteLeftid =CodeSecuriteLeft>
< input type =radioid =B442007name =CodeSecuritevalue =B44-2007/>
< label for =B442007> B44-2007< / label>
< input type =radioid =B442010name =CodeSecuritevalue =B44-2010/>
< label for =B442010> B44-2010< / label>
< input type =radioid =ASME1712007name =CodeSecuritevalue =ASME 17.1-2007/>
< label for =ASME1712007> ASME 17.1-2007< / label>
< input type =radioid =ASME1712010name =CodeSecuritevalue =ASME 17.1-2010/>
< label for =ASME1712010> ASME 17.1-2010< / label>
< / span>
< span class =SHR MixteRightid =CodeSecuriteRight>
< label for =CodeSecuriteAutreclass =SHLabel> Autre：< / label>
< input type =textid =CodeSecuriteAutrename =CodeSecuriteAutre/>
< / span>
< / br>< / br>
< span class =SHL>
< label for =VilleInstallation> Ville d'installation：< / label>
< input type =textid =VilleInstallationname =VilleInstallation/>
< / span>
< / div>
< / br>
< div id =divTypeControl>
< h3 class =Titre> Type decontôle< / h3>
< span class =SHL>
< label class =SHLabel>Modèle：< / label>
< input type =radioid =JHD1000name =JHD1000value =JHD-1000/>
< label for =JHD1000> JHD-1000（Avec automate）< / label>
< / span>
< span class =SHR>
< input type =radioid =JHD2000name =JHD2000value =JHD-2000/>
< label for =JHD2000> JHD-2000（Carte de communication Canbus）< / label>
< / span>
< / div>
< div class =Spacers divspacerstyle =height：440px;>< / div>
注意：我只放了我的代码样本。我有几次这个长度。 CSS： 注意：如果删除了某些需要的内容，我会删除该问题不直接需要的代码请说，所以我将编辑并添加缺少的代码。 供参考：不要查找 JQUERY： 所以要清楚： Probelm：我无法让IE和Chrome以同样的方式打印我的表单。一些字段被分割为两部分，一些 寻找：A让他们在浏览器上以相同的方式打印我的表单或使用布局产生的错误。 我已经做了：查找<$ c $的参数c> window.print（）< div class =Spacers divspacerstyle =height：440px;>< / div> 是我曾尝试将所有每页。 AND试着添加一些SPACERS（见上面的代码）。
< style rel =stylesheettype =text / css>
.Border
{
border：black solid 2px;
}
.Titre
{
text-align：center;
背景颜色：黑色;
颜色：白色;
border：纯黑2px;
}
.Spacers
{
display：none;
}
< / style>
.divspacer 。它不存在，只在我的JQuery中使用（见下文）。
<$ p $ 函数ImprimerForm（）
{
$（＃divBgd）。removeClass（'Border'）; //删除边界
$（＃ divValidationEnvois）。css（'display'，'none'）; //这个隐藏所有的按钮，以便它们不打印
$（。divspacer）。removeClass（'Spacers'）; //使分隔符可见
$ b window.print（）; //打印表单
$（＃divBgd）。addClass（'Border'）; //将所有东西都放回原处！ ！
$（＃divValidationEnvois）。css（'display'，'block'）;
$（。divspacer）。addClass（'Spacers'）;
}
< div> 分别位于两个不同的页面上。
谢谢大家的帮助！
不是试图用jQuery隐藏不需要的div，而应该使用特定于打印的css。通过使用jQuery隐藏元素，您可能会遇到不必要的副作用。通过添加打印css，您可以指定仅在打印机试图打印页面时使用的规则集。所以没有任何东西被添加到你可见的CSS规则中。例如，在这个CSS中，你可以设置某些元素为 display：none; 。
print css：
<！ - [if IE]>
< link rel =stylesheettype =text / cssmedia =printhref =printer.css/>
<！[endif] - >
如果您想将规则应用于所有浏览器，则可以删除if / endif标签。 / p>
创建打印规则的另一个选择是像这样使用css @media print 部分它适用于所有的浏览器，这实际上不是一个坏主意）：
< style rel =stylesheettype =文本/ CSS>
@media print {
#divValidationEnvois {
display：none;
}
}
< / style>
I was charged with the task of building a HTML Form link to a DB. Here no problem.
The problem is I need the user to be able to print that form.
So I build a "Print button" using a HTML button and I put some JQuery behind it so the form would format correctly (remove some borders, background-images and such) and I use window.print() to print my form.
Here is the problem:
My form is 6 to 7 pages long.
But has expected It print fine on Google Chrome (All the section are on separate pages) but In IE (latest version) some field and some sections are "cut in half" on some pages.
I think the problem is how IE use margins and paddings.
I also checked for any parameter I could pass to window.print() on Google thinking maybe it could help but did'nt find anything.
Can someone provide another way or another function I could use so my form look the same on both browser when print?? Or maybe someone could point If I made a mistake.
Here is my code:
HTML:
<div id="divCodeSecurite">
<h3 class="Titre">Codes de sécurité des ascenseurs</h3>
<span class="SHL MixteLeft" id="CodeSecuriteLeft">
<input type="radio" id="B442007" name="CodeSecurite" value="B44-2007"/>
<label for="B442007">B44-2007</label>
<input type="radio" id="B442010" name="CodeSecurite" value="B44-2010"/>
<label for="B442010">B44-2010</label>
<input type="radio" id="ASME1712007" name="CodeSecurite" value="ASME 17.1-2007"/>
<label for="ASME1712007">ASME 17.1-2007</label>
<input type="radio" id="ASME1712010" name="CodeSecurite" value="ASME 17.1-2010"/>
<label for="ASME1712010">ASME 17.1-2010</label>
</span>
<span class="SHR MixteRight" id="CodeSecuriteRight">
<label for="CodeSecuriteAutre" class="SHLabel">Autre:</label>
<input type="text" id="CodeSecuriteAutre" name="CodeSecuriteAutre"/>
</span>
</br></br>
<span class="SHL">
<label for="VilleInstallation">Ville d'installation:</label>
<input type="text" id="VilleInstallation" name="VilleInstallation"/>
</span>
</div>
</br>
<div id="divTypeControl">
<h3 class="Titre">Type de contôle</h3>
<span class="SHL">
<label class="SHLabel">Modèle:</label>
<input type="radio" id="JHD1000" name="JHD1000" value="JHD-1000"/>
<label for="JHD1000">JHD-1000 (Avec automate)</label>
</span>
<span class="SHR">
<input type="radio" id="JHD2000" name="JHD2000" value="JHD-2000"/>
<label for="JHD2000">JHD-2000 (Carte de communication Canbus)</label>
</span>
</div>
<div class="Spacers divspacer" style="height:440px;"></div>
Notes: I put only a sample of my code. I have several time this lenght. The <div class="Spacers divspacer" style="height:440px;"></div> is what I used to try and put all the <div id=""> on one page each.
CSS:
<style rel="stylesheet" type="text/css">
.Border
{
border: black solid 2px;
}
.Titre
{
text-align:center;
background-color:black;
color:white;
border: solid black 2px;
}
.Spacers
{
display:none;
}
</style>
Notes: I remove the code that was not directly needed for the question if I remove something that was needed please say so I will Edit and Add the missing code.
FYI: dont look for .divspacer. It does not exist, it is use only in my JQuery (see below).
JQUERY:
function ImprimerForm()
{
$("#divBgd").removeClass('Border');//This remove the border
$("#divValidationEnvois").css('display', 'none');//This hide all the button so they dont print
$(".divspacer").removeClass('Spacers');//Make spacers visible
window.print();//Print form
$("#divBgd").addClass('Border');//Put everything back has it was!!
$("#divValidationEnvois").css('display', 'block');
$(".divspacer").addClass('Spacers');
}
So Just to be clear:
Probelm: I can't get IE and Chrome to print my form the same way. Some field are cut in two and some <div> are on two different pages.
Looking for: A way to make them print my form the same way on both browser OR an error a made with the layout.
What I already did: Look for parameters for window.print() AND Tried adding some SPACERS (see code above).
Thank you all for the help!
Instead of trying to hide unwanted divs using jQuery, you should use a print specific css instead. By hiding elements with jQuery you could bump into unwanted side effects. By adding a print css, you specify a ruleset only used when the printer is trying to print the page. So nothing is added to your visible css rules. In this CSS you can for example set certain elements to display:none;.
Example of adding an IE specific print css:
<!--[if IE]>
<link rel="stylesheet" type="text/css" media="print" href="printer.css" />
<![endif]-->
You can remove the if IE / endif tags if you want to apply to rules to all browsers.
Another option to create print rules is to use a css @media print section like so (using it this way also applies it to all browsers, which is actually not a bad idea):
<style rel="stylesheet" type="text/css">
@media print {
#divValidationEnvois {
display: none;
}
}
</style>
这篇关于使用window.print（）打印HTML表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
