css definir estilo de impressão @page

Impressão do navegador

A função de impressão que vem com o navegador já existe há muito tempo, então basicamente todos os navegadores a suportam.

Podemos ativar a impressão através de window.print(), document.execCommand('print'), impressão do menu do botão direito da página, etc.

A diferença entre os diferentes navegadores: No Safari e no Chrome, a janela de visualização da impressão aparecerá. O FireFox não visualiza, mas permite selecionar diretamente uma impressora. No OSx, você pode visualizar visualizando o PDF ~

No entanto, embora imprimir diretamente do navegador seja fácil, existem muitos problemas e não atendem às nossas necessidades de impressão:

1. O que é impresso é a página web inteira e o conteúdo parcial não pode ser impresso;
2. A impressão não suporta comportamento de paginação personalizado e a impressão em lote não é suportada por padrão;
3. Há um problema de estilo ao imprimir, e o que você vê não é o que obtém;
4. As unidades de estilo que podem ser reconhecidas com precisão pela impressão são unidades absolutas (como pt, mm, cm).Impressoras diferentes que reconhecem unidades relativas podem obter resultados inesperados;

Estilo de impressão CSS

1、@impressão de mídia

Então, como controlamos o estilo do nosso conteúdo impresso? Na verdade, é passar nosso estilo de impressão para a impressora. Geralmente, existem três maneiras de introduzir arquivos de impressão.

//  第一种：媒体查询 @media print
@media print {
    body {
        background-color: white;
    }
    img {
        visibility: hidden;
    }
    a::after {
        content: "(" attr(href) ")"; /* 所有链接后显示链接地址 */
    }
}


// 第二种：CSS 中使用 @import … print
@import url("my-print-style.css") print;


// 第三种：在 HTML 中使用 <Link> 标签
<link rel="stylesheet" media="print" href="my-print-style.css”>

2、@página

Usado para definir o tamanho da página, margens, orientação, etc. Em @page, você pode usar caixas de margem de página, semelhantes ao uso de pseudoclasses.

@page {
    size: A4 portrait; /*  */
    margin: 3.7cm 2.6cm 3.5cm; /* 国家标准公文页边距 GB/T 9704-2012 */
}


// 去除页眉
@page { margin-top: 0; }

// 去除页脚
@page { margin-bottom: 0; }

// 页眉页脚全部去掉
@page { margin: 0; }

 Defina o papel e sua direção retrato: retrato; paisagem: paisagem

@media print {//media标签
    @page {
        size: A5 portrait; //设置纸张及其方向 portrait：纵向；  landscape: 横向
        margin-top: 0mm;//去掉页眉
        margin-bottom:0mm;//去掉页脚
    }
    h4{
        color:red;//打印时将标签h4设置为红色
    }
}