Hoje um colega de trabalho veio me perguntar como fazer para que quando a impressão de uma página chegasse em determinado elemento pulasse para uma próxima folha.
Acredito que algumas pessoas possam ter essa dúvida então vamos ver como podemos fazer isso.
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<title>Teste de impressão</title>
-
</head>
-
<body>
-
-
Teste 1
-
<div style="page-break-before: always"></div>
-
Teste 2
-
<div style="page-break-before: always"></div>
-
Teste 3
-
-
</body>
-
</html>
Como podemos ver nas linhas 10 e 12 inserimos uma propriedade dentro da div chamada “page-break-before” com o atributo “always”, com isso faremos que o próximo elemento se mude para uma nova página na hora de imprimir.
Neste exemplo teríamos 3 páginas uma com “Teste 1″ outra com “Teste 2″ e a última com “Teste 3″.
Testado nos navegadores IE6, IE7, IE8, Firefox, Chrome, Opera, Safari.