Javascript 如何格式化A4大小的页面?
我是PHP新手。我有一个包含多个内联文本编辑器的文件代码。在所有编辑器中从数据库获取的数据。我想格式化我的页面。我的页面输出如下 在这里,我面临的问题,而打印。当我按下Javascript 如何格式化A4大小的页面?,javascript,php,jquery,html,css,Javascript,Php,Jquery,Html,Css,我是PHP新手。我有一个包含多个内联文本编辑器的文件代码。在所有编辑器中从数据库获取的数据。我想格式化我的页面。我的页面输出如下 在这里,我面临的问题,而打印。当我按下Ctrl+P时,我的页面格式将更改。文本从页面中消失 有什么解决办法吗 我的代码是 <?php $con=mysqli_connect("localhost","root","","pacra1"); $id2 = $_GET['id']; $sql = "SELECT * FROM te
Ctrl+P
时,我的页面格式将更改。文本从页面中消失
有什么解决办法吗
我的代码是
<?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>
无标题文件
$(文档).ready(函数(){
$('#editor1').jqxEditor({tools:'粗体斜体下划线|左中右'
});
$('#editor2').jqxEditor({tools:'粗体斜体下划线|左中右'
});
$('#editor3').jqxEditor({tools:'粗体斜体下划线|左中右'
});
$('#editor4').jqxEditor({
});
$('#editor5').jqxEditor({tools:'粗体斜体下划线|左中右'
});
$('#editor6').jqxEditor({
});
$('#editor7').jqxEditor({tools:'粗体斜体下划线|左中右'
});
$('#editor8').jqxEditor({tools:'粗体斜体下划线|左中右'
});
$('#editor9').jqxEditor({tools:'粗体斜体下划线|左中右'
});
$('#editor10').jqxEditor({tools:'粗体斜体下划线|左中右'
});
$('#editor11').jqxEditor({
});
});
巴基斯坦信用评级机构有限公司
您可以在单独的css中指定打印样式
<link rel="stylesheet" href="css/print.css"/ media="print">
是的,我做了。
查看我的更新代码
<?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>
身体{
宽度:100%;
身高:100%;
保证金:0;
填充:0;
背景色:#FAFAFA;
字体:12pt“塔荷马”;
}
* {
框大小:边框框;
-moz框大小:边框框;
}
.第页{
宽度:210毫米;
最小高度:297mm;
填料:20mm;
边缘:10mm自动;
边框:1px#d3实心;
边界半径:5px;
背景:白色;
长方体阴影:0.5pxRGBA(0,0,0,0.1);
}
.子页{
填料:1cm;
边框:5px实心;
高度:257mm;
轮廓:2cm#ffeea实心;
}
@页面{
尺寸:A4;
保证金:0;
}
@媒体印刷品{
html,正文{
宽度:210毫米;
高度:297mm;
}
.第页{
保证金:0;
边界:首字母;
边界半径:初始;
宽度:首字母;
最小高度:初始高度;
盒影:首字母;
背景:初始;
分页符后:始终;
}
}
无标题文件
$(文档).ready(函数(){
$('#editor1').jqxEditor({tools:'粗体斜体下划线|左中右'
});
$('#editor2').jqxEditor({tools:'粗体斜体下划线|左中右'
});
$('#editor3').jqxEditor({tools:'粗体斜体下划线|左中右'
});
$('#editor4').jqxEditor({
});
$('#editor5').jqxEditor({tools:'粗体斜体下划线|左中右'
});
$('#editor6').jqxEditor({
});
$('#editor7').jqxEditor({tools:'粗体斜体下划线|左中右'
});
$('#editor8').jqxEditor({tools:'粗体斜体下划线|左中右'
});
$('#editor9').jqxEditor({tools:'粗体斜体下划线|左中右'
});
$('#editor10').jqxEditor({tools:'粗体斜体下划线|左中右'
});
$('#editor11').jqxEditor({
});
});
window.print();
巴基斯坦信用评级机构有限公司
巴基斯坦拉合尔54600新花园镇乌斯曼街区Awami综合楼FB-1
PABX:92(42)35869507传真:92(42)35830425电子邮件:pacra@pacra.com
www.pacra.com
我猜您正在使用HTML。HTML是为浏览器使用而制作的,不可打印。如果您想要可打印的内容,请使用PDF作为数据输出,或者将数据宽度保持在非常保守的小范围内,以便始终适合打印。你也会遇到页面长度问题…建议使用pdf,HTML不是打印语言