浏览器打印固定显示标题等

最新推荐文章于 2024-04-05 16:48:08 发布

console.log('只想发财')

最新推荐文章于 2024-04-05 16:48:08 发布

阅读量379

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.youkuaiyun.com/jl____/article/details/132247059

版权

1. 利用的分页固定显示头部内容，分页固定显示尾部内容

<template>
    <div>
        <table border="0" class="table_box">
            <!-- 公共拥有的头部 start -->
            <thead style="display: table-header-group">
                <tr style="page-break-inside: avoid">
                    <th colspan="20" style="color: #000 !important; page-break-inside: avoid"> </th>
                </tr>
            </thead>
            <!-- 公共拥有的尾部 end -->
            <tbody style="display: table-header-group">
                <tr>
                    <td>
                        <table cellspacing="0" cellpadding="0" border="0" class="table_show">
                            <!-- 制单表头 >每页都展示 start -->
                            <thead style="font-size: 13px !important;}">
                                <tr class="tr_fist">
                                    <td style="width: 80px">序号</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item, index) in 55" :key="index">
                                    <td style="width: 80px">{{ index + 1 }}</td>
                                </tr>
                            </tbody> 
                        </table>
                    </td>
                </tr>
            </tbody>
            <!-- 公共拥有的尾部 start -->
            <tfoot style="display: table-footer-group">
                <tr>
                    <td colspan="2" align="center"> </td>
                </tr>
            </tfoot>
        <!-- 公共拥有的尾部 end -->
        </table>
    </div>
</template>

2. 利用浏览器打印自带的页眉页脚，自定义页眉页脚内容

在这里插入图片描述
直接改的是浏览器自带的页眉内容，只有一行

<!-- 打印内容  -->
<div id="a4Div" ref="a4Div"></div>
<div v-print="printObj">
  <el-button type="warning" icon="el-icon-printer" @click="onPrint">打印</el-button>
</div>

printObj: {
  id: '#a4Div',
  popTitle: '打印标题'  // 页眉标题
}

3. 利用css调整浏览器自带的页眉页脚是否显示

// 样式中自定义如下样式，指定size为打印纸张
// 边距用于调整页眉和页脚是否显示 / 显示页眉页脚完整内容 / 显示页脚但只显示页码不显示网址等
@media print {
  @page {
    size: A4;
    // 此处调整使其只显示页脚中的页码，具体根据页面调整
    margin: 10mm 15mm;
    margin-bottom: 8mm;
    margin-top: 8mm;
  }
}