je souhaite simplement imprimer une page html via la fonction JS window.print(); Sous le navigateur Chrome l'affichae est correct, chaque "partie" se trouve sur une page :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>XXXX</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Copse&display=swap">
<link rel="stylesheet" href="/build/print_promo_codes.css">
</head>
<body>
<header>
</header>
<main>
<main class="page" style="display: grid;">
<section class="page-content">
<h1>Votre coupon</h1>
<br>
<div class="row">
<div class="col s12 center-align">
<img src="https://xx.xx.xx/xx/924_381147e1a05e99be028a0d06dcf94fd43c9ec8f2.png" width="50"
alt="Logo">
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card card-track hoverable" style="max-width:60%;margin: auto">
<div class="card-image">
<img src="/img/_partials/defaultTrackCover.jpg"
style="object-fit: cover;"
alt="cover track">
<p class="card-title truncate">Renseignez un titre</p>
</div>
<div class="card-content">
<p>Renseignez une description</p>
<hr />
<p class="guest-name center-align">
<strong>
Guest-OLYYK9
</strong>
</p>
<hr />
<div class="row center-align">
<div class="col s6">
<div class="crk-chips">
<img src="/img/desktop/guide/print_chips.png" alt="" />
<div class="crk-chips-text">OLYYK9</div>
</div>
https://xx.xx.xx/OLYYK9
</div>
<div class="col s6">
<div id="qrcode-OLYYK9" style="display: inline-block;"></div>
<script type="text/javascript">
makeQRCode("qrcode-OLYYK9", "https://xx.xx.xx/OLYYK9");
</script>
</div>
</div>
<div class="row">
<div class="col s12">
<p>Validité :
<strong><span>19/06/2021 12:00</span></strong>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<h2>Comment utiliser ce coupon ?</h2>
<ul>
<li>Rendez-vous sur le lieu de votre aventure</li>
<li>Scannez le QR code ou saisissez l'adresse web dans votre navigateur mobile</li>
<li>S'il vous est demandé d'activer votre GPS, cliquez sur "Autoriser"</li>
<li>Ca y est ! Vous êtes prêts à démarrer !</li>
</ul>
<p><strong>Conseil :</strong> Pensez à recharger complètement votre smartphone avant de débuter votre aventure.</p>
</div>
</div>
<div class="page-break"></div>
<h1>Votre coupon</h1>
<br>
<div class="row">
<div class="col s12 center-align">
<img src="https://xx.xx.xx/xx/924_381147e1a05e99be028a0d06dcf94fd43c9ec8f2.png" width="50"
alt="Logo">
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card card-track hoverable" style="max-width:60%;margin: auto">
<div class="card-image">
<img src="/img/_partials/defaultTrackCover.jpg"
style="object-fit: cover;"
alt="cover track">
<p class="card-title truncate">Renseignez un titre</p>
</div>
<div class="card-content">
<p>Renseignez une description</p>
<hr />
<p class="guest-name center-align">
<strong>
Guest-451BZB
</strong>
</p>
<hr />
<div class="row center-align">
<div class="col s6">
<div class="crk-chips">
<img src="/img/desktop/guide/print_chips.png" alt="" />
<div class="crk-chips-text">451BZB</div>
</div>
https://xx.xx.xx/451BZB
</div>
<div class="col s6">
<div id="qrcode-451BZB" style="display: inline-block;"></div>
<script type="text/javascript">
makeQRCode("qrcode-451BZB", "https://xx.xx.xx/451BZB");
</script>
</div>
</div>
<div class="row">
<div class="col s12">
<p>Validité :
<strong><span>19/06/2021 12:00</span></strong>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<h2>Comment utiliser ce coupon ?</h2>
<ul>
<li>Rendez-vous sur le lieu de votre aventure</li>
<li>Scannez le QR code ou saisissez l'adresse web dans votre navigateur mobile</li>
<li>S'il vous est demandé d'activer votre GPS, cliquez sur "Autoriser"</li>
<li>Ca y est ! Vous êtes prêts à démarrer !</li>
</ul>
<p><strong>Conseil :</strong> Pensez à recharger complètement votre smartphone avant de débuter votre aventure.</p>
</div>
</div>
<div class="page-break"></div>
<h1>Votre coupon</h1>
<br>
<div class="row">
<div class="col s12 center-align">
<img src="https://xx.xx.xx/xx/924_381147e1a05e99be028a0d06dcf94fd43c9ec8f2.png" width="50"
alt="Logo">
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card card-track hoverable" style="max-width:60%;margin: auto">
<div class="card-image">
<img src="/img/_partials/defaultTrackCover.jpg"
style="object-fit: cover;"
alt="cover track">
<p class="card-title truncate">Renseignez un titre</p>
</div>
<div class="card-content">
<p>Renseignez une description</p>
<hr />
<p class="guest-name center-align">
<strong>
xxxx
xxx
</strong>
</p>
<hr />
<div class="row center-align">
<div class="col s6">
<div class="crk-chips">
<img src="/img/desktop/guide/print_chips.png" alt="" />
<div class="crk-chips-text">SJ04H0</div>
</div>
https://xx.xx.xx/SJ04H0
</div>
<div class="col s6">
<div id="qrcode-SJ04H0" style="display: inline-block;"></div>
<script type="text/javascript">
makeQRCode("qrcode-SJ04H0", "https://x.xxxx.xxx/SJ04H0");
</script>
</div>
</div>
<div class="row">
<div class="col s12">
<p>Validité :
<strong><span>18/06/2021 12:00</span></strong>
<span>au</span>
<strong><span>19/06/2021 12:00</span></strong>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<h2>Comment utiliser ce coupon ?</h2>
<ul>
<li>Rendez-vous sur le lieu de votre aventure</li>
<li>Scannez le QR code ou saisissez l'adresse web dans votre navigateur mobile</li>
<li>S'il vous est demandé d'activer votre GPS, cliquez sur "Autoriser"</li>
<li>Ca y est ! Vous êtes prêts à démarrer !</li>
</ul>
<p><strong>Conseil :</strong> Pensez à recharger complètement votre smartphone avant de débuter votre aventure.</p>
</div>
</div>
<div class="page-break"></div>
</section>
</main>
</main>
<script>
$(document).ready(function() {
window.print();
});
</script>
</body>
</html>
La classe css .page-break est utilisée après chaque nouvelle partie dans le foreach.
Quelqu'un a t-il déjà eu se problème et aurait une piste pour le résoudre ?
Je vous remercie d'avance.
- Edité par S@yf 17 juin 2021 à 14:22:05
Un cerveau c'est bien, plusieurs c'est mieux !
L'affichage du print() fonctionne bien sur Chrome
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Un cerveau c'est bien, plusieurs c'est mieux !