2012-07-19 8 views
13

Me pregunto si había alguna biblioteca o gema disponible en Rails para imprimir los contenidos de una página web, como literalmente en papel a través de una impresora. También me preguntaba si había alguna manera de especificar que solo se imprimiera una parte específica de la página (por ejemplo, un div o algo así). ¡Cualquier apunte, consejo o enlace a tutoriales sería apreciado!Impresión de material en rieles (literalmente en una impresora)

EDITAR

así que he hecho una puñalada en la creación de una hoja de estilo que va a crear una vista para imprimir imprimir, vamos a llamarlo "print.css":

div.transpose-keys, div#editSong, div#navigation, div#debug{ 
    display: none; 
} 

y me preguntaba si hubiera alguna forma de aplicarlo solo cuando mi aplicación dispare la acción de impresión? ¿De modo que cuando se haga clic en el siguiente enlace , la aplicación aplica el css anterior antes de imprimir? Aquí está el enlace en mi html rubí incrustado:

<%= link_to "PRINT", '#', onclick: "printpage()" %> 

Y por último, mi Javascript a llamar a la función de impresión:

function printpage() 
    { 
    window.print() 
    } 
+0

Dependencia del cliente I assume? – MSalters

+1

Puede que desee ver esto: http: // stackoverflow.com/questions/6406425/how-do-i-use-a-different-layout-for-a-specific-action – DVG

+0

Lado del cliente yes – TangoKilo

Respuesta

12

Si se agrega el print.css de la siguiente manera

<link rel="stylesheet" type="text/css" media="print" href="print.css"> 

y el uso de diálogo de impresión del navegador, se debe formatear automáticamente la página de acuerdo con el estilo de print.css

2

Creo que la forma en que esto generalmente se hace es abrir una 'lista para imprimir' ventana con solo la información deseada, y desde allí el usuario imprime a través de su navegador web. Se podría hacer un poco más fácil de usar mediante la adición de algunos javascript en esa ventana:

window.print(); 
5

llegué alrededor de mi problema el uso de esta solución simple:

print.css:

@media print { 
    div.info, div#editStuff, div#navigation, div#debug { 
    display: none; 
    } 
} 

la etiqueta @media se asegura que éstos son no aparece en la versión impresa

application.js:

function printpage() 
{ 
    window.print() 
} 

show.html.erb:

<%= link_to "PRINT", '#', onclick: "printpage()" %> 
+0

por lo que la diferencia entre lo que estaba intentando en su 'EDIT', y esta solución, está agregando '@media.print {} 'alrededor de print.css? Puede querer formatear mejor esta respuesta (el @ media.print no está formateado correctamente) – mmcrae

+0

se supone que debe aplicar 'print.css' en la vista previa de impresión, o solo en el documento impreso? No funciona para mí – mmcrae

3
<script type="text/javascript">  
     function PrintDiv() {  
      var divToPrint = document.getElementById('divToPrint'); 
      var popupWin = window.open('', '_blank', 'width=300,height=300'); 
      popupWin.document.open(); 
      popupWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</html>'); 
      popupWin.document.close(); 
       } 
    </script> 
<%= image_tag("print.jpg", :width=>50, :height=>30, :onclick=>"PrintDiv();", :class=>'btn') %> 
Cuestiones relacionadas