dongyan1548
dongyan1548
2015-07-15 05:02

如何格式化A4尺寸的页面?

I am new in PHP. I have a file code which contain multiple inline text editor. Data fetched from db in all editor. I want to format my page. The output of my page is below.

Here i face problem while printing. When i press Ctrl+P the formatting of my page will be changed. Text go out from the page.

Is there any solution for me?

My code is

<?php
$con=mysqli_connect("localhost","root","","pacra1");

         $id2 = $_GET['id'];
        $sql = "SELECT * FROM test1 where id='$id2'";

            $result=mysqli_query($con,$sql);

            $row= (mysqli_fetch_array($result,MYSQLI_ASSOC));

$editor1 =trim($row['editor1']);
$editor2 =trim($row['editor2']);
$editor3 =trim($row['editor3']);
$editor4 =trim($row['editor4']);
$editor5 =trim($row['editor5']);
$editor6 =trim($row['editor6']);
$editor7 =trim($row['editor7']);
$editor8 =trim($row['editor8']);
$editor9 =trim($row['editor9']);
$editor10 =trim($row['editor10']);
?>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="newstyles.css">
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> 
 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> 
<script type="text/javascript" src="../../scripts/demos.js"></script> 
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> 
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> 
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> 
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> 
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> 
<script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script> 
<script type="text/javascript" src="../../jqwidgets/jqxcolorpicker.js"></script> 
<script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script> 
<script type="text/javascript" src="../../jqwidgets/jqxeditor.js"></script> 
<script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script> 
<script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> 
</head>

<body>
  <script type="text/javascript">
        $(document).ready(function () {
            $('#editor1').jqxEditor({tools: 'bold italic underline | left center right'
            });

            $('#editor2').jqxEditor({tools: 'bold italic underline | left center right'
            });

            $('#editor3').jqxEditor({tools: 'bold italic underline | left center right'
            });

            $('#editor4').jqxEditor({ 
            });

             $('#editor5').jqxEditor({tools: 'bold italic underline | left center right'
            });
            $('#editor6').jqxEditor({ 
            });
            $('#editor7').jqxEditor({tools: 'bold italic underline | left center right'
            });
            $('#editor8').jqxEditor({tools: 'bold italic underline | left center right'
            });
            $('#editor9').jqxEditor({tools: 'bold italic underline | left center right'
            });
            $('#editor10').jqxEditor({tools: 'bold italic underline | left center right'
            });
            $('#editor11').jqxEditor({
            });

        });
    </script>

    <div style=" margin-left:auto; margin-right:auto; width: 60%">
    <div style="margin-top: 10px; width: 800px; font-family: 'Times New Roman', Times, serif;">

    <div style=" margin:auto; width:60px; height:auto; align: middle">
    <img src="image/pacra_logo.png" alt="logo">
    </div>
    <div style="margin:auto; width:auto; text-align:center; font-family:'Times New Roman', Times, serif; font-variant: small-caps; font-size:20px; font-weight:bold">
    The Pakistan Credit Rating Agency Limited 
    <hr>
    </div>

    <div style="width: 30%;" contenteditable="true" id="editor1"><?php echo !empty(nl2br($editor1))?(nl2br($editor1)):'';?></div>

           <div style=" margin-top:30px; width:35%; float:left; font-family:'Times New Roman', Times, serif; text-align:left; font-size:14px; line-height:1" contenteditable="true" id="editor2"><?php echo !empty(nl2br($editor2))?(nl2br($editor2)):'';?></div>

            <div style=" margin-top:30px; margin-left:220px; width:35%; float:left; font-family:'Times New Roman', Times, serif; text-align:right; line-height:1; font-size:14px" contenteditable="true" id="editor3"><?php echo !empty(nl2br($editor3))?(nl2br($editor3)):'';?></div>

             <div style="clear: both;"></div>
          <div style="margin-top:40px; margin-right:auto; width:auto; font-family:'Times New Roman', Times, serif; text-align:center; font-variant:small-caps; font-size:18px; font-weight:bold" contenteditable="true" id="editor4"><p> <?php echo !empty(nl2br($editor4))?(nl2br($editor4)):'';?> </p></div>

         <div style=" margin-top:20px; width:20%; float:left; font-family:'Times New Roman', Times, serif; text-align:left; font-size:16px" contenteditable="true" id="editor5"> 
         <?php echo !empty(nl2br($editor5))?(nl2br($editor5)):'';?>
         </div> 
    </div>
    <div style="clear: both;"></div>
    <div style="margin-top: 10px; width: 800px; text-align:justify; font-family:'Times New Roman', Times, serif; font-size:14px" contenteditable="true" id="editor6">

            <?php echo !empty(trim(nl2br($editor6)))? (trim(nl2br($editor6))):'';?>
        </div>

    <div style="margin-top:30px; width:auto; float:left; text-align:left; font-family:'Times New Roman', Times, serif; font-size:16px" contenteditable="true" id="editor7">
    <?php echo !empty(nl2br($editor7))?(nl2br($editor7)):'';?>
    </div>

    <div style="clear: both;"></div>

    <div style="margin-top:100px; width:auto; float:left; text-align:left; font-family:'Times New Roman', Times, serif; font-size:16px; font-variant:small-caps" contenteditable="true" id="editor8">
    <strong><p><?php echo !empty(nl2br($editor8))?(nl2br($editor8)):'';?></p></strong>
    </div>

<div style="clear: both;"></div>

    <div style="margin:auto; width:auto; float:left; text-align:left; font-family:'Times New Roman', Times, serif; font-size:16px;" contenteditable="true" id="editor9">
  <p><?php echo !empty(nl2br($editor9))?(nl2br($editor9)):'';?></p>
    </div>    

    <div style="clear: both;"></div>

    <div style="margin-top:40px; width:auto; float:left; text-align:left; font-family:'Times New Roman', Times, serif; font-size:16px;" contenteditable="true" id="editor10">
  <p><?php echo !empty(nl2br($editor10))?(nl2br($editor10)):'';?></p>
    </div>

<div style="clear: both;"></div>

    <div style="margin-top:70px; width:800px; float:left; text-align:center; font-family:'Times New Roman', Times, serif; font-size:18px;">
    <hr>
 <strong></strong>  
 </br>
    </div>
    </div>
</div>

</body>
</html>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • dongshengli6384 dongshengli6384 6年前

    Yes I do it. Look my updates code

    <?php
    $con=mysqli_connect("localhost","root","","pacra1");
    
             $id2 = $_GET['id'];
            $sql = "SELECT * FROM test1 where id='$id2'";
    
                $result=mysqli_query($con,$sql);
    
                $row= (mysqli_fetch_array($result,MYSQLI_ASSOC));
    
    $editor1 =trim($row['editor1']);
    $editor2 =trim($row['editor2']);
    $editor3 =trim($row['editor3']);
    $editor4 =trim($row['editor4']);
    $editor5 =trim($row['editor5']);
    $editor6 =trim($row['editor6']);
    $editor7 =trim($row['editor7']);
    $editor8 =trim($row['editor8']);
    $editor9 =trim($row['editor9']);
    $editor10 =trim($row['editor10']);
    ?>
    
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style>
     body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background-color: #FAFAFA;
            font: 12pt "Tahoma";
        }
        * {
            box-sizing: border-box;
            -moz-box-sizing: border-box;
        }
        .page {
            width: 210mm;
            min-height: 297mm;
            padding: 20mm;
            margin: 10mm auto;
            border: 1px #D3D3D3 solid;
            border-radius: 5px;
            background: white;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }
        .subpage {
            padding: 1cm;
            border: 5px solid;
            height: 257mm;
            outline: 2cm #FFEAEA solid;
        }
    
        @page {
            size: A4;
            margin: 0;
        }
        @media print {
            html, body {
                width: 210mm;
                height: 297mm;        
            }
            .page {
                margin: 0;
                border: initial;
                border-radius: initial;
                width: initial;
                min-height: initial;
                box-shadow: initial;
                background: initial;
                page-break-after: always;
            }
        }
    
    
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="newstyles.css">
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> 
     <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> 
    <script type="text/javascript" src="../../scripts/demos.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxcolorpicker.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxeditor.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> 
    </head>
    
    <body>
      <script type="text/javascript">
            $(document).ready(function () {
                $('#editor1').jqxEditor({tools: 'bold italic underline | left center right'
                });
    
                $('#editor2').jqxEditor({tools: 'bold italic underline | left center right'
                });
    
                $('#editor3').jqxEditor({tools: 'bold italic underline | left center right'
                });
    
                $('#editor4').jqxEditor({ 
                });
    
                 $('#editor5').jqxEditor({tools: 'bold italic underline | left center right'
                });
                $('#editor6').jqxEditor({ 
                });
                $('#editor7').jqxEditor({tools: 'bold italic underline | left center right'
                });
                $('#editor8').jqxEditor({tools: 'bold italic underline | left center right'
                });
                $('#editor9').jqxEditor({tools: 'bold italic underline | left center right'
                });
                $('#editor10').jqxEditor({tools: 'bold italic underline | left center right'
                });
                $('#editor11').jqxEditor({
                });
    
            });
        </script>
       <script type="text/javascript">
       window.print();
       </script>
    
        <div class="page">
        <div style=" font-family: 'Times New Roman', Times, serif;">
    
        <div style=" margin:auto; width:60px; height:auto; align: middle">
        <img src="image/pacra_logo.png" alt="logo">
        </div>
        <div style="margin:auto; width:auto; text-align:center; font-family:'Times New Roman', Times, serif; font-variant: small-caps; font-size:20px; font-weight:bold">
        The Pakistan Credit Rating Agency Limited 
        <hr>
        </div>
    
        <div style="width: auto; font-family:'Times New Roman', Times, serif" contenteditable="true" id="editor1"><?php echo !empty(nl2br($editor1))?(nl2br($editor1)):'';?></div>
    
               <div style=" margin-top:30px; width:auto; float:left; font-family:'Times New Roman', Times, serif; text-align:left; font-size:14px; line-height:1" contenteditable="true" id="editor2"><?php echo !empty(nl2br($editor2))?(nl2br($editor2)):'';?></div>
    
                <div style=" margin-top:30px; margin-left:350px; width:auto; float:left; font-family:'Times New Roman', Times, serif; text-align:right; line-height:1; font-size:14px" contenteditable="true" id="editor3"><?php echo !empty(nl2br($editor3))?(nl2br($editor3)):'';?></div>
    
                 <div style="clear: both;"></div>
              <div style="margin-top:40px; margin-right:auto; width:auto; font-family:'Times New Roman', Times, serif; text-align:center; font-variant:small-caps; font-size:18px; font-weight:bold" contenteditable="true" id="editor4"><p> <?php echo !empty(nl2br($editor4))?(nl2br($editor4)):'';?> </p></div>
    
             <div style=" margin-top:20px; width:auto; float:left; font-family:'Times New Roman', Times, serif; text-align:left; font-size:16px" contenteditable="true" id="editor5"> 
             <?php echo !empty(nl2br($editor5))?(nl2br($editor5)):'';?>
             </div> 
        </div>
        <div style="clear: both;"></div>
        <div style="margin-top: 10px; width: auto; text-align:justify; font-family:'Times New Roman', Times, serif; font-size:14px" contenteditable="true" id="editor6">
    
                <?php echo !empty(trim(nl2br($editor6)))? (trim(nl2br($editor6))):'';?>
            </div>
    
        <div style="margin-top:30px; width:auto; float:left; text-align:left; font-family:'Times New Roman', Times, serif; font-size:16px" contenteditable="true" id="editor7">
        <?php echo !empty(nl2br($editor7))?(nl2br($editor7)):'';?>
        </div>
    
        <div style="clear: both;"></div>
    
        <div style="margin-top:100px; width:auto; float:left; text-align:left; font-family:'Times New Roman', Times, serif; font-size:16px; font-variant:small-caps" contenteditable="true" id="editor8">
        <strong><p><?php echo !empty(nl2br($editor8))?(nl2br($editor8)):'';?></p></strong>
        </div>
    
    <div style="clear: both;"></div>
    
        <div style="margin:auto; width:auto; float:left; text-align:left; font-family:'Times New Roman', Times, serif; font-size:16px;" contenteditable="true" id="editor9">
      <p><?php echo !empty(nl2br($editor9))?(nl2br($editor9)):'';?></p>
        </div>    
    
        <div style="clear: both;"></div>
    
        <div style="margin-top:40px; width:auto; float:left; text-align:left; font-family:'Times New Roman', Times, serif; font-size:16px;" contenteditable="true" id="editor10">
      <p><?php echo !empty(nl2br($editor10))?(nl2br($editor10)):'';?></p>
        </div>
    
    <div style="clear: both;"></div>
    
        <div style="margin-top:70px; width:auto; float:left; text-align:center; font-family:'Times New Roman', Times, serif; font-size:18px;">
        <hr>
     <strong>Awami Complex FB-1, Usman Block, New Garden Town, Lahore-54600, Pakistan</strong>  
     </br>PABX: 92(42)35869507 Fax: 92(42)35830425 Email: pacra@pacra.com 
     </br>www.pacra.com
        </div>
        </div>
    </div>
    
    </body>
    </html>
    
    点赞 评论 复制链接分享
  • doubu8643 doubu8643 6年前

    You can specify style for print in a seperate css.

    <link rel="stylesheet" href="css/print.css"/ media="print">
    
    点赞 评论 复制链接分享