Question

我需要能够在8.5“x 11”的纸上打印我的表格。表单需要将所有表单字段留空。然后我的客户将签署表格。然后，我需要能够填写计算机上的所有表单域，然后将所有表单域打印到表单中。

我怎样才能在html和css中完成。

Answer 1

您应该在普通页面中设计表单，并使用CSS3 Media Styles为页面设置“打印”格式的样式。 E.g。

 @media print {      /* Just for printer */
   body { font-size: 10pt }
 }

 @media screen {     /* Just for computer */
   body { font-size: 13px }
 }

Codex - Styling for Print是关于设置打印页面样式的好文章。

从那里，您可以轻松添加简单的JavaScript以执行打印操作：

 <a href="JavaScript:window.print();">Print this page</a>

或

 <body onload="JavaScript:window.print();">

Answer 2

ghayes方法可行。

但在9之前的IE（More Info Here）

中不支持使用CSS3媒体样式

但是所有浏览器都支持媒体类型EX：

<link href="/css/print.css" media="print" type="text/css" rel="stylesheet" />

我会坚持使用媒体类型来打印我的打印样式表。

我将举一个简单的打印样式表（我在我的网站上使用的样式表）的例子

/*
*********************************
* PRINT ONLY STYLES ***
*********************************
*/

/* TAGS */

html, body{
font-size:12pt !important; } /* !important Tags are to overide other CSS 
                                 when printed */

h1{ font-size:18pt !important; }
h2{ font-size:16pt !important; }
h3{ font-size:14pt !important; }
h4{ font-size:12pt !important; }
h5, h6{ font-size:10pt !important; }

* {color:#000 !important; } 


/* HIDE HEAD, FOOTER, AND SIDEBAR ELEMENTS */

#top, .social, #pre_footer_back_ground, #right_sidebar, .full_shadow, 
.slideshow, .light_button, .dark_button, .addthis_toolbox, img
{ display:none; }

/*SHOW PRINT ONLY AREAS*/
#logo-print, #copyright-print, #contact-print {display:block;}


/* DISPLAY ABSOLUTE LINKS */

a[href^="http://"]:after{content: " (" attr(href) ") ";}

a {text-decoration:none;}


/* FORMS FOR PRINT */

#form textarea, #form input, #form select{ border:1px solid #fff; color:#fff; }
#form textarea:focus, #form input:focus{ background-color:#fff; }

.form textarea, .form input, .form select{ border:1px solid #fff; color:#fff; }
.form textarea:focus, .form input:focus{ background-color:#fff; }

    #form, .form{ clear:both; }
#form form, .form form{ padding-top:10px; }
#form textarea{ float:right; margin-bottom:10px; padding:6px 5px 6px 5px; width:450px; height:130px; overflow:hidden; }
.form textarea{ float:right; margin-bottom:10px; padding:6px 5px 6px 5px; width:450px; height:130px; overflow:hidden; }
#form input{ float:right; margin-bottom:10px; padding:6px 5px 6px 5px; width:450px; font-size:13px; line-height:18px; }
.form input{ float:right; margin-bottom:10px; padding:6px 5px 6px 5px; width:450px; font-size:13px; line-height:18px; }
#form input, #form textarea, .form input, .form textarea{
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
}

/* ETC Add your print only styles */

您可以轻松自定义表单，以便只显示表单并轻松让用户打印表单。然后，您将获取已签名的纸张并填写信息并再次通过打印机运行。

可能需要做一些工作才能使一切正确（比如对齐等），但这不应该是超级难的。

因此，基本上可以像平常一样创建表单（HTML）并为您的站点设置样式（CSS），然后在仅打印样式中更改CSS。

希望这有助于。 =＆GT;

在合法尺寸的纸张上打印html / css表格

2 个答案: