Question

我正在为一位朋友的朋友在网站上工作，而我目前最困难的就是收养表格。我有一个表单已完成，但我无法在新页面上打开输入信息。可以说打印屏幕仅包括问题和输入的答案。我有一个非常简单的代码，很好。它突然出现了我想要印刷的东西。问题是我无法使用CSS自定义它。我从这里的帮助问题中找到了另一种方法。但是这个问这个问题的人并没有做同样的事情，所以这只会有所帮助。

这是我尝试的代码，但运行正常，但无法自定义：

＆＃13;

<script type="text/javascript">

function printDiv(divName) {
 alert('s');
 var printContents = document.getElementById(divName).innerHTML;
 w=window.open();
 w.document.write(printContents);
 w.print();
 w.close();
}

＆＃13;

For specific area of a page
<div id="print-content">
 <form>

  <input type="button" onclick="printDiv('print-content')" value="print a div!"/>
</form>
</div>

＆＃13;

这是我也尝试过的另一个代码，它根本不起作用：

＆＃13;

function printPage(){
        var width = screen.width - 50;
        var tableData = '<table width="'+width+'" border="1">'+document.getElementsByTagName('table')[0].innerHTML+'</table>';

        var cssHead = '<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>'

        var data = cssHead + '<button onclick="window.print()">Print this page</button>'+tableData;     
        myWindow=window.open('','','width=auto,height=auto');
        myWindow.innerWidth = screen.width;
        myWindow.innerHeight = screen.height;
        myWindow.screenX = 0;
        myWindow.screenY = 0;
        myWindow.document.write(data);
        myWindow.focus();
    };

＆＃13;

此后没有任何事情发生。我点击了按钮，一切都没发生。

然后我尝试了两点：

＆＃13;

function printDiv(divName) {


var printContents = document.getElementById(divName).innerHTML;
var cssHead = '<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>'


var data = cssHead + printContents;

 myWindow=window.open('','','width=auto,height=auto');
        myWindow.innerWidth = screen.width;
        myWindow.innerHeight = screen.height;
        myWindow.screenX = 0;
        myWindow.screenY = 0;
        myWindow.document.write(data);
        myWindow.focus();
	myWIndow.close();
}

＆＃13;

这也行不通。点击按钮什么也没发生。对于该做什么我感到非常可怕。我知道一些JavaScript但不是很多。在学校我有点接触它。没什么先进的。我真的想完成这件事，这是它完成之前的最后一件事。有任何想法吗？我做错了什么？

Answer 1

如果我的理解是正确的，这可能会对你有所帮助

在第一个带有media =＆＃34; print＆＃34;。

的javascript中包含样式表

也可以看到这个链接，这可能对你有帮助

Print/Preview Ignoring my Print.css

Answer 2

function printDiv() {


var printContents = document.getElementById("myForm");
var cssHead = '<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>'


var data = cssHead +printContents;

 myWindow=window.open('','','width=auto,height=auto');
        myWindow.innerWidth = screen.width;
        myWindow.innerHeight = screen.height;
        myWindow.screenX = 0;
        myWindow.screenY = 0;
        myWindow.document.write(data);
        myWindow.focus();
        myWindow.close();
}
</script>

.form-style-1 {
     
     margin:10px auto;
     max-width: 1100px;
     padding: 20px 12px 10px 20px;

     background-color: #ccebff;
}
.form-style-1 li {
     padding: 5px;
     display: block;
     list-style: none;
     margin: 5px 0px 0px 0px;
     background-color: transparent;
}
.form-style-1 label{
     margin:0 0 3px 0;
     padding:0px;
     display:block;
     font-weight: bold;
     color: #4db8ff;
     
}
.form-style-1 input[type=text], 
.form-style-1 input[type=date],
.form-style-1 input[type=datetime],
.form-style-1 input[type=number],
.form-style-1 input[type=search],
.form-style-1 input[type=time],
.form-style-1 input[type=url],
.form-style-1 input[type=email],
 textarea, 
 select{
     box-sizing: border-box;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     border:1px solid #BEBEBE;
     padding: 7px;
     margin:0px;
     -webkit-transition: all 0.30s ease-in-out;
     -moz-transition: all 0.30s ease-in-out;
     -ms-transition: all 0.30s ease-in-out;
     -o-transition: all 0.30s ease-in-out;
     outline: none;  
}
.form-style-1 input[type=text]:focus, 
.form-style-1 input[type=date]:focus,
.form-style-1 input[type=datetime]:focus,
.form-style-1 input[type=number]:focus,
.form-style-1 input[type=search]:focus,
.form-style-1 input[type=time]:focus,
.form-style-1 input[type=url]:focus,
.form-style-1 input[type=email]:focus,
.form-style-1 textarea:focus, 
.form-style-1 select:focus{
     -moz-box-shadow: 0 0 8px #88D5E9;
     -webkit-box-shadow: 0 0 8px #88D5E9;
     box-shadow: 0 0 8px #88D5E9;
     border: 1px solid #88D5E9;
}
.form-style-1 .field-divided{
     width: 20%;
}

.form-style-1 .field-divided2{
     width: 152px;
}

.form-style-1 .field-long{
     width: 20%;
}
.form-style-1 .field-select{
     width: 8%;
}

.form-style-1 .field-select2{
     width: 100px;
}

.form-style-1 .field-textarea{
     height: 80px;
}
.form-style-1 input[type=submit], .form-style-1 input[type=button]{
     background: #4B99AD;
     padding: 8px 15px 8px 15px;
     border: none;
     color: #fff;
}
.form-style-1 input[type=submit]:hover, .form-style-1 input[type=button]:hover{
     background: #4691A4;
     box-shadow:none;
     -moz-box-shadow:none;
     -webkit-box-shadow:none;
}
.form-style-1 .required{
     color:red;
}

<div id="frminfo">
<form method="post" id="myform" enctype="text/plain"> 
<ul class="form-style-1">

那根本不起作用让我再试一次。我要发布我要打印的表单输入，我正在使用的javascript和按钮onClick事件。我还包括已经影响表格的CSS。我单击应该触发onClick事件的打印按钮，但没有任何反应。我无法弄清楚这一点。已经被困了几个星期。

我甚至无法让功能工作，更别提css试图自定义它。

尝试使用我可以自定义的表单中的信息创建一个新窗口。卡住

2 个答案: