媒体查询_网页打印样式

最新推荐文章于 2024-02-25 11:50:17 发布

weixin_30555515

最新推荐文章于 2024-02-25 11:50:17 发布

阅读量205

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/2bjiujiu/p/7474326.html

版权

需求：

　　客户想要打印网页内容，而打印的数据都是黑白现实的的，不需要其他颜色，需要给客户设置打印样式

那，如何满足需求？

　　设置一个打印媒体查询

/* 打印样式
   ========================================================================== */

/**
 */
@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*使用JavaScript的超链接不打印href*/
    a[href^='#']:after,
    a[href^='javascript:']:after {
        content: '';
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        /*当标题和文字不分离，3行文字以上带走标题进入下一页*/
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-inside: avoid;
    }
}

转载于:https://www.cnblogs.com/2bjiujiu/p/7474326.html