解決的最終方案如下圖
?需求：頁眉頁腳如下，設計圖所示，使用瀏覽器Ctrl+P打印即可，大小B5試紙
一、實現(xiàn)方法
說明：數(shù)據(jù)內(nèi)容不確定分頁的情況下，建議使用 方法二
相關(guān)屬性參考地址：https://www.w3cplus.com/css/designing-for-print-with-css.html
方法一：絕對相對定位（將自定義的頁眉頁腳內(nèi)容通過計算定位到對應位置）
<div class="print_hander">
<div v-print="'#a4Div'">
<el-button type="warning" icon="el-icon-printer" @click="onClick">打印</el-button>
</div>
</div>
<!-- 打印內(nèi)容 -->
<div id="a4Div" ref="a4Div">
</div>
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 = `<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 = top
a4Div.appendChild(dom)
})
}
})
}
}存在的問題：當數(shù)據(jù)通過循環(huán)不確定的情況下，分頁靠內(nèi)容往下?lián)伍_，造成頁眉頁腳與內(nèi)容重疊
解決重疊：添加 “ 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、修改頁腳左側(cè)的鏈接（通過調(diào)樣式隱藏即可，其中margin-bottom的值多少決定是否能隱藏鏈接，根據(jù)頁眉去調(diào)即可）
@media print {
@page {
size: B5(JIS);
// 此處調(diào)整使其只顯示頁腳中的頁碼，具體根據(jù)頁面調(diào)整
margin: 10mm 16mm;
margin-bottom: 8mm;
}
}存在的問題：添加 “?page-break-inside:avoid; ” 分頁屬性時，會使其鏈接顯示出來，如果不顯示左側(cè)鏈接就不要使用此屬性
3、完整代碼
<div class="print_hander">
<div v-print="printObj">
<el-button type="warning" icon="el-icon-printer" @click="onPrint">打印</el-button>
</div>
</div>
<!-- 打印內(nèi)容 -->
<div id="a4Div" ref="a4Div">
</div>
<script>
export default {
data() {
return {
printObj: {
id: '#a4Div',
popTitle: '打印',
ignoreClass: 'noprint' // 不需要打印的內(nèi)容
// 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 + ' ' +
subjectItem.BaseInfo.Grade + ' ' + subjectItem.BaseInfo.UserName +
' 學號：' + subjectItem.BaseInfo.ExamNo + '【' + subjectItem.BaseInfo.Subject + '】'
})
}
}
}
</script>
<style lang="scss" scoped>
@media print {
@page {
size: B5(JIS);
// 此處調(diào)整使其只顯示頁腳中的頁碼，具體根據(jù)頁面調(diào)整
margin: 10mm 16mm;
margin-bottom: 8mm;
}
}二、總結(jié)
問題：當使用方法二時，不同的數(shù)據(jù)導致頁腳的頁碼不兼容時
解決方法：可以采用方法一做頁腳中的頁碼，方法二做頁眉
結(jié)果：這樣既可避免頁眉與內(nèi)容重疊，也可以解決頁腳不兼容。文章來源：http://www.zghlxwxcb.cn/news/detail-650795.html
? ? ? ?希望我的愚見能夠幫助你哦~，若有不足之處，還望指出，你們有更好的解決方法，歡迎大家在評論區(qū)下方留言支持，大家一起相互學習參考呀~文章來源地址http://www.zghlxwxcb.cn/news/detail-650795.html
到了這里，關(guān)于【vue2】中 谷歌 Chrome 實現(xiàn)自定義頁眉頁腳打印的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
