¿Cómo puedo ver la vista previa de impresión de mi factura generada desde el sitio web. Si imprimo con la secuencia de comandosJavaScript imprimir vista previa
<a href="javascript:window.print()">print this page</a>
en la impresión "imprimir esta página" también impresa. ¿Cómo puedo ocultarlo?
Puede obtener la página actual para imprimir llamando a window.print(). Por ejemplo:
<a href="JavaScript:window.print();">Print this page</a>
Si estás interesado en darles una idea de lo que se verá como impresa, puede utilizar el script en this page para darles una pseduo-vista previa de la forma en la página con la impresión.
Los navegadores no ofrecen una API para activar la función de vista previa de impresión en los navegadores.
Afortunadamente, casi todos lo mantienen en el lugar habitual (colgando del menú Archivo), por lo que no debería tener que llamar la atención de los usuarios sobre él.
¿No hay alguna forma de crear una vista previa de impresión exactamente igual a la ofrecida por un navegador? – rahul
¡No! ¡No! ¡No! ¡No! ¡No! ¡No! ¡No! ¡No! ¡No! ¡No! ¡No! (Stackoverflow tiene una longitud de comentario mínima) – Quentin
Deje que el navegador maneje la vista previa de impresión. Incluya una hoja de estilo de impresión que haga que su página de factura se vea bien cuando se imprima (esto es bueno para cualquier página web) y, si lo desea, incluya un enlace "Imprimir esta página", pero permita que el navegador maneje tareas basadas en el navegador. –
Puede crear print stylesheets para tener un control general sobre cómo se verá un sitio en la impresión. Puede mostrar el sitio a su usuario utilizando esta hoja de estilo de impresión especial antes de imprimir. Sin embargo, eso no le da una vista previa del 100%, ya que cada navegador maneja las cosas de forma un poco diferente. No verá cómo se imprime hasta que se imprima. Sin embargo, usar una hoja de estilo de impresión te acercará bastante.
Algunos sistemas operativos y controladores de impresora ofrecen una vista previa al usuario entre presionar el botón Imprimir y la impresión real, pero eso no es algo sobre lo que tenga control o que esté garantizado siempre disponible.
Para responder directamente a su pregunta, cuando llame al método de impresión del navegador() imprime la página tal como está. Si desea imprimir una versión diferente de la página (sin el elemento "Imprimir esta página", por ejemplo), tendrá que crear una versión imprimible de la página (generalmente hecha con una hoja de estilo separada) que no tiene esas elementos que no quieres en la página Impresa.
¿Eh? No, no lo haces. Simplemente usa estilos de impresión superiores, ya sea con una consulta '@ media' en el CSS o' media = 'print' 'en el HTML de la página. Luego marque el enlace 'Imprimir esta página' con una clase' no-print' y aplique estilo '.no-print' con' display: none; ', y aplique cualquier otro estilo específico de impresión que desee. –
Dirigiéndose a la siguiente parte de su pregunta:.
en la impresión "imprimir esta página también impresa
¿Cómo puedo ocultarlo
Crear una nueva hoja de estilo (? en este ejemplo, lo he llamado "print.css") e incluirlo en su HTML de la siguiente manera:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
Tenga en cuenta que media="print" significa que la hoja de estilo solo se usará al imprimir la página.
Siguiente asignar una clase a su elemento <a> para que podamos hacer referencia a ella en el CSS:
<a href="javascript:window.print()" class="noPrint">Print this Page</a>
Por último, en el archivo CSS, incluyen la siguiente regla:
.noPrint {
display: none;
}
Ahora el " Imprima esta página "el enlace no debe aparecer en la versión impresa de su página.
Steve
O agregue un nombre de clase significativo 'no-print', y tenga 'no-print {display: none;}', y aplique eso a todos los artículos que son irrelevantes o no deseados en la versión impresa. –
@drthomas: ¡Buena idea! He actualizado mi respuesta en consecuencia. –
Para ocultar el enlace al imprimir, haga lo siguiente:
<style type="text/css" media="print">
.printlink
{
display:none;
}
</style>
<a href="javascript:windows.print()" class="printlink">print this page</a>
alternativa:
<a href="javascript:windows.print()"
onclick="this.style.display='none';"
class="printlink">
print this page
</a>
Aunque esto no volverá a aparecer después de cancelar la impresión.
function Print()
{
document.getElementById('ImagePrint').style.visibility='hidden';
window.print();
document.getElementById('ImagePrint').style.visibility='visible';
}
en el cuerpo HTML
<div>
<a id="ImagePrint" onclick="return PrintReport();" style="vertical-align: top">print Info</a>
</div>
Esta función no mostrará ur imagen en la impresión. Puedes usar tu control en lugar de la imagen con la identificación de control. esperanza u conseguirá ur solución
Usted debe ocultar los elementos que no desea que se muestren en la impresión utilizando
display:none
escribí un tutorial sobre printing your webpage. Espero que ayude.
No indica que está enlazando a su propia página web. –
Sorprendentemente, nadie ha abordado el
¿Cómo puedo ver la vista preliminar de mi factura generada desde el sitio web
cuestión. Yo sólo he necesitado una funcionalidad similar y se acercó con la solución en How to see the print media CSS in Firebug?
Esto es lo que he utilizado:
printPage(evt: any) {
// add this 'noprint' class to elements you want to hide from printing
let hideElements = document.getElementsByClassName('noprint');
let arr = Array.prototype.slice.call(hideElements)
arr.map(val => {
val.style.visibility = 'hidden';
})
let w = window.open();
// 'main' is the section I want to print
w.document.write(document.getElementById('main').innerHTML);
w.print();
w.close();
arr.map(val => {
val.style.visibility = 'visible';
})
}
esto es para la impresión. pero necesito una vista previa antes de imprimir –
una cosa más que cuando tomo la impresión con este guión y luego imprimo esta página también se imprime. ¿Cómo puedo ocultar esto? –
En realidad, una pseudo-vista previa es lo más cercano que puede obtener dentro del navegador. Pseudo-preview significa en este caso, que todas las hojas de estilo orientadas a la 'pantalla' son eliminadas, y todas las hojas de estilo apuntadas 'print' son aplicadas. Sin paginación, lo siento. – Boldewyn