Vue window.print() 自定义页眉，页脚内容(可放图片)

最新推荐文章于 2024-06-18 21:30:08 发布
最新推荐文章于 2024-06-18 21:30:08 发布
阅读量1.3k 收藏 9
点赞数 13
文章标签： html5 css vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57477371/article/details/136626519
版权
本文讲述了作者在工作中如何通过HTML中的thead标签以及border和position属性，满足产品经理对每页打印内容固定页眉（包含图片）的要求，提供了一种技术解决方案。
摘要由CSDN通过智能技术生成

今天在工作中，遇到一个问题，产品经理要求每一页打印的内容都要有固定的页眉(要可放图)

直接上解决方法

使用表格的 thead 标签 

我这里用了两个thead ，通过设置border / position 达到效果

星宇23
关注
window.print 添加页眉页脚
weixin_54362826的博客
08-09 3451
原文链接：link 代码 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="page-header" style="text-align: center"> I'm The Header <br/> <button typ
vue-print-nb打印自定义页码和表格行数分页打印并包含列合计
YNNSD的博客
08-22 1674
我还可以自定义每个页面打印的表格行数和字体大小。
window.print()打印时，如何自定义页眉/页脚、页边距
记事本
07-10 8278
自定义页眉/页脚、页边距，要用到ActiveX控件（在ie的安全设置的启用），会修改注册表中ie的设置，代码如下。try{ var hkey_root,hkey_path,hkey_key; hkey_root="HKEY_CURRENT_USER"; hkey_path="\\Software\\Microsoft\\Internet Explorer\\PageSetup\\"; var ...
JS实现浏览器打印、打印预览
热门推荐
风水月的专栏
02-26 6万+
目前正在做浏览器端采用JS方式实现打印这么一个功能，JS打印实现的方法很多，但是兼容各个浏览器实现打印预览的功能有些棘手，现将实现的内容及遇到的问题记录下来，希望有大牛看到所提的问题后可以给予解答，在此感谢啦。 1.JS实现打印的方式 方式一：window.print() window.print();会弹出打印对话框，打印的是window.document.body.innerHTML中的
vue 打印、自定义打印、页面打印、隐藏页眉页脚
carbonzhao的专栏
05-22 2209
组装数据格式为，传到打印页面，最终打印页面会计算布局，根据一行显示多少列来遍历child进行布局后显示打印页面。粘贴以下代码进入index.vue组件中：注意阅读并分析这里面的实现，预留功能为一行N列实现，栅格布局计算！花了一天时间搞了个打印功能，现则将整体实现过程进行整理分享。在views目录下创建重组页面，即要实现的打印页面。2、重组页面打印格式为：这里重组页面的原因是客户要求为一行两列打印！在使用打印功能的父组件页面中引入上述子组件;
【vue2】中 谷歌 Chrome 实现自定义页眉页脚打印
weixin_50450473的博客
02-15 5397
学号：${subjectItem.BaseInfo.ExamNo}【${subjectItem.BaseInfo.Subject}】
window.print() 前端实现网页打印(封装) - 自定义页眉页脚
weixin_44690999的博客
01-06 6593
window.print 详解 - 自定义页眉页脚
Java 添加Word页眉、页脚
weixin_30600197的博客
06-12 531
本篇文章将介绍通过java程序来添加Word页眉页脚的方法。鉴于在不同文档中，对页眉页脚的操作要求不同，文章将分别从以下几种情况来阐述： 1.添加页眉页脚 添加图片到页眉 添加文本到页眉 添加页码 2.设置奇偶页不同的页眉页脚 3.设置首页页眉页脚不同 4.不连续设置页码（即对不同章节的内容设置不同页码） 5.锁定页眉页脚（不可编辑页眉页脚） ...
window.print打印指定div实例代码
09-04
在网页开发中，有时我们需要提供一个功能，让用户能够打印页面上的特定内容，而不是整个页面。`window.print()` 是JavaScript中...在实际应用中，还可以根据需求进行扩展，比如添加样式处理、自定义页眉和页脚等功能。
Vue使用printJS导出网页为pdf、printJS导出pdf、空白页解决、自定义页脚
林中明月间丶
01-05 2923
需求：网页已经写成了pdf的样式，需要点击导出pdf按钮 调用浏览器系统预览-打印。,覆盖外面原有的样式,以去除一些打印时不需要的而原HTML中有的样式。在我们想打印内容的标签上添加id，如下。在想要引入的页面中添加如下代码。
javascript实现window.print()去除页眉页脚
10-24
主要介绍了javascript实现window.print()去除页眉页脚的方法以及各参数的设置技巧,需要的朋友可以参考下
设置网页打印的页眉页脚为空和默认值，动态控制
04-10
设置网页打印的页眉页脚为空和默认值，动态控制 很实用的功能，一直用着的；
js实现打印并去除页眉页脚功能
12-13
JS 实现打印并去除页眉页脚功能 JS 实现打印并去除页眉页脚功能是通过修改注册表来实现的，该功能可以在 Web 打印功能中应用。下面对该功能的实现进行详细的知识点总结： 一、注册表修改 在实现打印并去除页眉...
vue、js 打印 window.print（）方法
gu_eu的博客
03-05 4046
print()方法 print() 方法用于打印当前窗口的内容。调用 print() 方法会产生一个打印预览弹框，让用户可以设置打印请求。最简单的打印就是直接调用window.print()，当然用 document.querySelector('print') 也可以达到同样的效果。默认打印页面中body里的所有内容。 最简单的使用，直接window.print()就可以，当然，document.execCommand('print') 也可以达到同样的效果。 代码示例 ： // 这里我们是对局部打印做
CSS打印设置页眉页脚
桃树林
06-18 1383
实现了CSS打印自定义页眉页脚
使用window.print打印frame框架，可以设置页眉页脚
龙
10-23 1492
点击这里打印    打印起始标签   在这之间的内容可以打印出来。   打印终止标签       var hkey_root,hkey_path,hkey_key  hkey_root="HKEY_CURRENT_USER"  hkey_path="\\Software\\Microsoft\\Internet Explorer\\PageSetup\\" // 设
vue 实现自定义分页打印 window.print
weixin_49066399的博客
03-29 568
h3>打印单{{item}}</h3><tablestyle="border="1"这里是自定义表格内容</table></section>
vue3 print.js打印实现页脚内容自定义
最新发布
10-15
Vue3 中使用 `print.js` 实现页脚内容自定义通常涉及到在模板中设置特定的数据，在组件渲染完成后，利用 `print.js` 的钩子函数来自定义打印的行为。以下是基本步骤： 1. 首先，你需要在项目中安装 `print.js` 库，可以使用 npm 或 yarn 进行安装： ```bash npm install print-js ``` 2. 在 Vue 组件中导入 `print.js`，并在模板中设置你想在页脚显示的内容。例如，假设你想显示当前日期： ```html <template> <button @click="printPDF">打印</button> <div v-if="showFooter" class="footer">{{ currentDateTime }}</div> </template> ``` 在数据选项里添加变量存储日期等信息： ```javascript export default { data() { return { showFooter: true, currentDateTime: new Date().toLocaleDateString(), }; }, } ``` 3. 当点击打印按钮时，触发打印函数，并使用 `print.js` 设置页面和页脚内容： ```javascript methods: { async printPDF() { const options = { type: 'pdf', // 输出类型，这里是 PDF margin: { top: 0, bottom: 50 }, // 自定义边距 headerContent: '', // 清空默认页眉 footerContent: '<div>当前日期: {{ currentDateTime }}</div>', // 定义页脚内容 }; await this.$print(options); // 执行打印操作 }, }, ``` 4. 使用 `this.$print` 而不是直接 `window.print()` 可以让你更精细地控制打印过程。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值