Exemple d'impression simple

Question

Je dois fournir un lien print sur ma page html simple.

Lorsque l'utilisateur clique dessus, je veux une fenêtre qui affiche un print preview et l'imprimante du système devrait apparaître. Je suppose que quelque chose avec l'option window.print();, mais cela donne directement l'option d'impression de la fenêtre sans l'aperçu. Je veux d'abord l'aperçu de la page, puis j'appelle window.print(); Un exemple html aiderait ...

Plus sur l'exemple que vous fournissez peut également avoir un type de support d'impression. Alors que la couleur html normale semble rouge. Mais lorsque le lien d'impression est sélectionné, nous devons afficher l'aperçu avant impression en bleu. Je sais que cela pourrait être des méthodes substituées en utilisant @media print dans le fichier css.

Tout exemple s'il vous plaît ... Merci

Answer 1

La fonction d'aperçu avant impression est spécifique au client. Le dernier chrome affiche un aperçu avant impression, mais la plupart des autres navigateurs affichent simplement la boîte de dialogue d'impression lors de l'appel de la méthode print(). En ce qui concerne le style d'impression, lisez les feuilles de style d'impression. L'article A-list-apart par Eric Meyer de quelques années est un bon début avec quelques exemples décents. http://www.alistapart.com/articles/goingtoprint/

Answer 2

Supposons report.html est la page que vous souhaitez imprimer. Développez la page de telle sorte qu'elle accepte un argument média en tant que paramètre GET. à-dire quelque chose comme yoursite.com/report.html?media=X - où X peut être 'screen', 'print' etc. Si X est vide, il peut utiliser la valeur par défaut de « écran »

Ecrire 2 fichiers css à savoir screen.css et print.css - En fonction de cette valeur de l'argument media (X) importe soit screen.css ou print.css dans votre page.

En screen.css, écrivez votre style defs dans un bloc 'écran @media' comme:

@media screen { 
    body { 
    ... screen style here ... 
    } 
} 

En print.css, écrivez votre style defs dans un bloc '@media écran, impression' comme :

@media screen, print { 
    body { 
    ... print style here ... 
    } 
} 

dans votre report.html, supposons que vous avez un bouton d'impression, dans son onclick, appelez window.open('report.html?media=print', ...). Faites la même chose à partir d'un gestionnaire de raccourci attaché à votre objet document à la réception d'un Ctrl + P.

En outre, dans onload de votre page, vérifiez si l'argument des médias est « print » et si elle est appel alors window.print() après un court délai (par exemple 500ms), à savoir quelque chose comme:

if(window.location.href.indexOf('media=print')!=-1) { 
    setTimeout(function() { window.print(); }, 500); 
}