jQuery/JavaScript在线公文包表单-打印样式表

我目前正在处理这段代码，它收集信息以创建在线投资组合。

这是当前代码：

<html>
<head>
<title>Printable Form</title>
<link href="form.css" type="text/css" rel="stylesheet"> 
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript" src="jquery-1.8.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('#printbutton').click(function(){
  var contents = 'Name: ' + $("#Name").val()+'<br>';
  contents += 'Surname: ' + $("#Surname").val()+'<br>';
  contents += 'Email: ' + $("#Email").val()+'<br>'; 
  contents += 'Student ID: ' + $("#Student ID").val()+'<br>';
  contents += 'Campus: ' + $("#Campus").val()+'<br>';
  contents += 'Message: ' + $("#Message").val()+'<br>';
  var frame = $('#printframe')[0].contentWindow.document;
  // show the modal div
  //$('#modal').css({'display':'block'});
  frame.open();
  frame.write(contents);
  frame.close();
  $('#printframe')[0].contentWindow.print();
  });
});
</script>
</head>
<body>
<div id="page-wrap">
  <h1>Volunteering Portfolio</h1>
  <p>Please fill in the form below in all its parts</p>
  <div id="contact-area">
  <form method="post" action="">
   <label for="Name">Name:</label>
   <input type="text" name="Name" id="Name">
   <label for="Surname">Surname:</label>
   <input type="text" name="Surname" id="Surname">
   <label for="Student ID">Student ID:</label>
   <input type="text" name="Student ID" id="Student ID">
   <label for="Campus">Campus:</label>
   <input type"text" name="Campus" id="Campus">
   <label for="Email">Email:</label>
   <input type="text" name="Email" id="Email">
   <label for="Message">Message:</label><br>
   <div> id="Activity Record">
   <textarea name="Message" rows="20" cols="20" id="Message"></textarea>
   <div id="Activity Record">
  </form>
   <form method="post" action="">
   <label for="Start Date">Start Date:</label>
   <input type="text" name="Start Date" id="Start Date">
    <input type="button" name="printbutton" id="printbutton" value="Print" class="submit-button">
   </form>
  <div id="modal">
   <iframe id="printframe"> 
   <link type="text/css" rel="stylesheet" href="form.css">
   </iframe> 
  </div>
  </div>
</div>
</body>
</html>

基本上，当表单/公文包完全填写完毕时，我希望此代码在屏幕上打印所有信息，包括背景图像等，而不是以下图像：

当前浏览器窗口中的实际投资组合如下：

任何建议都将不胜感激。我想提醒大家，我是一个刚刚开始使用/研究jQuery、JavaScript的开发人员。

要打印元素html内容，可以使用这个post

function PrintElem(elem)
            {
                Popup($(elem).html());
            }
function Popup(data) 
            {
                var mywindow = window.open('', 'my div', 'height=400,width=600');
                mywindow.document.write('<html><head><title>my div</title>');
                /*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
                mywindow.document.write('</head><body >');
                mywindow.document.write(data);
                mywindow.document.write('</body></html>');
                mywindow.print();
                mywindow.close();
                return true;
            }

我过去使用过这个jQuery插件，它工作得很好
你可以在这里找到一个样品。

相关内容

最新更新

热门标签：