【vue2】中谷歌 Chrome 实现自定义页眉页脚打印

解决的最终方案如下图

需求：页眉页脚如下，设计图所示，使用浏览器Ctrl+P打印即可，大小B5试纸

一、实现方法

说明：数据内容不确定分页的情况下，建议使用方法二

相关属性参考地址：https://www.w3cplus.com/css/designing-for-print-with-css.html

方法一：绝对相对定位（将自定义的页眉页脚内容通过计算定位到对应位置）

<div class="print_hander"><div v-print="'#a4Div'"><el-button type="warning" icon="el-icon-printer" @click="onClick">打印</el-button></div>
</div>
<!-- 打印内容  -->
<div id="a4Div" ref="a4Div">
</div>onClick() {this.$nextTick(() => {const num = 890let a4Div = this.$refs.a4Divlet height = a4Div.offsetHeightlet count = Math.floor(height / num) + 1for (let i = 0; i < count; i++) {let dom = document.createElement('div')let topValue = Number(num * (i + 1)) + Number(18 * i) - numthis.dataInfo.forEach((subjectItem, subIndex) => {let top = `<div style="position:absolute;top:${topValue}px;font-size:12px;width:100%;height:${num}px;"><div style="height:30px;border-bottom: 1px solid #828282; display: flex;justify-content: center; position:absolute;left:50%; transform: translate(-50%, -50%);width:100%;"><p style="margin-right: 46px;">${subjectItem.BaseInfo.SchoolName}</p><p style="margin-right: 46px;">${subjectItem.BaseInfo.Grade + subjectItem.BaseInfo.ClassName}</p><p style="margin-right: 46px;">成长记录</p><p>学号：${subjectItem.BaseInfo.ExamNo}【${subjectItem.BaseInfo.Subject}】</p></div><div style="position:absolute;right:0;bottom:0;font-size:18px;">${(i + 1)}/${count}</div></div>`dom.innerHTML = topa4Div.appendChild(dom)})}})}
}

存在的问题：当数据通过循环不确定的情况下，分页靠内容往下撑开，造成页眉页脚与内容重叠

解决重叠：添加 “ page-break-inside:avoid; ” 属性，将图片和带有 page-break-inside:avoid; ” 属性” 的div 整个分页隔开

<style lang="scss" scoped>
@media print {.tex_item {page-break-inside:avoid; }img{page-break-inside:avoid; }
}
</style>

方法二：修改 Chrome 自带的页眉页脚（打印时需要勾选 “ 页眉页脚 ”）

1、修改页眉的标题

<script>
export default {data() {return {printObj: {id: '#a4Div',popTitle: '打印'  // 页眉标题}}}
}
</script>

2、修改页脚左侧的链接（通过调样式隐藏即可，其中margin-bottom的值多少决定是否能隐藏链接，根据页眉去调即可）

@media print {@page {size: B5(JIS);// 此处调整使其只显示页脚中的页码，具体根据页面调整margin: 10mm 16mm;margin-bottom: 8mm;}
}

存在的问题：添加 “ page-break-inside:avoid; ” 分页属性时，会使其链接显示出来，如果不显示左侧链接就不要使用此属性

3、完整代码

<div class="print_hander"><div v-print="printObj"><el-button type="warning" icon="el-icon-printer" @click="onPrint">打印</el-button></div>
</div>
<!-- 打印内容  -->
<div id="a4Div" ref="a4Div">
</div><script>
export default {data() {return {printObj: {id: '#a4Div',popTitle: '打印',ignoreClass: 'noprint' // 不需要打印的内容// extraCss: 'https://www.google.com,https://www.google.com',// extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',}}},methods: {// 打印方法onPrint() {this.dataInfo.forEach((subjectItem, subIndex) => {this.printObj.popTitle = subjectItem.BaseInfo.SchoolName + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' +subjectItem.BaseInfo.Grade + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + subjectItem.BaseInfo.UserName +'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;学号：' + subjectItem.BaseInfo.ExamNo + '【' + subjectItem.BaseInfo.Subject + '】'})}}
}
</script>
<style lang="scss" scoped>
@media print {@page {size: B5(JIS);// 此处调整使其只显示页脚中的页码，具体根据页面调整margin: 10mm 16mm;margin-bottom: 8mm;}
}

希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~

【vue2】中谷歌 Chrome 实现自定义页眉页脚打印相关推荐

【办公-excel】同一个Excel文件中同步自定义页眉页脚
一.问题描述 excel表格在打印设置里如何让自定义页眉永久保留如何保存自定义的页眉页脚呢? 如何保存自定义的页眉页脚到默认的下拉框 Excel 页眉页脚的下拉菜单如果添加和删除? 比如现在下拉菜单 ...
Chrome 谷歌分页打印去除页眉页脚点击取消或打印关闭当前窗口
page-break-before(指定元素前添加分页符) auto 默认值.如果必要则在元素前插入分页符. always 在元素前插入分页符. avoid 避免在元素前插入分页符. left 在元素 ...
excel更改页眉页脚_如何在Excel的页眉和页脚中键入“＆”号
excel更改页眉页脚 Have you tried to type an ampersand (&) in a header or footer in Excel and seen it d ...
vue+ts在线文档编辑(类腾讯文档)多人在线编辑-自定义页眉和分页打印（三）
目录前言一.自定义页眉内容二.分页文档打印 1.加入分页符 2.打印方法 3.打印模块完整代码总结前言随着在线办公场景越来越多,同时需要各式各样办公软件,在开发时就用得到在线文档来内容指定 ...
window.print()打印时，如何自定义页眉/页脚、页边距
自定义页眉/页脚.页边距,要用到ActiveX控件(在ie的安全设置的启用),会修改注册表中ie的设置,代码如下. try{ var hkey_root,hkey_path,hkey_key; hke ...
[html] 打印页面时怎样自定义打印页眉页脚或者去掉眉页脚？
[html] 打印页面时怎样自定义打印页眉页脚或者去掉眉页脚? <style type="text/css" media="print"> @pag ...
计算机一级插入页眉,2017年计算机一级WPS辅导：WPS中页眉页脚的设计技巧
本文讲解WPS2005页眉页脚的编辑技巧.页眉和页脚在正式的文档中起着很大的作用.一方面,它可以使文档页面美观.正规:另一方面,它可以使文档或表格清晰,查阅起来方便,最普通的例子就是形如第X页共Y页这 ...
word文档中页眉页脚的设置问题
问题一:解决只在首页显示页眉与页脚这个问题解释起来其实挺麻烦的,但懂了的话操作起来不难: 对第一个问题: 第一步,将光标放在页和页之间分开的两个字中间,点插入--分隔符--分节符类型--下一页.确定 ...
html打印自定义页头,CSS实现打印网页自定义页眉页脚
打印网页时需设置自定义的页眉页脚,CSS没法直接设定:但可以利用table的特性,间接实现类似的效果: 实现效果网页结构代码 /* @media print 限定样式,只作用于打印页 */ /* @ ...

【vue2】中谷歌 Chrome 实现自定义页眉页脚打印

一、实现方法

方法一：绝对相对定位（将自定义的页眉页脚内容通过计算定位到对应位置）

方法二：修改 Chrome 自带的页眉页脚（打印时需要勾选 “ 页眉页脚 ”）

【vue2】中谷歌 Chrome 实现自定义页眉页脚打印相关推荐

最新文章

热门文章

【vue2】中 谷歌 Chrome 实现自定义页眉页脚打印

一、实现方法

方法一：绝对相对定位（将自定义的页眉页脚内容通过计算定位到对应位置）

方法二：修改 Chrome 自带的页眉页脚（打印时需要勾选 “ 页眉页脚 ”）

【vue2】中 谷歌 Chrome 实现自定义页眉页脚打印相关推荐

最新文章

热门文章

【vue2】中谷歌 Chrome 实现自定义页眉页脚打印

【vue2】中谷歌 Chrome 实现自定义页眉页脚打印相关推荐