Hacer Pregunta

Conecta

entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

3votos

¿Cómo imprimir en horizontal, parámetros jQuery?

preguntó
Web
5636 Vistas
1 Respuestas
abierta

Se os ocurre algún método para hacer que un botón de imprimir te asigne por defecto la propiedad horizontal en las propiedades? 

$('.print').click(function(){
    window.print();
    return false;
});

Ese es mi botón de impresión. El asunto es que la creación de un google chart se hace más grande asignándolo a un div de toda la pantalla y desde allí se muestra el botón imprimir y debería imprimirlo en modo "landscape", es decir, horizontal.

Alguna ideilla por ahí?!

por ankeorum (7.210 puntos) en Web

1 Respuesta

3votos

Leonardo-Tadei Puntos227320

Hola ankeorum,

la respuesta corta es "de ninguna manera". JQuery es una biblioteca escrita en JavaScript, y JavaScript no tiene ningún mecanismo de opciones ni parámetros para que la función window.print() haga algo diferente de lo que hace.

Sin embargo, podés solucionar tu probmema con CSS agregando una definición para el medio impresora, por ejemplo:

<style type="text/css" media="print">
  @page { size: landscape; }
</style>

El navegador te mostrará todo como siempre, porque la pantalla es el medio "screen", pero a la impresora le estarás diciendo que la hoja es apaisada.

Saludos!

por Leonardo-Tadei (227.320 puntos)

2votos

ankeorum comentado

He intentado insertar eso en la cabecera de mi .php ya que no tengo hoja de estilos separada (porque principalmente estoy haciendo testings) y no hace nada, parace que no fucniona. Dejo aquí el coding completo del .php para que lo puedas ver, aunque pueda parecer un poco reliado está todo en su sitio. Igual el método no es el más ortodoxo pero funciona. La idea es que tenemos un div oculto que ocupa toda la página al completo que mostramos cuando hacemos click en el botón "Full" y eso hace que se genere el chart en ese otro div.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Working with Charts</title>
<style>html{height:100%;}.table1{top:100px;}#chart_div1{border:1px solid #000;width:500px;}#btn{display:inline-block;top:100px;}#emptydiv_holder{width:100%;height:100%;position:absolute;background-color:#FFF;display:none;left:0px;top:0px;z-index:1;}#backbutton{width:100%;display:block;height:auto;text-align:right;}#emptydiv{width:1425px;display:block;height:100%;background-color:#CCC;}.btnback{}.button{background:#006699;border:none;color:#ffffff;font:13px Tahoma,Arial,sans-serif;text-decoration:none;cursor:pointer;border:1px solid #333;letter-spacing:1px;text-shadow:0px -1px 0px #333333;border-radius:5px;-moz-border-radius:5px;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#8b8b8b),color-stop(0.5,#707070),color-stop(0.5,#5e5e5e),color-stop(1,#777777));background-image:-webkit-linear-gradient(top,#8b8b8b,#707070 50%,#5e5e5e 50%,#777777);background-image:-moz-linear-gradient(top,#8b8b8b,#707070 50%,#5e5e5e 50%,#777777);background-image:-ms-linear-gradient(top,#8b8b8b,#707070 50%,#5e5e5e 50%,#777777);background-image:-o-linear-gradient(top,#8b8b8b,#707070 50%,#5e5e5e 50%,#777777);background-image:linear-gradient(top,#8b8b8b,#707070 50%,#5e5e5e 50%,#777777);}</style>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="fading/jquery.js"></script>

<script>

$(document).ready(function(){

$('#testingdiv').attr('style', 'text-align: center');

$('#btn').bind('click','#btn1',function(){

    //alert('boo');
/*  $('#chart_div1').atrr('style', 'display:none');
    $('#btnback').atrr('style', 'display:block');*/
    $('#emptydiv_holder').attr('style', 'display:block');
    drawChart2(); 

});

$('#backbutton').bind('click','#btnback',function(){

    //alert('boo');
/*  $('#chart_div1').atrr('style', 'display:none');
    $('#btnback').atrr('style', 'display:block');*/
    $('#emptydiv_holder').attr('style', 'display:none');

});

$('.print').click(function(){
    window.print();
    return false;
});

})

    // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart(placetoshow) 
      {
        var data2 = google.visualization.arrayToDataTable([
          ['Policy Period', 'Insured Paid', 'Insured Reserve'],   
           ['01/04/03 - 30/06/04', 1,0], 
           ['08/11/04 - 31/03/06', 1,0], 
           ['08/11/04 - 31/03/06', 1,0], 
           ['01/04/06 - 31/03/07', 0.98,0.02], 
           ['01/04/07 - 31/05/08', 0.87,0.13], 
           ['01/06/08 - 31/05/09', 0.95,0.05], 
           ['01/06/09 - 31/05/10', 0.86,0.14], 
           ['01/06/10 - 31/05/11', 0.26,0.74], 
           ['01/06/11 - 31/05/12', 0.54,0.46]  
        ]);

        var options2 = {
          isStacked: true,
          legend:'left',
          hAxis: {title: "Percentage", format:'#%', minValue:0},
          chartArea: {left:130}
        };

        var chart2 = new google.visualization.BarChart(document.getElementById('chart_div1'));
        chart2.draw(data2, options2);
      }

    function drawChart2() 
          {
            var data2 = google.visualization.arrayToDataTable([
              ['Policy Period', 'Insured Paid', 'Insured Reserve'],   
               ['01/04/03 - 30/06/04', 1,0], 
               ['08/11/04 - 31/03/06', 1,0], 
               ['08/11/04 - 31/03/06', 1,0], 
               ['01/04/06 - 31/03/07', 0.98,0.02], 
               ['01/04/07 - 31/05/08', 0.87,0.13], 
               ['01/06/08 - 31/05/09', 0.95,0.05], 
               ['01/06/09 - 31/05/10', 0.86,0.14], 
               ['01/06/10 - 31/05/11', 0.26,0.74], 
               ['01/06/11 - 31/05/12', 0.54,0.46]  
            ]);

            var options2 = {
              isStacked: true,
              legend:'left',
              title:'Notification Lag - Date of Awareness to Date  Notified to Insurers',
              width:1425,
              hAxis: {title: "Percentage", format:'#%', minValue:0},
              chartArea: {left:250}
            };

            var chart2 = new google.visualization.BarChart(document.getElementById('emptydiv'));
            chart2.draw(data2, options2);
          }
</script>

</head>
<body>

<div id="emptydiv_holder">
<div id="backbutton">
<form>
    <a class="print" href="#"><input type="button" align="right" id="btnback" value="Print" class="btnback">
    </input>
    </a>
    </form>
    <input type="button" align="right" id="btnback" value="Back" class="btnback">
    </input></form>
    </div>
    <div id="emptydiv">   

    </div>

</div>

<div id="small">

    <table id="table1">
    <tr>
    <td>
    <div id="btn">
    <input type="button" id="btn1" value="Full" class="button" align="right"></input>     
    </div>
    </td>
    </tr>
    <tr>
    <td style="text-align:center; font-weight:bold;">Notification Lag - Date of Awareness to Date  Notified to Insurers</td>
    </tr>
    <tr>
        <td><div id="chart_div1"></div></td>
    </tr>
    </table> 

</div>

</body>
</html>
por ankeorum (7.210 puntos)
editado por

1voto

ankeorum comentado

He metido el código en jsfiddle por si os sirve de ayuda: http://jsfiddle.net/RE72k/1/

por ankeorum (7.210 puntos)
editado por

1voto

Leonardo-Tadei comentado

Así no anda: la directiva media="printer" funciona solo en un <link rel= ... lo qu eimplica pasar el CSS a un archivo aparte.

PD: por favor, editá tu respuesta para ponerla como comentario de mi pregunta, así no aparecen respuestas que no lo son. La opcióne está abajo del todo, cerca del botón de guardar.

por Leonardo-Tadei (227.320 puntos)

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


Sin Respuesta

Preguntas relacionadas

Actividad Reciente

Ultimas Preguntas

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Etiquetas

Categorías

Conecta