2008-10-23 27 views
54

Tengo una página que se supone que debe iniciar la página de Vista previa de impresión cargada.¿Cómo se puede llamar Vista previa de impresión desde Javascript?

encontré esto:

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 = ""; 

Pero ...

  1. no funciona en Firefox.
  2. es algo feo.

¿Hay alguna forma mejor para IE o una que funcione para Firefox?

Respuesta

34

No se puede, Vista previa de impresión es una función de un navegador, y por lo tanto, debe estar protegido de ser llamado por JavaScript, ya que sería un riesgo para la seguridad.

Es por eso que su ejemplo usa Active X, que elude los problemas de seguridad de JavaScript.

En su lugar, utilice la hoja de estilo de impresión que ya debería tener y muéstrela para media = screen, imprima en lugar de media = print.

Lea Alist Apart: Going to Print para obtener un buen artículo sobre el tema de las hojas de estilo de impresión.

+5

El artículo sobre ALA se ha mudado: http://www.alistapart.com/articles/goingtoprint/ – Roman

+0

@Thomas He actualizado el enlace. – alex

+1

Si bien este es un buen artículo, no aborda su problema. Tenemos un cliente que no quiere enseñar a sus usuarios a presionar Ctrl + P o Archivo -> Imprimir para que quieran un botón de impresión en la pantalla. – knight0323

18

Creo que lo mejor que se puede hacer en JavaScript entre exploradores es window.print(), que (en Firefox 3, para mí) abre el cuadro de diálogo 'imprimir' y no el cuadro de diálogo de vista previa de impresión.

3

Se puede hacer usando javascript. Digamos que su código html/aspx va de esta manera:

<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" /> 

Aquí el clic de "Vista preliminar" botón que se abrirá una ventana con los datos de impresión. Observe que 'forPrintPreview' es la identificación de un div. La función de vista previa de impresión va de esta manera:

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

Observe que los botones 'impresión' y 'cancelar' tiene la clase css 'no impresión', así que estos botones no aparecerá en la impresión.

Cuestiones relacionadas