Prevent images from being cropped between pages when generating PDF of an html

Asked

Viewed 235 times

0

How can I avoid an image of a particular page that saved as PDF be cut. as in the example below: inserir a descrição da imagem aqui

The file is generated using the command print

javascript:window.print()

Follow my html code:

<html>

    <head>
    <link href="print.css" rel="stylesheet" type="text/css" media="print">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>    
    <title><?=$linha['nivel']?> – 
            <?=$linha['ano']?> 
</title>
</head>
<body>

<!-- Retorna dados da tabela -->
<?php
function criarCombo($table,$id,$valor)
{
   $sql = "SELECT * FROM perguntas";
   $rs_sql = mysql_query($sql);
   while($linha=mysql_fetch_array($rs_sql))
   {
     $chave = $linha[$id];
     $nome  = $linha[$valor];
     $combo = $combo . "<option value=\"$id\">$nome</option>";
   }
   echo $combo;
}
?>


<?php



    // se o número de resultados for maior que zero, mostra os dados
    if($total > 0) {
        // inicia o loop que vai mostrar todos os dados
        do {
?>
            <p><hr><u><b>(<?=$linha['name']?>)</b></u>  
            <?=$linha['nivel']?> – 
            <?=$linha['ano']?> 


             <!-- -- <button><== Remover</button> -- <button>Adicionar ==></button> -->
            <?=$linha['questiontext']?></br>
            <?=$linha['answer']?>
<?php
        // finaliza o loop que vai mostrar os dados
        }while($linha = mysql_fetch_assoc($dados));
    // fim do if 
    }
?>
<a style="display:scroll;position:fixed;top:30px;right:60px;" class="soTela" title='Imprimir conteúdo' href='javascript:window.print()'>Imprimir Prova</a>

</body>
</html>
<?php
// tira o resultado da busca da memória
mysql_free_result($dados);
?>
javascript pdf pdf-generation

1 answer

1


In this case, I believe you can change the style of your page. In the CSS code you can put your own settings for page printing.

@media print {
/*Aqui vai seu css*/
}

Within this tag you can specifications and so the page adapts to a different view when the user tries to print the page. In that case, you can define a float in the image, so it will be next to the text.

  • it is not interesting that the image is next to the text, I would just like it not to be divided into different pages.

  • 1

    In this case, you can try using the command page-break-before and page-break-after CSS, with it it is possible to define how an element should behave at the time of printing (using also the command @media print)

  • Thank you Lucas Lima!

Browser other questions tagged javascript pdf pdf-generation

You are not signed in. Login or sign up in order to post.