64 votes

Comment appeler l'aperçu avant impression à partir de Javascript ?

J'ai une page qui est censée lancer la page d'aperçu avant impression au chargement.

J'ai trouvé ça :

var OLECMDID = 7;
/* OLECMDID values:
* 6 - print
* 7 - print preview
* 1 - open window
* 4 - Save As
*/
var PROMPT = 1; // 2 DONTPROMPTUSER
var WebBrowser = '<OBJECT ID="WebBrowser1" WIDTH=0 HEIGHT=0 CLASSID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>';
document.body.insertAdjacentHTML('beforeEnd', WebBrowser);
WebBrowser1.ExecWB(OLECMDID, PROMPT);
WebBrowser1.outerHTML = "";

Mais...

  1. il ne fonctionne pas dans FireFox.
  2. c'est plutôt moche.

Existe-t-il une meilleure méthode pour IE ou une méthode qui fonctionne pour FireFox ?

35voto

svandragt Points 679

Vous ne pouvez pas, l'aperçu avant impression est une fonctionnalité d'un navigateur, et doit donc être protégé contre tout appel par JavaScript, car cela constituerait un risque pour la sécurité.

C'est pourquoi votre exemple utilise Active X, qui contourne les problèmes de sécurité de JavaScript.

Utilisez plutôt la feuille de style d'impression que vous devriez déjà avoir et affichez-la pour media=screen,print au lieu de media=print.

Lire Alist Apart : L'impression pour un bon article sur le sujet des feuilles de style d'impression.

1 votes

Bien que ce soit un bon article, il ne répond pas à son problème. Nous avons un client qui ne veut pas apprendre à ses utilisateurs à appuyer sur Ctrl+P ou Fichier -> Imprimer et qui veut donc un bouton d'impression à l'écran.

4 votes

Si vous disposez d'une extension ou d'un module complémentaire Firefox qui a accès aux composants du navigateur et que vous devez lancer l'aperçu avant impression, vous pouvez utiliser : PrintUtils.printPreview(PrintPreviewListener);

18 votes

Par simple curiosité, pourriez-vous expliquer en quoi l'aperçu avant impression constitue un risque pour la sécurité alors que l'impression ne l'est pas ? Il me semble qu'il existe de nombreux exemples de javascript spécifiques à un navigateur. Quel serait le risque de sécurité si un navigateur spécifique ajoutait window.printPreview() ?

30voto

Phill Sacre Points 16238

Je pense que le mieux que l'on puisse faire en matière de JavaScript multi-navigateur est de window.print() qui (dans Firefox 3, pour moi) fait apparaître la boîte de dialogue "Imprimer" et non la boîte de dialogue d'aperçu avant impression.

Pour info, le dialogue d'impression est la fenêtre contextuelle d'impression de votre ordinateur, ce que vous obtenez lorsque vous faites Ctrl-p. Le site aperçu avant impression est la fenêtre d'aperçu propre à Firefox, et elle offre plus d'options. C'est ce que vous obtenez avec le menu Firefox > Imprimer...

0 votes

Dans IE, cela ouvre la boîte de dialogue d'impression, et non l'aperçu avant impression.

0 votes

Dans Firefox 66, il ouvre également la boîte de dialogue d'impression au lieu de l'aperçu.

12voto

bhavinp Points 563

Voici une solution possible si vous souhaitez créer un aperçu avant impression à l'aide de Javascript. https://github.com/etimbo/jquery-print-preview-plugin/blob/master/README.md

5voto

Vikas Points 53

Cela peut être fait en utilisant javascript. Disons que votre code html/aspx va de cette façon :

<span>Main heading</span>
<asp:Label ID="lbl1" runat="server" Text="Contents"></asp:Label>
<asp:Label Text="Contractor Name" ID="lblCont" runat="server"></asp:Label>
<div id="forPrintPreview">
  <asp:Label Text="Company Name" runat="server"></asp:Label>
  <asp:GridView runat="server">

      //GridView Content goes here

  </asp:GridView
</div>

<input type="button" onclick="PrintPreview();" value="Print Preview" />

Ici, en cliquant sur le bouton "Aperçu avant impression", nous ouvrirons une fenêtre avec les données à imprimer. Observez que 'forPrintPreview' est l'id d'un div. La fonction pour l'aperçu avant impression se déroule comme suit :

function PrintPreview() {
 var Contractor= $('span[id*="lblCont"]').html();
 printWindow = window.open("", "", "location=1,status=1,scrollbars=1,width=650,height=600");
 printWindow.document.write('<html><head>');
 printWindow.document.write('<style type="text/css">@media print{.no-print, .no-print *{display: none !important;}</style>');
 printWindow.document.write('</head><body>');
 printWindow.document.write('<div style="width:100%;text-align:right">');

  //Print and cancel button
 printWindow.document.write('<input type="button" id="btnPrint" value="Print" class="no-print" style="width:100px" onclick="window.print()" />');
 printWindow.document.write('<input type="button" id="btnCancel" value="Cancel" class="no-print"  style="width:100px" onclick="window.close()" />');

 printWindow.document.write('</div>');

 //You can include any data this way.
 printWindow.document.write('<table><tr><td>Contractor name:'+ Contractor +'</td></tr>you can include any info here</table');

 printWindow.document.write(document.getElementById('forPrintPreview').innerHTML);
 //here 'forPrintPreview' is the id of the 'div' in current page(aspx).
 printWindow.document.write('</body></html>');
 printWindow.document.close();
 printWindow.focus();
}

Notez que les boutons 'print' et 'cancel' ont la classe css 'no-print', donc ces boutons n'apparaîtront pas dans l'impression.

-2voto

Arun Karthic R Points 11

Pour l'aperçu avant impression dans Firefox, le code ci-dessus peut ne pas fonctionner, vous devez utiliser l'API XPCOM.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X