医院网站建设策划,wap网站程序,网站基本模板,wordpress 建设论坛需求1#xff1a;表格自动分页之后#xff0c;表头在每一页都需要显示
html中表头增加 thead 标签 css样式新增#xff1a;
thead {display: table-header-group; /* 这个属性使thead总是在新的page-break之后重新开始 */
}需求2#xff1a;表格自动分页之后#xff0c;…需求1表格自动分页之后表头在每一页都需要显示
html中表头增加 thead 标签 css样式新增
thead {display: table-header-group; /* 这个属性使thead总是在新的page-break之后重新开始 */
}需求2表格自动分页之后页头需要在每一页都显示 因为表头能重复显示所以我是直接将需要重复的页头也放在表头中然后给一个高度进行样式的调整。 不论是多表头还是只有一个表头表头的高度要小于整页高度的四分之一表头过高会让浏览器认为是一种错误不重复显示表头 需求3表格自动分页之后页尾需要在每一页都显示
html中增加 tfoot 标签使用空格来进行高度占位。 tfoottrtddiv classfooter-spacenbsp;/divdiv classfooter-spacenbsp;/divdiv classfooter-spacenbsp;/divdiv classfooter-spacenbsp;/divdiv classfooter-spacenbsp;/divdiv classfooter-spacenbsp;/div/td/tr
/tfootcss样式
/* 页尾内容固定显示在底部 */
.printFooter {position: fixed;bottom: 0;
}完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title打印页面/titlestyle/* 点击的按钮 */#btn {margin: 20px;padding: 20px 40px;font-size: 24px;}/style
/head
bodybutton idbtn点击按钮进行打印/buttondiv idprintJS-form!-- 打印单中间 表格部分--div classprintBodytable classprintBody-tablethead classprintBody-tableThead/theadtbody classprintTbodytr!-- 表格数据 --td1234567890zxcvbnmnmm,Print.js can be used to quickly print any image on your page, by passing the image url. This can be useful when you have multiple images on the screen, using a low resolution version of the images. When users try to print the selected image, you can pass the high resolution url to Print.js./tdtdM/tdtd1/tdtd2/tdtd3/td/tr/tbodytfoottrtddiv classfooter-spacenbsp;/divdiv classfooter-spacenbsp;/divdiv classfooter-spacenbsp;/divdiv classfooter-spacenbsp;/divdiv classfooter-spacenbsp;/divdiv classfooter-spacenbsp;/div/td/tr/tfoot/table/div!-- 打印单尾部 --div classprintFooterdiv classprintFooter-tips尾部/div/div/div!-- 引入printJs --script typetext/javascript srchttps://cdn.bootcdn.net/ajax/libs/print-js/1.6.0/print.js/scriptscript// 动态的数据这里是示例如果示例的数据的键不确定需要对整体的数据重新进行处理以下演示为数据的键是固定的let resData {tableData: [{a: 1,b : 动态数据-YVHYVHYVHYVHYVHYVHYVH,c : 动态数据-456,d : 动态数据-M,e : 动态数据-Y,},{a: 1,b : 动态数据-YVHYVHYVHYVHYVHYVHYVH,c : 动态数据-456,d : 动态数据-M,e : 动态数据-Y,}]}// 点击按钮之后首先进行动态数据的插入然后再调用printJs进行打印let btnDom document.getElementById(btn)btnDom.onclickfunction() {// 将动态的数据拿到后进行模板数据的插入handleTemplate()// 打印printJS({printable: printJS-form, // 数据源:pdf or image的urlhtml类型则填打印区域元素idjson类型则是数据object。type: html, // 默认pdf可选类型:pdf, html, image, jsonscanStyles: false, //此属性默认为trueprintJs会自动扫描当前html结构所用的样式表style: stringCssFunc(), // 打印的内容是没有css样式的此处需要string类型的css样式})}// 插入动态的数据var handleTemplate () {// 打印单页眉的数据动态添加let tHeadDom document.getElementsByClassName(printBody-tableThead)[0]let printHeadHtml trth1/thth2/thth3/thth4/thth5/th/trtHeadDom.innerHTML printHeadHtml// 打印单中间的表格let printTbody document.getElementsByClassName(printTbody)[0]let tempHtml // 表格中的数据for(let i 0; i 100;i){let item resData.tableData[i] || {}tempHtml trtd${item.a || a}/tdtd${item.b || b}/tdtd${item.c || c}/tdtd${item.d || d}/tdtd${item.e || e}/td/tr}printTbody.innerHTML tempHtml}// 样式代码var stringCssFunc function() {return page {margin: 10mm;};.printBody-table thead tr:last-child {border: 1px solid #333; }.printBody-table thead tr:last-child th {border-right: 1px solid #333; }.printBody-table tbody tr td {white-space: wrap;text-align: center;border: 1px solid #333;}/* ************************** 打印单尾部 start ********************************* */.printFooter {width: calc(100% - 80px);padding: 20px;}.printHead-single {display: flex;}.printFooter-tips{margin-bottom: 10px;font-size: 12px;}/* ************************** 打印单尾部 end ********************************* *//* 页眉、页脚设置 */media print {.printBody-table {page-break-inside: avoid;border-collapse: collapse;}/* 保证thead始终出现在新页顶部 */.printBody-table thead {display: table-header-group; /* 这个属性使thead总是在新的page-break之后重新开始 */}.printFooter {position: fixed;bottom: 0;}}}/script
/body
/html最终效果
