0

我目前正在编写这段代码，用于收集创建在线投资组合的信息。

这是当前代码：

<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的开发人员。

4

2 回答 2

0

要打印元素 html 内容，您可以使用这篇文章

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;
            }
于 2012-09-12T08:46:25.373 回答
0

我过去使用过这个 jQuery插件，效果很好。你可以在这里
找到一个样本。

于 2012-09-12T10:41:09.120 回答