如何使用php发送整个div内容，包括图像和表格

大家好，我已经创建了一个发票系统，使用打印和发送选项动态生成。除了发送选项外，一切都正常工作，我想用php和ajax将特定div标记中的所有数据发送到

这是我的发票页代码

    <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

  $('#sendmail').click(function(){
    var to      = $('#email').val();
    var content = $('#print').html();
    var data    = 'to='+to +'&content='+content;
    $('#mail_result').html("");
    //$('#mailid').html("");
    $('#mail_result').html("<img src='images/ajax-loader.gif' />");

    $.ajax({
            type: "POST",
            url: "mail.php",
            data: data,
            success: function(html){ // this happen after we get result
                $("#mail_result").html(html);
                 $("#email").val("");
            }
        });
});

});

</script>
<style>
#print {
  position: relative;
}

#b {
  position: absolute;
  bottom: 0px;
}
</style>



<div style="width:775; height:1050; max-width:775; max-height:1050; display: block; margin-left: auto; margin-right: auto;">
<div style="float:left;  margin:5px;">

<div id="mailid" style="float:left; width:390px; ">
<form style="padding:0px; margin:0px;">
<input type="button" id="sendmail" value="Send Bill" />
<input type="email" id="email" placeholder="Enter email address to dispatch Bill" style="width:300px;"  required></form>
</div>
<div id="mail_result" style="float:right;"></div>
</div>
<div id="print" style="width:775; height:1000; max-width:775; max-height:1000; border:thin solid #333333;  display: block; margin-left: auto; margin-right: auto; float:left;"><!--height:842;-->


  <table width="775" class="glow" align="center" cellpadding="0" cellspacing="0">
    <tr height="100">
      <td colspan="4" valign="top"><img src="images/header_775px.jpg" width="775" height="100"  alt=""/></td>
    </tr>

      <tr style="vertical-align: top; font-weight: bolder; font-size: 30px;" >
        <td height="24" colspan="4"><div align="center"><strong><u>INVOICE</u></strong></div></td>
      </tr>
      <tr style="vertical-align:top;" >
        <td height="22"><p align="right" class="headtext"><strong>Order Number : </strong></p></td>
        <td width="395" >
        <div align="left" style="margin-left:10px;">XYZ</div></td>
        <td width="44" class="headtext"><div align="right"><strong>Date :</strong></div></td>
        <td width="217"><div align="left">
      <?php  $today = date ("j F Y"); print $today;  ?>        
</div></td>
      </tr>
      <tr style="vertical-align:top;">
        <td width="121" height="50" style="vertical-align:top;"><div align="right" style="margin-top:5px;"><strong>To : </strong></div></td>
        <td colspan="3" style="vertical-align:top; height:auto;">
        <div align="left" style="margin-top:5px; margin-left:10px;">
        company<br>
        address
        </div></td>
      </tr>
      <tr>
        <td height="24">&nbsp;</td>
        <td>&nbsp;</td>
        <td colspan="2" valign="top" class="invoice">&nbsp;</td>
      </tr>
      <tr>
        <td height="300" colspan="4" >
            <table width="775" style="border-collapse: collapse; border-spacing: 0;">
          <tr class="tablehead"  style="border-bottom:thin #000 solid; border-top:thin #000 solid; text-indent:5px;">
            <th width="50" height="40"><div align="left"><span> Sl.No </span></div></th>
            <th width="434" height="40"><div align="left"><span> Description </span></div></th>
            <th width="70" height="40"><div align="center"><span> Quantity </span></div></th>
            <th width="80" height="40"><div align="center"><span> Unit Price </span></div></th>
            <th width="84" height="40"><div align="center"><span> Total </span></div></th>
          </tr>



    <tr><td hight="10px;" style="color:white;"">.</td></tr><tr height="40" valign="top" >
            <td><div align="left" style="margin-left:15px;">'.$k.'.</div></td>
            <td><div align="left" style="margin-left:15px; width:430; text-align: justify;">XYZZZ</div></td>
            <td>1111</td>
            <td><div align="right" style="margin-left:15px;">1234&nbsp;</div></td>
            <td><div align="right" style="margin-left:5px;">1234&nbsp;</div></td>
          </tr><tr style="border-bottom:thin #000 dotted;">




          <tr valign="top" style="border-bottom:thin #000 solid; border-top:thin #000 solid; ">
            <td colspan="4" valign="middle">
                <div align="right" style="margin-right:10px;"><strong>Total Rupees</strong>: </div>
            </td>
            <td height="30" valign="middle">
              <div align="right">
                1234     
              </div>
            </td>
          </tr>
          <tr valign="top" >
                  <td colspan="4">
                     <div align="right" style="margin-right:20px;"><em>Advance Paid : </em></div>
                  </td>
                  <td height="21" valign="middle">
                    <div align="right">
                         1234
                    </div>
                  </td>
          </tr>
           <tr valign="top">
                  <td colspan="2">&nbsp;</td>
                  <td colspan="2" style="border-bottom:thin #000 solid;"><div align="right" style="margin-right:20px;"><strong><em>Payment Due :</em></strong></div></td>
                  <td height="21" valign="middle" style="border-bottom:thin #000 solid;">
                    <div align="right">
            1234
                    </div>
                  </td>
          </tr>
              <tr valign="top">
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td colspan="2" valign="middle" class="headtext">&nbsp;</td>
            <td height="21" valign="middle">&nbsp;</td>
          </tr>
           <tr>
        <td height="96" colspan="3" style="vertical-align:top;" ><div align="left" style="margin-left:10px;"><strong>Rupees(in words) :</strong>

            <u>XYZZZ </u>

            </div></td>
        <td height="96" colspan="2" align="center" valign="bottom" class="sign"><strong>Signature</strong><br>(XYZ Company)</td>
      </tr>
        </table>
        </td>
    </tr>
</table>
<div id="b" style="width:775px; height:60px; float:left; ">
<table width="100%" style="border-collapse: collapse; border-spacing: 0; border-top:thick solid #000;">
    <tr>
        <td>&nbsp;

        </td>
    </tr>
</table>
</div>
</div>
</div>

$（文档）.ready（函数（）{
$（'#sendmail'）。单击（函数（）{
var to=$（'#email'）.val（）；
var content=$（'#print'）.html（）；
变量数据='到='+到+'&内容='+内容；
$（'#mail_result'）.html（“”）；
//$（'#mailid'）.html（“”）；
$（'#mail_result'）.html（“”）；
$.ajax({
类型：“POST”，
url:“mail.php”，
数据：数据，
success:function（html）{//在我们得到结果之后，就会发生这种情况
$（“#邮件结果”）.html（html）；
$（“#email”）.val（“”）；
}
});
});
});
#印刷品{
位置：相对位置；
}
#b{
位置：绝对位置；
底部：0px；
}
发票
订单号：
XYZ
日期：
至：
公司

地址
序号
描述
量
单价
全部的
这似乎是一个糟糕的方法，你基本上是在删除自己的代码，为什么不使用创建div的相同代码来写入电子邮件正文的字符串。如果你希望自动复制css样式的代码，并将相对URL转换为绝对URL，那么你将经历一段非常糟糕的时光：）@Dagon thnx for info，问题解决了！
    <?php

if($_POST['to'] !=''){

   $to = $_POST['to'];
   $subject = "System Generated Bill by XXXXXXX Please do not respond to these email";
   $message = $_POST['content'];
   $header = "From:XXXXX@gmail.com \r\n";
   $header = "Cc:XXXXXX@gmail.com \r\n";
    $headers  = 'MIME-Version: 1.0' . "\r\n";
    $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
   $retval = mail ($to,$subject,$message,$header);
   if( $retval == true )
   {
      echo '<div style=" float:left; font-weight:bold; color:#00CC00; text-indent:5px;"> Bill sent successfully...</div>';
   }
   else
   {
      echo '<div style="color:#FF0000; font-weight:bold; float:left; text-indent:5px;"> Bill could not be sent...</div>'; 
   }
}
else { 
echo'<div style="color:#FF0000; font-weight:bold; float:left; text-indent:5px;"> Invalid email id.</div>';
}
?>