I have a page that has several graphics and a button to print.
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 print, it prints one underneath the other.
How is my page:
Howitworks:
Thepage:
<divid="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 prints:
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? Is there any css that 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><scriptsrc="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'S PAGE:
