11522 sujets
JavaScript, DOM et API Web HTML5
Bonjour,
Est-ce que, avec la page ci-dessous, quand tu cliques sur le bouton "Imprime", ça affiche le dialogue d'impression ?
Amicalement,
Est-ce que, avec la page ci-dessous, quand tu cliques sur le bouton "Imprime", ça affiche le dialogue d'impression ?
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
</head>
<body>
<button onclick="printDoc()">Imprime</button>
<div>Test</div>
<script>
function printDoc()
{
window.print();
}
</script>
</body>
</html>Amicalement,
Bonjour,
Est-ce que, avec la page ci-dessous (et évidemment en supposant que ton fichier pdf s'appelle "a.pdf" et est dans le même dossier que la page ci-dessous), quand tu cliques sur le bouton "Imprime", le dialogue d'impression s'affiche ?
Amicalement,
Est-ce que, avec la page ci-dessous (et évidemment en supposant que ton fichier pdf s'appelle "a.pdf" et est dans le même dossier que la page ci-dessous), quand tu cliques sur le bouton "Imprime", le dialogue d'impression s'affiche ?
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
</head>
<body>
<button onclick="printPdf('monPdf')">Imprime</button>
<iframe id="monPdf" src="a.pdf"></iframe>
<script>
function printPdf(id)
{
var e=document.getElementById(id);
e.focus();
e.contentWindow.print();
}
</script>
</body>
</html>Amicalement,
Bonjour,
La page courante ne contient que le bouton et le pdf. C'est ça que tu obtiens ?
Vide la cache de ton navigateur.
Ré-affiche la page tout en appuyant sur la touche "majuscule".
Mise à part ça, je ne vois pas.
Autre essai : essaie exactement le code que j'ai donné sans rien modifier (quand je dis "rien modifier", c'est même pas rajouter ou supprimer un espace
) et renomme ton fichier pdf et donne lui le nom "a.pdf".
Amicalement,
La page courante ne contient que le bouton et le pdf. C'est ça que tu obtiens ?
Vide la cache de ton navigateur.
Ré-affiche la page tout en appuyant sur la touche "majuscule".
Mise à part ça, je ne vois pas.
Autre essai : essaie exactement le code que j'ai donné sans rien modifier (quand je dis "rien modifier", c'est même pas rajouter ou supprimer un espace
) et renomme ton fichier pdf et donne lui le nom "a.pdf".Amicalement,
developeurdusamedi a écrit :
S'il vous plait un bout de code javascript qui permet de charger un élément depuis un url et l'envoyer à l'imprimante. J'ai cherché ça sur internet mais tellement j'ai essayé et à chaque fois ça ne marche pas j'ai demandé votre aide.
Merci en avance.
la solution la plus simple et viable serait d'utiliser un 2eme fichier css specialement pour l'impression :
dans le head, ajouter une balise pour charger le css d'impression avec le media print
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
<link href="style_impression.css" media="print" rel="stylesheet" type="text/css" />
dans lequel on masquera/changera tous les elements que l'on veut.
et dans le css, utilise le @media only print
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
Pnr Status TextNow VPN
Modifié par bilotola (15 Feb 2019 - 22:44)
Il me semble avoir déjà fait ça par le passer et si je me souviens bien, c'était :
- injecter une iframe dans le DOM qui contient le PDF,
- une class sur le body pour masquer le site dans sa globalité (excepté l'iFrame qui doit prendre la totalité du site)
- lancer l'impression
- supprimer l'iframe et la class pour réafficher le contenu.
C'était un peu overkill mais ça fonctionnait
Modifié par Yordi (15 Feb 2019 - 14:07)
- injecter une iframe dans le DOM qui contient le PDF,
- une class sur le body pour masquer le site dans sa globalité (excepté l'iFrame qui doit prendre la totalité du site)
- lancer l'impression
- supprimer l'iframe et la class pour réafficher le contenu.
C'était un peu overkill mais ça fonctionnait
Modifié par Yordi (15 Feb 2019 - 14:07)
Et si ton impression est un A4 (ou tout autre format connu), tu pourrais facilement connaitre à la hauteur de ton iframe avec l'unité de viewportWidth et quelque chose de ce style :
iframe{
width: 100vw;
height: calc((297 / 210) * 100vw); /* Portrait */
/* height: calc((210 / 297) * 100vw); *//* Landscape */
padding: 0;
margin: 0;
border: 0;
}
