web-dev-qa-db-fra.com

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

J'ai une page qui est supposée lancer la page d'aperçu avant impression en télé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. cela ne fonctionne pas dans FireFox.
  2. c'est un peu moche.

Existe-t-il un meilleur moyen pour IE ou un moyen qui fonctionne pour FireFox?

javascriptprinting
61
Rich Bennema

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

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

Donc, 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: Impression pour un bon article sur le sujet des feuilles de style d'impression.

35
svandragt

Je pense que le meilleur possible en JavaScript inter-navigateurs est window.print(), qui (dans Firefox 3, pour moi) fait apparaître la boîte de dialogue 'Imprimer' et non la boîte de dialogue Aperçu avant impression.

25
user7094

Cela peut être fait en utilisant javascript. Dites 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" />

Cliquez sur le bouton "Aperçu avant impression" pour ouvrir une fenêtre contenant des données à imprimer. Observez que 'forPrintPreview' est l'identifiant d'un div. La fonction d'aperçu avant impression est la suivante:

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();
}

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

2
Vikas Kottari