如何格式化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>

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

2条回答默认最新

dongshengli6384 2015-07-15 09:55

关注

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>

本回答被题主选为最佳回答 , 对您是否有帮助呢?

查看更多回答(1条)

报告相同问题？

关注问题

如何强制网页内容填写A4打印页面？ php
2011-11-22 16:41

回答 1 已采纳 HTML isn't very good for this job, especially if you have a single HTML page with many letters (i.
freedos格式化B盘报read error linux
2022-01-13 22:20

回答 2 已采纳 bochs换成了2.3.5，，，问题解决
wkhtmltopdf：如何设置拉伸的A4 PDF文档？ php
2016-03-16 16:35

回答 1 已采纳 enable/disable-smart-shrinking option will help you. By default, wkhtmltopdf scale content to conf
Vue 前端导出页面A4大小pdf，Vue前端导出pdf自动切割换页不切割内容 Vue导出页面pdf自动分页和添加页码导出的pdf提高清晰度
2024-09-27 17:05

HuiRonmantic的博客【代码】Vue 前端导出页面A4大小pdf，Vue前端导出pdf自动切割换页不切割内容 Vue导出页面pdf自动分页和添加页码导出的pdf提高清晰度。
有没有人遇到过，vue前端 html2cancas截图不全的问题？ elementui vue.js 前端
2022-05-10 14:29

回答 2 已采纳这个就是截显示在当前页面的部分的内容吧，滚动滚动条再出现的就截不到了，只是给当前网页页面截图
HTML中如何实现内容分页打印？ html javascript 前端
2022-07-06 12:05

回答 6 已采纳就是强制分页是吧 age-break-after: always; <div style="page-break-after: always;"> </div> <di
如何把this.tpsz = newwz2 里面这个 tpsz变量返回给全页面使用？ java 前端
2023-03-30 15:11

回答 2 已采纳在成功回调前面加个let that = thisthat.tpsz = newwz2
前端页面崩溃原因_前端异常监控解决方案研究
2020-12-30 09:21

weixin_39775029的博客对于前端而言，和后端处于同一个监控系统中，前端有自己的监控方案，后端也有自己等监控方案，但两者并不分离，因为一个用户在操作应用过程中如果出现异常，有可能是前端引起，也有可能是后端引起，需要有一个机制，...
手机模拟器显示不了web格式图片前端
2023-04-03 08:51

回答 1 已采纳 const imageUrl = 'http://localhost:9090/api/file/7b8ac102aa41423dafeb24dfd859ba9f.jpg%EF%BC%8C%E5%9
格式化API数组输出 html php
2018-08-16 22:26

回答 1 已采纳 You can try several different types of tests that may work empty($v), isset($v), is_null($v), or
网页的H1标签有多个会影响SEO么？前端运维
2022-03-12 19:28

回答 1 已采纳 H1标签可以多用，但不可胡乱使用。避免造成权重下降、网站排名不好等状况。
图片base64转A4尺寸pdf，重命名并下载
2023-04-06 16:44

tx10765的博客图片base64转A4尺寸pdf，重命名并下载
k8s安装nginx部署前端页面_小公司容器化实践 - 如何容器化Angular前端(三)
2021-01-07 06:48

tanaka-asuka的博客作者：justmine(大数据达摩院)出处：https://www.cnblogs.com/justmine创作不易，欢迎转载，但必须在文章开头保留此段声明，否则保留追究法律责任的权利写在...这篇文章我们就来实践容器化 ExceptionLess 的前端，...
前端工程化01-复习jQuery当中的AJAX
2024-04-21 01:35

都是数据而已的博客 AJAX全称（Asynchronous JavaScript And XML）是异步的 JavaScript 和 XML，它描述了一组用于构建网站和Web应用程序的开发技术。...也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。
前端3D轨迹可视化渲染
2022-01-01 00:28

子时不睡的博客前端3D轨迹可视化渲染说在前面效果普通html页面展示3D轨迹1.引入echarts和jquery2.设置地图所需要的容器3.js代码vue结合echarts展示3D轨迹说在前面项目需要做一个在3D传播轨迹功能，从网上找了一些资料，决定使用...
前端基础第二天项目大数据大屏可视化项目
2022-04-26 12:23

办公模板库素材蛙的博客大数据大屏可视化项目 01-项目介绍应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。我们引入 ‘立...
前端开源库-html-pdf
2019-08-29 17:51

`options.format`参数指定了页面大小，这里设置为A4。 `html-pdf`库还支持一些高级特性，例如合并多个HTML文件为一个PDF、自定义页眉和页脚、添加CSS样式文件、处理图片等。这些功能使得`html-pdf`在生成复杂报告或...
通过jspdf对前端页面进行转换成pdf格式
2021-02-24 17:07

L.傲骨雄风的博客实例化jspdf，将内容图片放在pdf中 */ //纸张 var pagers = { "a4": [592.28, 841.89] }; //创建临时DOM function createTemDom(dom) { let container = document.createElement("div"); container.style.position =...
css 设置打印a4,CSS设置A4纸大小。
2021-08-03 20:20

wx963619d5940e4c5b的博客 I need simulate an A4 paper in web and allow to print this page as it is show on browser (Chrome, specifically). I set the element size to 21cm x 29.7cm, but when I send to print (or print preview) it...
【总结】前端常用编码写法合集
2021-08-22 15:16

禾小毅的博客 } 16、滚动条样式 /*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 10px; background-color: #fff; } /*定义滚动条轨道内阴影+圆角*/ ::-webkit-scrollbar-track { -webkit-...
没有解决我的问题, 去提问

悬赏问题

¥15 ansys fluent计算闪退
¥15 有关wireshark抓包的问题
¥15 需要写计算过程，不要写代码，求解答，数据都在图上
¥15 向数据表用newid方式插入GUID问题
¥15 multisim电路设计
¥20 用keil，写代码解决两个问题，用库函数
¥50 ID中开关量采样信号通道、以及程序流程的设计
¥15 U-Mamba/nnunetv2固定随机数种子
¥15 vba使用jmail发送邮件正文里面怎么加图片
¥15 vb6.0如何向数据库中添加自动生成的字段数据。

码龄粉丝数原力等级 --

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

2条回答默认最新

码龄粉丝数原力等级 --

悬赏问题

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

2条回答 默认 最新

悬赏问题

2条回答默认最新