Question

我正在使用这段代码来收集有关创建在线投资组合的信息。

这是当前的代码：

<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 。

Answer 1

用于打印元素html内容，您可以使用this 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;
            }

Answer 2

我过去使用过这个jQuery plugin，效果很好您可以找到示例here。

jQuery / JavaScript Online Portfolio表单 - 打印样式表

2 个答案: