当前位置：首页 > article >正文

CSS系列（24）-- 打印样式详解

article 2024/12/24 11:57:09

前端技术探索系列：CSS 打印样式详解 🖨️

致读者：探索打印样式的艺术 👋

前端开发者们，

今天我们将深入探讨 CSS 打印样式，学习如何优化网页的打印体验。

打印样式基础 🚀

媒体查询

/* 打印样式表 */
@media print {
    /* 隐藏非必要元素 */
    .no-print,
    .header-nav,
    .footer,
    .ads {
        display: none !important;
    }
    
    /* 确保黑色文本 */
    body {
        color: #000;
        background: #fff;
        font-size: 12pt;
        line-height: 1.5;
    }
    
    /* 显示完整链接 */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 90%;
    }
    
    /* 显示缩写解释 */
    abbr[title]::after {
        content: " (" attr(title) ")";
    }
}

分页控制

@media print {
    /* 避免元素被分页 */
    .keep-together {
        page-break-inside: avoid;
    }
    
    /* 强制分页 */
    .page-break {
        page-break-before: always;
    }
    
    /* 表格标题 */
    thead {
        display: table-header-group;
    }
    
    /* 避免图片被分页 */
    img {
        page-break-inside: avoid;
    }
    
    /* 章节控制 */
    h1, h2, h3 {
        page-break-after: avoid;
        page-break-inside: avoid;
    }
}

打印优化 🎯

颜色和背景

@media print {
    /* 优化颜色 */
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    /* 移除背景图 */
    .background-image {
        background-image: none !important;
    }
    
    /* 确保对比度 */
    .content {
        color: #000 !important;
        background: #fff !important;
        text-shadow: none !important;
    }
    
    /* 边框优化 */
    .border {
        border-color: #000 !important;
    }
}

布局优化

@media print {
    /* 重置布局 */
    .container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* 展开折叠内容 */
    .collapse {
        display: block !important;
        height: auto !important;
    }
    
    /* 表格优化 */
    table {
        width: 100% !important;
        border-collapse: collapse !important;
    }
    
    /* 确保表格边框 */
    table, th, td {
        border: 1px solid #000 !important;
    }
}

响应式打印 💫

页面尺寸

@media print {
    /* 设置页面尺寸 */
    @page {
        size: A4;
        margin: 2cm;
    }
    
    /* 横向打印 */
    @page landscape {
        size: A4 landscape;
    }
    
    .landscape-content {
        page: landscape;
    }
    
    /* 自定义页眉页脚 */
    @page {
        @top-center {
            content: "公司文档";
        }
        @bottom-right {
            content: "第 " counter(page) " 页";
        }
    }
}

响应式表格

@media print {
    /* 长表格处理 */
    .large-table {
        font-size: 10pt;
    }
    
    /* 确保表格标题重复 */
    thead {
        display: table-header-group;
    }
    
    tfoot {
        display: table-footer-group;
    }
    
    /* 响应式列宽 */
    .table-column {
        width: auto !important;
    }
}

特殊场景处理 ⚡

表单打印

@media print {
    /* 显示表单值 */
    input, textarea {
        border: 1px solid #999;
        background: #fff !important;
    }
    
    /* 显示选中状态 */
    input[type="checkbox"],
    input[type="radio"] {
        -webkit-appearance: none;
        border: 1px solid #000;
        width: 13px;
        height: 13px;
    }
    
    input[type="checkbox"]:checked::after {
        content: "✓";
        display: block;
        text-align: center;
        line-height: 13px;
    }
    
    /* 下拉框值 */
    select {
        appearance: none;
        border: 1px solid #999;
    }
}

代码打印

@media print {
    /* 代码块处理 */
    pre, code {
        white-space: pre-wrap !important;
        word-wrap: break-word !important;
        border: 1px solid #ccc;
        padding: 1em;
        background: #f5f5f5 !important;
        font-size: 10pt;
        font-family: "Courier New", monospace;
    }
    
    /* 行号处理 */
    .line-numbers {
        counter-reset: line;
    }
    
    .line-numbers span::before {
        counter-increment: line;
        content: counter(line);
        display: inline-block;
        width: 2em;
        text-align: right;
        margin-right: 1em;
        color: #999;
    }
}