Chrome 谷歌分页打印去除页眉页脚点击取消或打印关闭当前窗口

@Murphy

已于 2023-01-16 10:52:16 修改

阅读量3.1k

点赞数 1

分类专栏：打印文章标签： chrome css

于 2021-12-01 13:55:26 首次发布

本文链接：https://blog.csdn.net/Devil_Song/article/details/121653763

版权

打印专栏收录该内容

1 篇文章 0 订阅

订阅专栏

page-break-before（指定元素前添加分页符）

auto 		默认值。如果必要则在元素前插入分页符。
always		在元素前插入分页符。
avoid 		避免在元素前插入分页符。
left		在元素之前足够的分页符，一直到一张空白的左页为止。
right 		在元素之前足够的分页符，一直到一张空白的右页为止。
inherit 	规定应该从父元素继承 page-break-before 属性的设置。

/* 在h1元素前始终插入分页符 */
@media print {
    h1 {page-break-before: always;}
}

page-break-after（指定元素后添加分页符）

auto 		默认值。如果必要则在元素后插入分页符。
always		在元素后插入分页符。
avoid 		避免在元素后插入分页符。
left		在元素之后足够的分页符，一直到一张空白的左页为止。
right 		在元素之后足够的分页符，一直到一张空白的右页为止。
inherit 	规定应该从父元素继承 page-break-after 属性的设置。


/* 在 .footer 元素后始终插入分页符 */
@media print {
    .footer {page-break-after: always;}

page-break-inside（用于设置是否在指定元素中插入分页符）

auto 		默认。如果必要则在元素内部插入分页符。
avoid 		避免在元素内部插入分页符。
inherit 	规定应该从父元素继承 page-break-inside 属性的设置。

/* 避免在 <pre> 与 <blockquote> 元素中插入分页符 */
@media print {
    pre, blockquote {page-break-inside: avoid;}
}

设置打印布局（横向、纵向、边距）

 @media print {
    @page {
      /* 纵向 */
      size: portrait; 
 
      /* 横向 */
      size: landscape;
 
      /* 边距 上右下左 */
      margin: 1cm 2cm 1cm 2cm;
    }
  }

去除浏览器默认页眉页脚

@media print {
  @page {
    margin: 0;
  }
  body {
    margin: 1cm;
  }
}

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<style media=print>
@page {
    /* 纵向 */
    size: portrait;
    /* 横向 */
    /*size: landscape;*/
    /* 去除页眉页脚 */
    margin: 0;
}

/* 应用这个样式的，从那个标签结束开始另算一页，之后在遇到再起一页，以此类推 */
.page {
    page-break-after: always;
}
</style>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: serif, Microsoft YaHei;
}

.print-body {
    margin: 60px auto;
    width: 660px;
    font-size: 14px;
    /*font-weight: bold;*/
    color: #000000;
}

.checkbox-input {
    cursor: default;
    margin: auto 10px;
    width: 14px;
    height: 14px;
    border: 1px solid #000000;
    font-size: 5px;
    font-weight: bold;
}

.row {
    display: flex;
}

.top-check {
    margin: 10px 0;
}

.cell {
    width: 130px;
    min-height: 50px;
    border: #000000 solid 1px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cell-input {
    width: 200px;
}

.cell-right {
    border-left: 0px;
}

.cell-bottom {
    border-top: 0px;
}

.cell-end {
    flex-grow: 1;
}

.cell-people-num {
    width: 200px;
}

.stamp {
    overflow: hidden;
    border: #000000 solid 1px;
    border-top: 0px;
    height: 150px;
    width: 100%;
}

.stamp-cell {
    overflow: hidden;
    width: 100%;
    height: 110px;
    display: flex;
    align-items: center;
}

.stamp-title {
    width: 220px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin-left: 20px;
}

.date-cell {
    width: 650px;
    height: 40px;
    line-height: 40px;
}

.date-item {
    margin-left: auto;
}

.date-title {
    margin-right: 10px;
}

.date-input {
    width: 40px;
    text-align: center;
}

.cell-num {
    width: 60px;
}

.cell-code {
    width: 140px;
}

.cell-name {
    width: 140px;
}

.cell-address {
    width: 150px;
}

.cell-phone {
    width: 100px;
}

.cell-key {
    width: 60px;
}

.promise {
    width: 550px;
    text-align: center;
    margin: 0 auto;
}

.cell-remark {
    min-height: 80px;
}

.declar-date {
    margin-top: 20px;
    margin-left: 100px;
}

.stamp-info {
    margin-top: 30px;
    margin-left: 300px;
}

.info {
    margin-top: 10px;
}

.linkman-name {
    width: 80px;
    text-align: center;
}

.phone {
    margin-left: 10px;
}

.telNo {
    min-width: 100px;
    text-align: center;
}
</style>

<body>
    <div class="html-body-lay" id="app">
        <div class="print-body page" v-for="(item,index) of infoPage">
            <div class="row">
                <div class="cell cell-num">序号</div>
                <div class="cell cell-right cell-code">代码</div>
                <div class="cell cell-right cell-name">名称</div>
                <div class="cell cell-right cell-address">地址</div>
                <div class="cell cell-right cell-phone">联系电话</div>
                <div class="cell cell-right cell-key cell-end">密钥数量</div>
            </div>
            <div class="row" v-for="(info,index) of item">
                <div class="cell cell-bottom cell-num">{{info.serial}}</div>
                <div class="cell cell-bottom cell-right cell-code">{{info.code}}</div>
                <div class="cell cell-bottom cell-right cell-name">{{info.name}}</div>
                <div class="cell cell-bottom cell-right cell-address">{{info.location}}</div>
                <div class="cell cell-bottom cell-right cell-phone">{{info.telphone}}</div>
                <div class="cell cell-bottom cell-right cell-key cell-end">{{info.keynum}}</div>
            </div>
            <div class="row">
                <div class="cell cell-remark cell-num cell-bottom">备注</div>
                <div class="cell cell-remark cell-input cell-bottom cell-right cell-end">{{remark}}</div>
            </div>
            <div class="promise">本人承诺上述信息真实有效。</div>
            <div class="stamp-info">
                <div class="stamp-div">甲方（盖章）：</div>
                <div class="row info">
                    <div class="linkman">联系人：</div>
                    <div class="linkman-name">{{partyB}}</div>
                    <div class="phone">联系电话：</div>
                    <div class="telNo">{{partyTel}}</div>
                </div>
            </div>
            <div class="declar-date">日期：{{date}}</div>
        </div>
    </div>
</body>
<script type="text/javascript">
var afterPrint = function() {
    window.close()
};
window.onafterprint = afterPrint;
new Vue({
    el: '#app',
    data: {
        infoPage: [],
        infoList: [],
        remark:"备注信息",
        partyB:"李四",
        partyTel:"18866667777",
        date:"2020=12-12",
    },
    computed: {

    },
    methods: {
        initInfo() {
            var that = this
            var size = 13
            for (var i = 1; i <= size; i++) {
                var info = {
                    serial: i, // 序号
                    name: "张三", // 名称
                    code: "123", // 代码
                    location: "啦啦啦啦啦", // 地址
                    telphone: "1778887777", // 联系电话
                    keynum: "100", // 密钥数量
                }
                that.infoList.push(info)
            }
            console.log(that.infoList)
        },
        pageInfo() {
            var that = this
            var page = Math.ceil(that.infoList.length / 10)
            for (var i = 0; i < page; i++) {
                var info = that.infoList.slice(i * 10, 10 + i * 10)
                that.infoPage.push(info)
            }
            console.log(that.infoPage)
        },
        print() {
            console.log("打印");
            var subOutputRankPrint = document.getElementById('app');
            console.log(subOutputRankPrint.innerHTML);
            var newContent = subOutputRankPrint.innerHTML;
            var oldContent = document.body.innerHTML;
            document.body.innerHTML = newContent;
            window.print();
        },
    },
    created() {
        var that = this
    },
    beforeMount() {
        var that = this
    },
    updated() {
        var that = this
        that.print()
    },
    mounted() {
        var that = this
        that.initInfo()
        that.pageInfo()
    },
    watch: {

    }
})
</script>

</html>