js打印html页面

最新推荐文章于 2023-07-04 15:38:50 发布

原创最新推荐文章于 2023-07-04 15:38:50 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #前端

JS 同时被 3 个专栏收录

14 篇文章

订阅专栏

html

7 篇文章

订阅专栏

前端打包图片

2 篇文章

订阅专栏

该博客介绍了一个JavaScript函数printse()，用于处理HTML页面打印。函数首先隐藏某些元素，然后通过遍历DOM获取特定类名的元素并计算其高度以进行分页处理。根据元素高度，函数会在适当位置添加分页样式，确保打印时页面布局正确。最后，恢复元素的显示状态并调用window.print()进行打印。

function printse(){

document.getElementById('loading').style.display ='block';

document.getElementById('print').style = 'display:none'

document.getElementById('download').style = 'display:none'

getDomList('tuxiangfenxi_1', true, 20)

getDomList('snengshuzhi_box', true, 20)

let domList = document.getElementsByClassName('download_page')

var pageHeight = 850

let guanjituBox = document.getElementsByClassName('guanjitu_box')

let guanjituBoxHeight = 1 //上一个元素的高度

for(let i=0; i<guanjituBox.length; i++){

let contentPageNum = Math.ceil(guanjituBoxHeight/pageHeight) //上一个元素低部到第一个元素顶部的距离的分页页数

let contentPageNum2 = Math.ceil((guanjituBox[i].getBoundingClientRect().height+guanjituBoxHeight)/pageHeight) //当前元素底部到第一个元素顶部的距离的分页页数

//当前元素和上一个元素的分页不相等就在当前元素上添加分页符 page-break-before:always

if(contentPageNum!=contentPageNum2){

guanjituBox[i].classList.add('cc2')

}

guanjituBoxHeight+=guanjituBox[i].getBoundingClientRect().height

}

let igmseeItem = document.getElementsByClassName('page_sfv')

let pageSfvHeight = 0

for(let i=0; i<igmseeItem.length;i++){

let contentPageNum = Math.ceil(pageSfvHeight / pageHeight)//当前元素顶部到顶部的分页页数

let contentPageNum2 = Math.ceil((igmseeItem[i].getBoundingClientRect().height+pageSfvHeight)/pageHeight)

if(contentPageNum!=contentPageNum2){

igmseeItem[i].classList.add('cc')

}

pageSfvHeight+=igmseeItem[i].getBoundingClientRect().height

}

let pageAcwt = document.getElementsByClassName('page_acwt')

let pageAcwtHeight = 1

for(let i=0; i<pageAcwt.length;i++){

let contentPageNum = Math.ceil(pageAcwtHeight / pageHeight)//当前元素顶部到顶部的分页页数

let contentPageNum2 = Math.ceil((pageAcwt[i].getBoundingClientRect().height+pageAcwtHeight)/pageHeight)

if(contentPageNum!=contentPageNum2){

pageAcwt[i].classList.add('cc')

}

pageAcwtHeight+=pageAcwt[i].getBoundingClientRect().height

}

let pageJdChange = document.getElementsByClassName('pageJdChange')

let pageJdChangeHeight = 1

let pageHeight2 = 841

for(let i=0; i<pageJdChange.length;i++){

let contentPageNum = Math.ceil(pageJdChangeHeight / pageHeight2)//当前元素顶部到顶部的分页页数

let contentPageNum2 = Math.ceil((pageJdChange[i].getBoundingClientRect().height+pageJdChangeHeight)/pageHeight2)

if(contentPageNum!=contentPageNum2){

pageJdChange[i].classList.add('cc')

}

pageJdChangeHeight+=pageJdChange[i].getBoundingClientRect().height

}

let printTable = document.getElementsByClassName('printTable')

let pagePrintTableHeight = 1 //上一个元素的高度

for(let i=0; i<printTable.length; i++){

let contentPageNum = Math.ceil(pagePrintTableHeight/700) //上一个元素低部到第一个元素顶部的距离的分页页数

let contentPageNum2 = Math.ceil((printTable[i].getBoundingClientRect().height+pagePrintTableHeight)/700) //当前元素底部到第一个元素顶部的距离的分页页数

//当前元素和上一个元素的分页不相等就在当前元素上添加分页符 page-break-before:always

if(contentPageNum!=contentPageNum2){

printTable[i].classList.add('cc')

}

pagePrintTableHeight+=printTable[i].getBoundingClientRect().height

}

document.getElementById('print').style = 'display:block'

document.getElementById('download').style = 'display:block'

document.getElementById('loading').style.display ='none';

window.print()

}