我在 IE 中打印时卡住了我的工作
当我使用 chrome 或 mozilla 时一切正常 这是我页面的截图:
但是当我使用 IE 时，一切都无法正常工作 :(
这是 IE 的截图:
这是我的代码:
<?php
include("bd.php");
$print[] = null;
if(isset($_GET['option1'])) {
$print = $_GET['option1'];
}
$integerIDs = array_map('intval', explode(',', $print));
$usersIDS = implode(',', $integerIDs);
$requete = "SELECT p.pr_id as id, p.pr_nom as nom, p.pr_poids as poids, p.pr_ingredients as ingredients, p.pr_description as description, p.pr_valeurs_energetiques as valeurs_energetiques, p.pr_valeurs_nutritionnelles as valeurs_nutritionnelles, c.ca_nom as categorie, sc.sc_nom as sous_categorie, p.pr_enligne as enligne FROM produit p,categorie c,sous_categorie sc WHERE p.pr_id_categorie=c.ca_id AND p.pr_id_sous_categorie=sc.sc_id AND p.pr_id IN ({$usersIDS}) ORDER BY pr_ordre";
$resultat = mysql_query($requete);
$num_rows = mysql_num_rows($resultat);
mysql_query("SET NAMES 'utf8'");
?>
<!DOCTYPE html>
<html>
<head lang="fr">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
body {
font-size: small;
}
.lewa {
float: left;
}
</style>
</head>
<body onload="window.print()">
<!--<body>-->
<div class="container">
<div class="row">
<!--right-->
<div class="col-md-12">
<?php
if($num_rows > 0) {
/*
Start with variables to help with row creation;
*/
$startRow = true;
$postCounter = 0;
$idCheck = 0;
while($num_rows > 0){
$ligne = mysql_fetch_assoc($resultat);
if ($startRow) {
echo '<div class="row">';
echo "<img class='logoPuricard' src='./images/logo.jpg' >";
echo '<div class="col-sm-12">';
echo "<!-- TEST 6 kolumn -->";
echo "<div class='row'>";
$startRow = false;
}
$postCounter += 1;
?>
<?php
$id = $ligne["id"];
$nom = $ligne["nom"];
$poids = $ligne["poids"];
$ingredients = $ligne['ingredients'];
$description = $ligne['description'];
$valeurs_energetiques = $ligne['valeurs_energetiques'];
$valeurs_nutritionnelles = $ligne['valeurs_nutritionnelles'];
?>
<div class="col-sm-3" style="width: 32%" >
<?php if (file_exists('../Assets/produit_'.$id . ".png")) {?>
<img src="../Assets/produit_<?php echo $id; ?>.png" style="width: 8em; float: left" />
<?php } ?>
<?php echo "<p style='font-size: 20px;font-weight: bold;'> " . $nom . "</p><br>
<b>Poids</b>"
. $poids . "
<br><br><br>" . $description
."<!-- DIV Ingrédients START -->
<div style='border: solid 2px #000000;padding: 1.5em;min-width:285px'>
<b style='text-decoration: underline;'>Ingrédients :</b>
<br><br> ". wordwrap($ingredients, 30, "\n", false)
. "</div> <!-- DIV Ingrédients END -->
<div></div>
<br>
<!-- DIV Valeurs énergétiques START -->
<div style='border: solid 2px #000000;padding: 0.5em;min-width:285px'>
<br><b style='text-decoration: underline;'>Valeurs énergétiques :</b><br><br>" . $valeurs_energetiques
. "</div>
<!-- DIV Valeurs énergétiques END -->
<br>"
?>
<!-- Valeurs nutritionnelles START -->
<div style='border: solid 2px #000000;padding: 0em;min-width:285px;'>
<b style='text-decoration: underline;'><br> Valeurs nutritionnelles :</b><br><br>
<div class='tableNutritionneles'>
<?php echo $valeurs_nutritionnelles; ?>
<script type="text/javascript">
var el = document.getElementsByClassName('tableNutritionneles');
window.addEventListener('load', function () {
var td = document.getElementsByClassName("tableNutritionneles");
var nrOfCollumns = td.length;
for(var i = 0; i < nrOfCollumns; i++){
var styles = td[i].getElementsByTagName("table")[0].style;
styles.minWidth = "100%";
styles.maxWidth = "100%";
styles.overflow = "hidden";
styles.textAlign = "center";
}
});
</script>
<!-- Valeurs nutritionnelles END -->
</div>
</div>
<!-- Allergènes START -->
<!-- DIV Allergenes start -->
<div style='border: solid 2px #000000;padding: 1.5em;min-width:285px;margin-top: 10px;'>
<br><p><b style='text-decoration: underline;'>Allergènes :</b></p>
<!--Table alegene start -->
<style>
.logoPuricard {
margin-left: 44%;
width: 12%;
margin-top: 20px;
margin-bottom: 20px;
}
td {
border-collapse: collapse;
border: 1px solid #000000;
/*text-align: center;*/
/*vertical-align: middle;*/
}
.rotate {
font-size: 12px;
/* FF3.5+ */
-moz-transform: rotate(-90.0deg);
/* Opera 10.5 */
-o-transform: rotate(-90.0deg);
/* Saf3.1+, Chrome */
-webkit-transform: rotate(-90.0deg);
/* IE6,IE7 */
filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.083);
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
/* Standard */
transform: rotate(-90.0deg);
}
td.alergenneTd {
opacity: 0.6 !important;
color: #FFEBCD !important;
}
.allergenePresent {
}
/*p:nth-of-type(6).*/
.allergeneTextCell {
margin-left: -41px;
}
@media print {
[class*="col-sm-3"] {
float: left;
}
body table td.alergenneTd:first-child{
-webkit-print-color-adjust:exact;
background-color: #33CC33 !important;
}
body table td.alergenneTd:nth-child(2){
-webkit-print-color-adjust:exact;
background-color: #3399FF !important;
}
body table td.alergenneTd:nth-child(3){
-webkit-print-color-adjust:exact;
background-color: #FFCCCC !important;
}
body table td.alergenneTd:nth-child(4){
-webkit-print-color-adjust:exact;
background-color: #003300 !important;
}
body table td.alergenneTd:nth-child(5){
-webkit-print-color-adjust:exact;
background-color: #3399FF !important;
}
body table td.alergenneTd:nth-child(6){
-webkit-print-color-adjust:exact;
background-color: #FF6B24 !important;
font-size: 8px !important;
}
body table td.alergenneTd:nth-child(7){
-webkit-print-color-adjust:exact;
background-color: #492544 !important;
}
body table td.alergenneTd:nth-child(8){
-webkit-print-color-adjust:exact;
background-color: #0080C0 !important;
}
body table td.alergenneTd:nth-child(9){
-webkit-print-color-adjust:exact;
background-color: #ABABD6 !important;
}
body table td.alergenneTd:nth-child(10){
-webkit-print-color-adjust:exact;
background-color: #FF8040 !important;
}
body table td.alergenneTd:nth-child(11){
-webkit-print-color-adjust:exact;
background-color: #000093 !important;
}
body table td.alergenneTd:nth-child(12){
-webkit-print-color-adjust:exact;
background-color: #007D00 !important;
}
body table td.alergenneTd:nth-child(13){
-webkit-print-color-adjust:exact;
background-color: #C0C0C0 !important;
}
body table td.alergenneTd:nth-child(14){
-webkit-print-color-adjust:exact;
background-color: #FFB366 !important;
}
body table td.alergenneTd:nth-child(15){
-webkit-print-color-adjust:exact;
background-color: #FF0CCC !important;
}
/*#allergeneTable {*/
/*padding-bottom: 10cm;*/
/*}*/
.tableNutritionneles {
overflow: hidden;
}
.row {
margin-top: 1cm;
margin-bottom: 6cm;
}
.tableNutritionneles {
margin: 0 auto;
}
.allergenePresent {
color: red !important;
font-size: 15px;
font-weight: bold;
}
/*.alergenneTd:first-child {*/
/*background-color: #0f0f0f;*/
/*}*/
.alergenneTdColors {
border: solid #000000 1px;
}
.logoPuricard {
margin-left: 44%;
width: 12%;
margin-top: 2px;
margin-bottom: 10px;
}
.pRed {
color: red !important;
font-weight: bold;
}
}
@page {
size: A3;
margin-left: -5cm;
margin-right: -5cm;
}
</style>
<table id="allergeneTable" border="0" cellspacing="0" cellpadding="0" width="100%">
<?php
$colors = array("#33CC33","#3399FF","#FFCCCC","#003300","#3399FF","#FF6B24","#492544","#0080C0","#ABABD6","#FF8040","#000093","#007D00","#C0C0C0","#FFB366","#FF0CCC");
$presenceTab = array();
$tracesTab = array();
mysql_query("SET NAMES 'utf8'");
$allergenes = "SELECT a.al_nom as nom,pa.pa_presence as presence,pa.pa_traces as traces FROM allergene a,produit p,produit_allergene pa WHERE pa.pa_id_produit=p.pr_id AND pa.pa_id_allergene=a.al_id and p.pr_id=".$id." ORDER BY a.al_id ASC";
$resultat_all = mysql_query($allergenes);
$colorNumber = 0;
echo '<tr>';
while($ligne_all = mysql_fetch_assoc($resultat_all))
{
$colorNumber++;
$nom = htmlentities(stripslashes($ligne_all["nom"]));
$presence = $ligne_all["presence"];
$traces = $ligne_all["traces"];
/*fill $presenceTab and $tracesTab with results*/
$presenceTab[$colorNumber] = $presence;
$tracesTab[$colorNumber] = $traces;
$fruit = "Fruits à coques";
?>
<td class="alergenneTd" style="background-color: <?php echo $colors[$colorNumber];?>;border: 1px solid #000000; color: #000000" >
<?php
if($colors[$colorNumber] !== "#492544"){?>
<div class='rotate'><p class='allergeneTextCell' style='padding-top: 53px;color: #ffffff;'><?php $nomAll = html_entity_decode($nom); echo $nomAll;?> </p></div>
<?php }elseif($colors[$colorNumber] == "#492544"){?>
<div class='rotate'><p class='allergeneTextCell' style='padding-top: 53px;color: #ffffff;font-size: 8px'><?php $nomAll = html_entity_decode($nom); echo $nomAll;?> </p></div>
<?php } ?>
</td>
<?php
}
echo "</tr>";
?>
<?php
// echo "<tr>";
for($i=0; $i<$colorNumber; $i++){
if($presenceTab[$i]=="y")
{
?>
<td style="padding-left: 4px;" >
<span><font class="pRed" style="color: red; font-weight: bold;text-align: center;vertical-align: middle">P</font></span>
</td>
<?php
}
else if($tracesTab[$i]=="y")
{
?>
<td style="padding-left: 6px;padding-top: 6px">
*
</td>
<?php
}
else
{
?>
<td class="trace_allergene">
</td>
<?php
}
?>
<!-- </tr>-->
<?php
}
?>
<!-- DIV Allergenes end -->
</div>
</table>
<script>
window.addEventListener('load', function () {
var rotates = document.getElementsByClassName('rotate');
for (var i = 0; i < rotates.length; i++) {
rotates[i].style.height = 117 + 'px';
rotates[i].style.width = 17 + 'px';
}
var tds = document.getElementsByClassName('alergenneTd');
});
</script>
<!--Table alegene end -->
<p><span class="allergenePresent">P</span>: Présence</p>
<p>* : Présence possible</p>
</div>
</div>
<?php
if ( 3 === $postCounter ) {
echo ' </div>'; /*END OF ?????*/
echo '</div><!-- END OF INTERNAL ROW -->';
$startRow = true;
$postCounter = 0;
}
--$num_rows;
}/*endWhile*/
if ($postCounter !== 0 ) {
echo '</div>';
}
}else {
echo '<div class="page-header"><h1>Pas des resultat</h1></div>';
echo ' <p>desole vous n\'avez pas choisir des produits</p>';
}
if ( 3 === $postCounter || $num_rows == 0 ) {
echo '</div><!-- END OF INTERNAL ROW -->';
$startRow = true;
$postCounter = 0;
}
?>
</body>
</html>
是否有可能将页面大小调整到 60%
最佳答案
有几种可能性。
首先，您可以更改 Internet Explorer 的页面设置 浏览器，转到工具 -> 打印 -> 页面设置。在这里你可以启用 收缩至适合。
另一种方法是将您的网页转换为 PDF 文件。然后是 可以打印页面的 PDF 文件。
编辑 要在一页上放置一个巧克力，请在巧克力类中使用以下 CSS 代码:
page-break-after:always
关于javascript - 如果 Internet Explorer 将打印页面大小调整为 60%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31514288/