【vue2】中 谷歌 Chrome 实现自定义页眉页脚打印 |
您所在的位置：网站首页 › 浏览器打印页码范围怎么设置 › 【vue2】中 谷歌 Chrome 实现自定义页眉页脚打印 |
【vue2】中 谷歌 Chrome 实现自定义页眉页脚打印
|
解决的最终方案如下图
需求：页眉页脚如下，设计图所示，使用浏览器Ctrl+P打印即可，大小B5试纸
说明：数据内容不确定分页的情况下，建议使用 方法二 相关属性参考地址：https://www.w3cplus.com/css/designing-for-print-with-css.html 方法一：绝对相对定位（将自定义的页眉页脚内容通过计算定位到对应位置） 打印 onClick() { this.$nextTick(() => { const num = 890 let a4Div = this.$refs.a4Div let height = a4Div.offsetHeight let count = Math.floor(height / num) + 1 for (let i = 0; i < count; i++) { let dom = document.createElement('div') let topValue = Number(num * (i + 1)) + Number(18 * i) - num this.dataInfo.forEach((subjectItem, subIndex) => { let top = `${subjectItem.BaseInfo.SchoolName} ${subjectItem.BaseInfo.Grade + subjectItem.BaseInfo.ClassName} 成长记录 学号：${subjectItem.BaseInfo.ExamNo}【${subjectItem.BaseInfo.Subject}】 ${(i + 1)}/${count} ` dom.innerHTML = top a4Div.appendChild(dom) }) } }) } }存在的问题：当数据通过循环不确定的情况下，分页靠内容往下撑开，造成页眉页脚与内容重叠 解决重叠：添加 “ page-break-inside:avoid; ” 属性，将图片和带有 page-break-inside:avoid; ” 属性” 的div 整个分页隔开 @media print { .tex_item { page-break-inside:avoid; } img{ page-break-inside:avoid; } } 方法二：修改 Chrome 自带的页眉页脚（打印时需要勾选 “ 页眉页脚 ”）
1、修改页眉的标题 export default { data() { return { printObj: { id: '#a4Div', popTitle: '打印' // 页眉标题 } } } }2、修改页脚左侧的链接（通过调样式隐藏即可，其中margin-bottom的值多少决定是否能隐藏链接，根据页眉去调即可） @media print { @page { size: B5(JIS); // 此处调整使其只显示页脚中的页码，具体根据页面调整 margin: 10mm 16mm; margin-bottom: 8mm; } }存在的问题：添加 “ page-break-inside:avoid; ” 分页属性时，会使其链接显示出来，如果不显示左侧链接就不要使用此属性 3、完整代码 打印 export default { data() { return { printObj: { id: '#a4Div', popTitle: '打印', ignoreClass: 'noprint' // 不需要打印的内容 // extraCss: 'https://www.google.com,https://www.google.com', // extraHead: '', } } }, methods: { // 打印方法 onPrint() { this.dataInfo.forEach((subjectItem, subIndex) => { this.printObj.popTitle = subjectItem.BaseInfo.SchoolName + ';;;;;;' + subjectItem.BaseInfo.Grade + ';;;;;;' + subjectItem.BaseInfo.UserName + ';;;;;;学号：' + subjectItem.BaseInfo.ExamNo + '【' + subjectItem.BaseInfo.Subject + '】' }) } } } @media print { @page { size: B5(JIS); // 此处调整使其只显示页脚中的页码，具体根据页面调整 margin: 10mm 16mm; margin-bottom: 8mm; } } 二、总结问题：当使用方法二时，不同的数据导致页脚的页码不兼容时 解决方法：可以采用方法一做页脚中的页码，方法二做页眉 结果：这样既可避免页眉与内容重叠，也可以解决页脚不兼容。 希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~ |
【本文地址】
今日新闻 |
推荐新闻 |