HTML打印实现每一页都有固定的头部

最新推荐文章于 2022-12-23 14:57:00 发布
最新推荐文章于 2022-12-23 14:57:00 发布
阅读量3.7k 收藏 5
点赞数 3
分类专栏： 大前端 文章标签： css html5 css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40719787/article/details/105033221
版权

找了一下午，没有找到可以直接拿来的例子…自己根据需求想了一个办法：

最终效果

在这里插入图片描述

实现思路

通过 position: fixed; top: 0; 属性将每一页的头部固定在页面上部，不过这个时候会出现一个问题就是table中的内容会和头部重叠，我的解决办法是利用不可见的th将内容撑起来

demo代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打印</title>
    <style>
        @media print{
            button{
                display: none;
            }
        }
        .header{
            position: fixed;
            top: 0;
        }
        table{margin:auto;border-collapse: collapse; border-spacing: 0;}
        th,td{width: 200px; border:1px solid #686868;line-height: 18px; text-align: center; font-size: 12px; color: #000;}
        td{
            height: 500px;
        }
    </style>
</head>
<body style="text-align: center;">
    
    <div class="header">这是一个头部</div>
    <button onclick="window.print()">打印</button>
    <table>
        <thead>
            <tr><th style="border: none;height: 60px;">&nbsp;</th></tr>
            <tr>
                <th>表头1</th>
                <th>表头2</th>
            </tr>
        </thead>
        <tbody>
            <tr><td>一起</th><td>加油</td></tr>
            <tr><td>一起</th><td>加油</td></tr>
            <tr><td>一起</th><td>加油</td></tr>
        </tbody>
    </table>
</body>
</html>

总结：这种方式局限性比较大，只适用于表格。其他情况下可能就需要自己写js进行插入了。

空门.
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html打印表格每页都有的表头和打印分页
anihasiyou的专栏
12-15 1万+
本文转载：http://www.cnblogs.com/RitchieChen/archive/2008/07/30/1256829.html  在做项目的时候碰到的。用户要求，页面呈现太长时，打印的时候，要求，每页上都要有表头。找了好久，才在网上找到。原来，是要对每个表格，定义其thead，并对其样式设置成：style="display:table-header-group"。如果要求有表
HTML打印每一页都有固定的头部
sakura的博客
09-29 1169
HTML打印每一页都有固定的头部 ​ 业务需求是这样的，在对这个表格进行打印的时候，考虑到这个表格会有很多行，万一超过了这一页希望保留左上角的公司logo和右上角的公司名称等信息，但是表格上面的“客户名称”等相关信息就不需要了。 ​ 解决这个问题有从这几个角度出发，这有点类似页眉和页脚的设置。给整个页面设置页边距。但是这个实际上会把整个的边距减小以至于挤掉本来左上角和右上角的logo位置。 @page{ //这个margin根据实际去调整。 margin: 20
前端table打印被截断，如何给每一页都增加表头
weixin_45088043的博客
09-06 3753
一些前端打印方面的小技巧
vue print 解决打印每页都有表头
weixin_43866627的博客
12-23 2001
vue print 解决打印每页都有表头
JS 函数的执行时机
weixin_44809439的博客
10-06 147
先来看一段代码 let i = 0 for(i = 0; i<6; i++){ setTimeout(()=>{ console.log(i) },0) } 如果是按照以前学的c语言，是打印出 0 1 2 3 4 5 但是在js里面，这里是打印出6个6； 因为js的执行机制，setTimeout会在最后执行，在最后的时候，i已经变成了6； 所以是打印出6个6； 那么打印出0，1，2，3，4，5代码该怎么写呢 for(let i = 0; i<6; i++){ setT
html表格分页打印样式,vue部分打印（多页自动分页、打印样式自定义、多页打印表格页面顶部带表头）...
weixin_29968283的博客
06-23 1297
写在前面：注意打印表格时，若需要多页打印，则尽量使用原生table元素实现，这样在分页时每页顶部会带有表头，用户体验比较好一、引用插件(在 main.js 中全局引入！！注意，需要修改源码，所以尽量下载依赖到本地)import './style/print.scss'import Print from '@/libs/print.js'Vue.use(Print);在js依赖里面找到这个方法，添加...
html打印自定义页头,CSS实现打印网页自定义页眉页脚
weixin_39632728的博客
06-29 2638
打印网页时需设置自定义的页眉页脚，CSS没法直接设定；但可以利用table的特性，间接实现类似的效果：实现效果网页结构代码/* @media print 限定样式，只作用于打印页 *//* @media print { */@page {/* 设置每页顶部、底部间距 { */margin: 20px inherit;}.page-wrap {width: 100%;text-align: cent...
HTML实现打印简单报表（轻量级）
04-17
- 从提供的“html打印demo”压缩包中，可以找到实现上述功能的示例代码。这些源码可能包括HTML文件、CSS文件以及可能的JavaScript文件，用于展示如何轻量级地实现报表打印功能。 - 可以使用在线代码编辑器如...
使用lodop进行html打印
02-28
在IT行业中，HTML打印是一种常见的需求，特别是在网页报表和文档生成场景中。Lodop是一款高效、便捷的网页打印控件，它使得开发者能够轻松实现HTML页面的打印功能。本资源包提供了与Lodop相关的JavaScript（JS）代码...
Vue实现浏览器打印功能的代码
11-20
表格中的每一行都绑定到`tableData`对象的一个属性，这通常来源于你的应用程序的数据模型。 5. **设置组件属性**： 在`export default`中定义组件的属性，例如`props`，用于接收外部传递的打印数据。例如，`table...
实现web网页的打印功能
12-28
5. **使用框架和库**：.NET平台上有许多库可以帮助简化这个过程，例如，ASP.NET MVC和Blazor框架都有丰富的功能和组件可以方便地实现这一目标。此外，可以考虑使用第三方库如jQuery PrintArea，它提供了一种方法来...
韵达一联面单HTML模板
05-24
6. **交互性**：虽然这是一个打印模板，但可能也会有一些交互元素，比如JavaScript用于动态填充数据或者验证输入。JavaScript可以通过`<script>`标签内嵌，或者引用外部JS文件来实现功能。 7. **打印优化**：为了...
html页面标题位置,html – 页面底部的位置页脚具有固定标题
weixin_30978959的博客
06-04 325
正如你所提到的，position：fixed将使页脚与视口相对而非页面本身定位。因此，我们必须将元素保持在正常流程中，并以某种方式将其定位到页面的底部。有几种方法来实现这一点，这些方法已经在野外讨论了。例如：粘页脚在这个答案中，我会和Ryan Fait’s method一起去，因为它很简单易懂，也符合你的需要(页眉和页脚都有固定高度的情况)。考虑到以下结构：Footer需要以下步骤：>设置&...
网页默认打印：fixed布局的内容会在每页打印，遮挡其他内容
zhaohanqq的博客
03-30 2722
使用浏览器默认的打印功能，头部固定的导航条每页都打印并且遮住了正文部分，解决办法，给头部导航条设置如下样式 <Header class="noprint" /> <style lang="less" scoped> .noprint{ @media print { display : none } } </style> 或者...
h5 每页打印固定表头以及表尾 解决表头过长打印分页表头不固定问题
weixin_45406882的博客
11-22 1222
h5 每页打印固定表头以及表尾 解决表头过长打印分页表头不固定问题
Vue3在script-setup中使用ref 和类型“never”上不存在属性“resetFields”错误
A_KID的博客
04-26 4956
<a-form ref="ruleForm"> </a-form> <script setup> import { ref } from 'vue' const ruleForm = ref() const formSubmit = () => { ruleForm.value.validate() } </script> <script lang="ts" setup> import { ref } from 'vue' impor
搭建我的世界服务器1.15.2版
A_KID的博客
04-06 3798
参考文章： [阿里云ECS搭建我的世界服务器] [怎么在Linux搭建一个可以装mod的Minecraft服务器（我的世界）] 搭建一个我的世界服务器资源的准备服务器端客户端服务器的搭建创建文件夹上传资源搭建服务并验证正式运行服务器客户端 资源的准备 网上好多教程过多的说了怎么使用Linux服务器这里我不都将，只将一些重要的 服务器端 1.我的世界服务端核心：https://s3.amazon...
vue 么实现分页打印每页带表头
最新发布
08-16
### 回答1： 要实现分页打印每页带表头，可以使用 Vue.js 的自定义指令和 CSS 的 @media print 属性。 首先，在 Vue.js 中创建一个自定义指令，用于将分页打印样式应用于需要打印的元素。例如： ```javascript Vue.directive('print', { bind: function(el, binding, vnode) { el.printStyle = document.createElement('style') el.printStyle.setAttribute('media', 'print') document.head.appendChild(el.printStyle) el.printStyle.sheet.insertRule('@page { size: A4; margin: 0; }', 0) el.printStyle.sheet.insertRule('@media print { body { visibility: hidden; } }', 1) el.printStyle.sheet.insertRule('@media print { .page { visibility: visible; } }', 2) el.printStyle.sheet.insertRule('.page { page-break-after: always; }', 3) }, unbind: function(el, binding, vnode) { document.head.removeChild(el.printStyle) el.printStyle = null } }) ``` 在这个自定义指令中，我们首先创建一个 style 元素，并将其设置为打印媒体类型。然后，我们插入一些 CSS 规则，以实现以下效果： - 将页面大小设置为 A4，同时将页边距设置为 0； - 将页面内容设置为不可见，以便在打印时隐藏非打印内容； - 将所有带有 .page 类名的元素设置为可见，并在它们之间插入分页符； - 将所有带有 .page 类名的元素之后的内容设置为不可见。 接下来，在需要分页打印的元素上添加 .page 类名，并使用 v-print 指令将其转换为打印样式。例如： ```html <div v-print> <div class="page"> <h1>表头</h1> <table> <!-- 表格内容 --> </table> </div> <div class="page"> <h1>表头</h1> <table> <!-- 表格内容 --> </table> </div> <!-- 更多 .page 元素 --> </div> ``` 在这个示例中，我们将需要分页打印的元素包装在一个包含 v-print 指令的 div 元素中。然后，我们在每个需要打印的表格之前添加一个带有 .page 类名的 div 元素，以将其转换为打印页面。在每个 .page 元素中，我们包含一个表头和一个表格，以及任何其他需要打印的内容。 最后，我们可以使用浏览器的打印功能来打印分页内容，每页都会自动包含表头。 ### 回答2： Vue中实现分页打印每页带表头可以通过以下步骤来实现： 1. 首先，准备好需要打印的数据以及表头，可以将它们存储在Vue的数据对象中。 2. 在Vue的模板中，使用一个table来展示需要打印的数据，并在表格中添加表头。 3. 使用Vue提供的计算属性computed来对需要打印的数据进行分页处理。根据每页显示的行数，将数据分成多个页，每页存储在一个数组中。 4. 在Vue的方法methods中，编写一个打印函数。该函数会根据当前页数，获取对应的数据数组，并将其渲染到打印预览页面中。 5. 在打印预览页面中，使用CSS样式设置每一页打印的格式，包括设置每页的大小、页眉、页脚等。可以使用@media print媒体查询来适应打印样式。 6. 在打印预览页面中，使用Vue的v-for指令遍历当前页的数据数组，将数据逐行渲染到打印预览页面中的table中。 7. 为了实现每页带表头，需要在每页的table中单独添加表头。可以通过条件判断，只在每页的第一行添加表头。 8. 最后，通过window.print()方法来触发浏览器的打印功能，将打印预览页面的内容打印出来。 以上就是用Vue实现分页打印每页带表头的大致步骤。通过分页和渲染不同的数据数组，加上设置打印样式和条件判断，可以实现每页带表头的打印效果。 ### 回答3： Vue.js可以通过在模板中使用`v-for`指令和计算属性来实现分页打印，并且每一页都带有表头。 首先，需要定义一个计算属性来根据当前页数和每页显示的数量来计算要显示的数据列表。计算属性可以利用数组的`slice`方法来截取对应页数的数据，然后在模板中使用`v-for`指令循环渲染数据。 ```javascript data() { return { pageNum: 1, // 当前页数 pageSize: 10, // 每页显示的数量 tableData: [/* 数据列表 */], tableHeader: [/* 表头数据 */], } }, computed: { paginatedData() { const start = (this.pageNum - 1) * this.pageSize; const end = this.pageNum * this.pageSize; return this.tableData.slice(start, end); } } ``` 然后，在模板中使用`paginatedData`计算属性来渲染每一页的数据列表，同时在表格的头部也渲染表头数据。 ```html <table> <thead> <tr> <th v-for="header in tableHeader" :key="header">{{ header }}</th> </tr> </thead> <tbody> <tr v-for="item in paginatedData" :key="item.id"> <td>{{ item.field1 }}</td> <td>{{ item.field2 }}</td> <!-- 其他表格列 --> </tr> </tbody> </table> ``` 此时，在页面中显示的表格将会按照当前页数和每页显示的数量进行分页，并且每一页都带有表头。 当用户切换页数时，Vue.js会自动触发计算属性的重新计算，从而更新显示的数据列表。可以通过给页码增加按钮来实现翻页功能，当用户点击按钮时，更新`pageNum`的值，从而触发计算属性的重新计算。 ```html <button @click="pageNum -= 1" :disabled="pageNum === 1">上一页</button> <button @click="pageNum += 1" :disabled="(pageNum * pageSize) >= tableData.length">下一页</button> ``` 以上就是使用Vue.js实现分页打印并且每一页带有表头的方法。有了这个实现，可以根据实际需求来对分页功能进行修改和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

空门.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值