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

過去にこの jQueryプラグインを使用したことがありますが、うまく機能します。ここ
でサンプルを見つけることができます。

于 2012-09-12T10:41:09.120 に答える
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 に答える