Question

我正在尝试打印一个对话框。我可以打印除$result = $mysqli->query('SELECT * FROM products'); if($result === FALSE){ die(mysql_error()); } if($result){ while($obj = $result->fetch_object()) { if ($obj->typeOf === 'single') { $forPack = $mysqli->query('SELECT id FROM products WHERE typeOf = 12-pack AND product_name = '.$obj->product_name); $forPound = $mysqli->query('SELECT id FROM products WHERE typeOf = 50-pound AND product_name = '.$obj->product_name); echo '<div class="large-3 columns">'; echo '<p><h3>'.$obj->product_name.'</h3></p>'; echo '<img src="images/products/'.$obj->product_img_name.'"/>'; echo '<p><strong>Price (Per Unit)</strong>: '.$currency.$obj->price.'</p>'; echo '<p><a href="update-cart.php?action=add&id='.$obj->id.'"><input type="submit" value="Add Single" style="clear:both; background: #0078A0; border: none; color: #fff; font-size: 1em; padding: 10px;" /></a></p>'; echo '<p><a href="update-cart.php?action=add&id='.$forPack.'"><input type="submit" value="Add 12-pack" style="clear:both; background: #0078A0; border: none; color: #fff; font-size: 1em; padding: 10px;" /></a></p>'; echo '<p><a href="update-cart.php?action=add&id='.$forPound.'"><input type="submit" value="Add 50 pound" style="clear:both; background: #0078A0; border: none; color: #fff; font-size: 1em; padding: 10px;" /></a></p>'; echo '</div>'; } }值以外的对话框中的所有内容。

HTML

Textbox

JS

<div class="calculator">
 <a href="#" onclick="printElement('.calculator')">
   <img src="images/icon_print.png" /> Print
 </a>
</div>

如何使用包含的function printElement(element) { var text = document.getElementById("age_input").value; alert(text); w = window.open(); w.document.write($(element).html()); w.document.close(); document.getElementById("age_input").value = text; w.print(); w.close(); }元素中的值打印对话框？

Answer 1

好问题。我花了一段时间才搞清楚。问题是，当您使用$(element).html()

时，文本框的内容不是HTML的一部分

您可以通过任何浏览器开发工具检查元素来看到这一点（F12）。因此，您必须使您的内容成为HTML的一部分，以便在打印期间使其可用。快速解决方法是使用输入框的placeholder属性。这是您的代码的更新版本。

<script type="text/javascript">
     function printElement(element) {
         var text = document.getElementById("age_input").value;
         document.getElementById("age_input").placeholder = text;
         w = window.open();
         w.document.write('<html><head><title>DIV Contents</title>');
         w.document.write('</head><body >');
         w.document.write($(element).html());
         w.document.write('</body></html>');
         w.document.close();
         document.getElementById("age_input").value = text;
         w.print();

         w.close();
     } 
 </script>

我认为age_input是你的输入框，它在Div元素

中

<div class="calculator">
        <input id="age_input" type="text" />
 <a href="#" onclick="printElement('.calculator')"> <img src="images/icon_print.png" />Print</a>
 </div>

没有从Javascript / Asp.net中的对话框打印文本框

HTML

JS

1 个答案: