0
I have a page that features several graphics and a button for printing.
Although I have put the graphics in a small size and one next to the other to print several graphics on the same sheet, when I have printed, print one underneath the other.
How is my page:
How it comes out in print:
The page:
<div id="nota-print">
<!-- Main -->
<div class="content-lg container">
<div class="row margin-b-20">
<div class="col-sm-6">
<h2>Prev x Real Month</h2>
</div>
</div>
<div class="row">
<div class="col-sm-12 sm-margin-b-50">
<?php
include("conn.php");
require_once("graf-gptw-1.php");
?>
</div>
</div>
</div>
</div>
<a id="nota" class="btn btn-info btn-lg" onclick="printPageArea('nota-print');" title="Imprimir">
<span class="glyphicon glyphicon-print"></span> Imprimir
</a>
This is the js that print:
function printPageArea(nota)
{
var nav = window.navigator.userAgent;
var msie = nav.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer, return version number
{
var PrintWebBrowser = '<OBJECT ID="iPrint" WIDTH=0 HEIGHT=0 CLASSID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>';
var oldContent = document.body.innerHTML;
document.body.innerHTML = document.getElementById(nota).innerHTML;
document.body.insertAdjacentHTML('beforeEnd', PrintWebBrowser );
iPrint.ExecWB(7,2);
iPrint.outerHTML = "";
document.body.innerHTML = oldContent;
//var element = $('button[name="search"]');
//executa o evento "click" no elemento
//element.trigger('click');
}
else // para outros navegadores
{
var win = window.open('', 'Nota de fechamento', 'location=no,width=1200,height=800');
var printContent = document.getElementById(nota);
var style = '@page { size: landscape !important; margin: 1cm; }';
var html = '<html><head><title></title><style media="print">' + style + '</style> </head><body><div class="nota">' + printContent.innerHTML + '</div></body></html>';
win.document.write(html);
win.document.close();
win.focus();
win.print();
win.close();
}
}
Does anyone know how to print as it is on the page? Have some css I can put and such?
EDIT:
<!DOCTYPE html>
<html lang="pt-br" class="no-js">
<head>
<meta charset="utf-8"/>
<title>Sistema Obeya - Qualité</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<meta content="" name="description"/>
<meta content="" name="author"/>
<!-- GLOBAL MANDATORY STYLES -->
<link href="http://fonts.googleapis.com/css?family=Hind:300,400,500,600,700" rel="stylesheet" type="text/css">
<link href="vendor/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<!-- PAGE LEVEL PLUGIN STYLES -->
<link href="css/animate.css" rel="stylesheet">
<link href="vendor/swiper/css/swiper.min.css" rel="stylesheet" type="text/css"/>
<!-- THEME STYLES -->
<link href="css/layout.min.css" rel="stylesheet" type="text/css"/>
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico"/>
<script src="vendor/jquery.min.js" type="text/javascript"></script>
<script src="code/highcharts.js" type="text/javascript"></script>
<!-- Impressão -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="print.js"></script>
</head>
<body>
<!--É do highcharts -->
<script src="code/modules/exporting.js"></script>
<!-- Menu -->
<header class="header navbar-fixed-top">
<nav class="navbar" role="navigation">
<div class="container">
<div class="menu-container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="toggle-icon"></span>
</button>
<!-- Logo -->
<div class="logo">
<a class="logo-wrap" href="principal.php">
<h2 class="logo-img logo-img-main" alt="Asentus Logo" style="color:#fff">OBEYA </h2>
<h2 class="logo-img logo-img-active" alt="Asentus Logo">OBEYA </h2>
</a>
</div>
</div>
<div class="collapse navbar-collapse nav-collapse">
<div class="menu-container">
<ul class="navbar-nav navbar-nav-right">
<li class="nav-item"><a class="nav-item-child nav-item-hover" href="principal.php">Home</a></li>
<li class="nav-item"><a class="nav-item-child nav-item-hover" href="impressao-tabela.php">Table printing</a></li>
<li class="nav-item dropdown">
<a class="nav-item-child nav-item-hover dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Graphics printing
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color: #20283f;">
<a class="nav-item-child nav-item-hover dropdown-item" href="impressao-grafico-qualite.php">Graphic Qualite</a>
<a class="nav-item-child nav-item-hover dropdown-item" href="impressao-grafico-vie.php">Graphic PRF VIE Série </a>
<a class="nav-item-child nav-item-hover dropdown-item" href="impressao-grafico-projets.php">Graphic PRF Projets</a>
<a class="nav-item-child nav-item-hover dropdown-item" href="impressao-grafico-gptw.php">Graphic GPTW</a>
</div>
</li>
<li class="nav-item"><a class="nav-item-child nav-item-hover" href="login.php">Logoff</a></li>
</ul>
</div>
</div>
</div>
</nav>
</header>
<!--Baner -->
<div class="parallax-window" data-parallax="scroll" data-image-src="img/header-metade.jpg" style="height: 300px;">
<div class="parallax-content container">
<h1 class="carousel-title" style="font-size: 50px;">QUALITÉ</h1>
<p>OBEYA DOPM 2018</p>
</div>
</div>
<div id="nota-print">
<!-- Main -->
<div class="content-lg container">
<div class="row margin-b-20">
<div class="col-sm-6">
<h2>Prev x Real Month</h2>
</div>
</div>
<div class="row">
<div class="col-sm-12 sm-margin-b-50" >
<div class="col-sm-6 sm-margin-b-2">
<div class="">
<div class="" data-height="height">
<div class="service-info">
<div id='container-tt-1' style='min-width: 210px; height: 300px; margin: 0 auto'></div>
<script type='text/javascript'>
Highcharts.chart('container-tt-1', {
chart: {
type: 'column'
},
title: {
text: 'QFS 3MR'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
}
},
tooltip: {
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Previsto',
data: [2, 2, 3, 2, 2, 9, 2, 2, 2, 2, 2, 2]
}, {
name: 'Realizado',
data: [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3]
}]
});
</script>
</div>
</div>
</div>
</div>
<div class="col-sm-6 sm-margin-b-2">
<div class="">
<div class="" data-height="height">
<div class="service-info">
<div id='container-tt-10' style='min-width: 210px; height: 300px; margin: 0 auto'></div>
<script type='text/javascript'>
Highcharts.chart('container-tt-10', {
chart: {
type: 'column'
},
title: {
text: 'CORE IQX BRUITS PIAR'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
}
},
tooltip: {
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Previsto',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
}, {
name: 'Realizado',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
}]
});
</script>
</div>
</div>
</div>
</div>
<div class="col-sm-6 sm-margin-b-2">
<div class="">
<div class="" data-height="height">
<div class="service-info">
<div id='container-tt-11' style='min-width: 210px; height: 300px; margin: 0 auto'></div>
<script type='text/javascript'>
Highcharts.chart('container-tt-11', {
chart: {
type: 'column'
},
title: {
text: 'CORE IQX BRUITS PIBR'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
}
},
tooltip: {
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Previsto',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
}, {
name: 'Realizado',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
}]
});
</script> </div>
</div>
</div>
</div>
<div class="col-sm-6 sm-margin-b-2">
<div class="">
<div class="" data-height="height">
<div class="service-info">
<div id='container-tt-12' style='min-width: 210px; height: 300px; margin: 0 auto'></div>
<script type='text/javascript'>
Highcharts.chart('container-tt-12', {
chart: {
type: 'column'
},
title: {
text: 'ILPC'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
}
},
tooltip: {
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Previsto',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
}, {
name: 'Realizado',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
}]
});
</script> </div>
</div>
</div>
</div>
<div class="col-sm-6 sm-margin-b-2">
<div class="">
<div class="" data-height="height">
<div class="service-info">
<div id='container-tt-13' style='min-width: 210px; height: 300px; margin: 0 auto'></div>
<script type='text/javascript'>
Highcharts.chart('container-tt-13', {
chart: {
type: 'column'
},
title: {
text: 'TDD 3MR part fournisseurs'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
}
},
tooltip: {
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Previsto',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
}, {
name: 'Realizado',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
}]
});
</script> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a id="nota" class="btn btn-info btn-lg" onclick="printPageArea('nota-print');" title="Imprimir">
<span class="glyphicon glyphicon-print"></span> Imprimir
</a>
<!-- Footer -->
<footer class="footer" style="background-color: black;">
<div class="content container">
<div class="row">
<div class="col-xs-8">
<p class="margin-b-0"><a class="color-base fweight-700">PSA GROUPE</a> Developer: <a class="color-base fweight-700" href="mailto:[email protected]">Mariana Costa - U516709</a></p>
</div>
</div>
</div>
</footer>
<!-- Back To Top -->
<a href="javascript:void(0);" class="js-back-to-top back-to-top">Top</a>
<!-- JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<!-- CORE PLUGINS -->
<script src="vendor/jquery.min.js" type="text/javascript"></script>
<script src="vendor/jquery-migrate.min.js" type="text/javascript"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- PAGE LEVEL PLUGINS -->
<script src="vendor/jquery.easing.js" type="text/javascript"></script>
<script src="vendor/jquery.back-to-top.js" type="text/javascript"></script>
<script src="vendor/jquery.smooth-scroll.js" type="text/javascript"></script>
<script src="vendor/jquery.wow.min.js" type="text/javascript"></script>
<script src="vendor/jquery.parallax.min.js" type="text/javascript"></script>
<script src="vendor/swiper/js/swiper.jquery.min.js" type="text/javascript"></script>
<!-- PAGE LEVEL SCRIPTS -->
<script src="js/layout.min.js" type="text/javascript"></script>
<script src="js/components/swiper.min.js" type="text/javascript"></script>
<script src="js/components/wow.min.js" type="text/javascript"></script>
</body>
<!-- END BODY -->
</html>
EDIT 2:
WHAT APPEARS ON MY DEVELOPER PAGE:
Does it have any CSS influencing it?
– Tony
Put your HTML and CSS code in there too. You’re already using some CSS for @media print or @page ? If you’re using @media somewhere in your CSS try putting
@media only screenuse ONLY or if you already have ONLY remove ONLY to test how it looks– hugocsl
I put the print and page code. It’s very likely to have some css influencing because I’m using bootstrap for template and highcharts for chart.
– Mariana Bayonetta
Looks like Bootstrap has some rules
@media printin their CSS. Check if there is any style that changes the Grid at the time of printing and puts a field under the other.– hugocsl
Try to put this class in the div where php will come in
.d-print-inline-flexIf not for sure try to get the code directly from the browser, after rendered on the browser screen. Press Ctrl+U and copy what’s there and edit the question.– hugocsl
Looking in bootstrap.min.css I found a . Visible-print-inline that I will put the code in the question. Is that what is influencing?
– Mariana Bayonetta
Mariana first in this div tries to change from col-Sm-12 to col-Sm-6 and do the test to see how it looks on the screen and at the time of printing
<div class="col-sm-6 sm-margin-b-50">. If the previous tip doesn’t work try to include this CSS at the end of your . css@media print { .col-sm-12 { float: left !important; max-width: 50% !important; } }– hugocsl
So I tested the two suggestions: At first the graph was smaller but the printing page continued showing a graph below the other. In the second, the printing page continued to show one graph below the other as well.
– Mariana Bayonetta
Copies your code directly from the browser window. Open the page in the browser. Press Ctrl+U copy the code that is there and put here editing the question.
– hugocsl
Ready to go, edited.
– Mariana Bayonetta
It seems that for some reason no style of Bootstrap is applied in print mode, so all elements assume the pattern
initialThat must be why it’s under each other. But with this rule I managed to stand side by side@media print { .col-sm-6 { width: 50%; float: left; } }. You can test by emulating direct printing on Chrome, In this answer above how to emulate direct printing on https://answall.com/questions/269790/imprimir-p%C3%A1gina-com-background/269803#269803– hugocsl
I tried to put in the <style> of the page itself that will be printed, but it is not solving. I don’t understand why anything works.
– Mariana Bayonetta
I edited the question with an image of what appears in my style on the developer page.
– Mariana Bayonetta
I don’t know if this is because of some particularity of the Highcharts script, or because of the specificity of the CSS that is overwriting classes... The last tip I can give you is to start a new document from Zero, go put things in his hand and see when he starts bugging off. Create a blank page with only Bootstrap 3, then create the two-column grid with some content inside and place the CSS
@media print { .col-sm-6 { width: 50%; float: left; }, now you can test the print preview to see how it looks. If it is ok include the Hihgchart in the column and test again to see...– hugocsl
So I was able to get the graphs to print one side of the other. I was just putting it on the wrong page. I put the css that sent me in the style variable of js that makes the impression. Answers the question so I can take it for granted, okay? Thanks.
– Mariana Bayonetta