Comment utiliser Javascript pour afficher une nouvelle fenêtre avec à peu près le même html que sa fenêtre parente

Question

Je veux créer plusieurs versions de pages imprimables à partir d'une seule page. J'envisage de le faire de cette façon: en plaçant plusieurs boutons sur la page d'origine et, en cliquant sur un bouton apparaîtra une nouvelle fenêtre avec le même html que sa fenêtre parente, mais avec quelques modifications (p. Ex. aucun).

Il est possible d'utiliser javascript pour cela?

Answer 1

Vous pouvez passer un paramètre supplémentaire à l'URL de la page en cours et l'ouvrir dans une nouvelle fenêtre, comme ceci:

window.open(document.location.href + "?print=true"); 

Vous pouvez alors lire le paramètre d'URL en JavaScript et faire la cachette nécessaire et des modifications CSS pour rendre le document imprimé convivial.

En parlant de: Pourquoi ne pas utiliser un CSS uniquement imprimé qui fait cela pour vous? Ensuite, tout ce que vous devez faire dans votre code est:

window.print();

Et dans votre document HEAD:

<link rel="stylesheet" href="yourcssfile.css" media="print" /> 

Et le CSS fera que la page regarde la façon dont vous voulez en version imprimée. Voir this article pour en savoir plus sur l'impression en CSS.

Answer 2

Oui, il est possible de configurer le code javascript pour cela, quelque chose comme:

window.open('myPage.html') 

getElementById('<someid>').style.display = none 

Cependant, vous pouvez regarder dans les feuilles de style d'impression CSS, qui permettent d'utiliser les CSS pour spécifier les raclées div et autres joyeusetés . Cela a l'avantage de ne pas forcer l'utilisateur à ouvrir une fenêtre contextuelle et à ne pas prendre le deuxième chargement de page sur votre serveur. J'ai trouvé this article pour être un bon endroit pour commencer.

En gros, pour ajouter une feuille de style d'impression vous configurez un lien comme celui-ci:

<link rel="stylesheet" type="text/css" media="print" href="myPrintStyles.css"/>