网站建设相对路径,厦门哪里有建设网站的,seo网站建设方案,网站设计专业需要什么软件相信大家平时做项目时#xff0c;打印需求很常见#xff0c;但想把打印做好#xff0c;还是要花点时间的。特别是长列表要分页的情况。
我们知道浏览原生 API window.print() 可以用于印当前窗口#xff08;window.document#xff09;视图内容。调用此方法会产生一个打印…相信大家平时做项目时打印需求很常见但想把打印做好还是要花点时间的。特别是长列表要分页的情况。
我们知道浏览原生 API window.print() 可以用于印当前窗口window.document视图内容。调用此方法会产生一个打印预览弹框用户可以根据具体设置来得到打印结果。
一、window的打印事件
默认情况下调用 window.print() 会对整个 document.body 进行打印当需要打印指定容器内容时可以这样做
1、先获取指定容器中的内容将body的内容替换掉调用了打印方法后再把原来的body恢复。
bodydiv idcontainer1p这是第一个段落/p/divdiv idcontainer2p这是第二个段落/p/divinput typebutton value打印此页面 onclickprintPage() /scriptconst printPage () {let newstr document.getElementById(container1).innerHTML;let oldstr document.body.innerHTML;document.body.innerHTML newstr;window.print();document.body.innerHTML oldstr;/script
/body
2、监听打印前、后事件实现区域打印
window.onbeforeprint()、window.onafterprint()
bodydiv idcontainerp这是一个段落/ph1 idtitle这是一个标题/h1/divinput typebutton value打印此页面 onclickprintPage() /scriptconst printPage () {window.print();}// 打印前事件window.onbeforeprint function() {// 隐藏不需要打印的元素document.getElementById(title).style.display none;}// 打印完成后window.onafterprint function() {// 放开隐藏的元素document.getElementById(title).style.display block;}/script
/body
二、打印样式 我们页面的样式和打印页面时的样式是两个不同的样式打印时会默认携带页面的样式同时呢我们也可以修改页面打印时的样式。修改打印样式的方法
1、使用内联media属性
style mediaprint.container{width:800px;}
/style
2、使用媒体查询
stylemedia print {h1{color: #333;background: #ccc;}}
/style
3、引入打印样式表 例如print.css
media print {page {size: auto;margin: 20px 30px;}#mainBody{margin-top:0 !important;margin-bottom:0 !important;}
} 用link引入
link relstylesheet typetext/css href./css/print.css mediaprint / 注意 1、如果是前后不分离的项目在样式中用到时可能会报错上下文中未定义media或page这时候我们可以用link的方式引入。 2、修改打印样式时必须确保打印机样式实际上确实覆盖了主样式表。可以使用!important。 3、page属性可以控制打印页面的边距大小和页眉页脚 media print {page {size: auto; // {size:A4}、{size: 800px 1200px}、{size:portrait}竖向打印、{size:landscape}横向打印margin: 20px 30px; // 边距可去除页眉页脚}// 覆盖页面原有样式#container{margin-top:0 !important;margin-bottom:0 !important;}
} 4、-webkit-print-color-adjust是一个在浏览器中强制打印背景颜色和字体颜色的css属性当打印出来的某些元素的背景颜色没有被显示时可以使用-webkit-print-color-adjust:exact 5、当需要自定义打印分页时机时可通过如下方式将指定 DOM 设为分割点。 media print {h1 {page-break-before: always; //在指定元素前面添加分页符}#title {page-break-after: always;//在指定元素后面添加分页符}
} 了解更多page-break-after - CSS层叠样式表 | MDN 三、长列表打印
打印长列表时会要求自动分页但添加了分页符效果可能并不理想。最常见的就是表格行被从中间截断那要怎么解决呢
其实我们只要控制打印的行数就可以了。我们需要知道打印元素的高度和表格行的高度算出一页纸可以打印多少行超出的部分放到下一页打印。一页放多少行没必要计算根据打印元素的高度估算下就可以了。
示例
stylebody {font-family: 微软雅黑,Verdana,SimHei,Microsoft JhengHei,Tahoma;line-height: 1.5;background-color: #ffffff;margin: 0;}// 打印容器#mainBody {margin: 20px 20px 0 20px;}table {border: 1px solid #000;border-collapse: collapse;width: 100%;}table td {border: 1px solid #000;height: 30px;text-align: center;}table th {border: 1px solid #000;height: 30px;text-align: center;}.printContainer {margin: 0 auto;// 打印内容宽高width: 1052px;height: 1480px;position: relative;}.printTitle {font-size: 22px;font-weight: bold;text-align: center;}.printnav {display: flex;justify-content: space-between;}.signature_footer {position: absolute;width: 100%;bottom: -20px;display: flex;justify-content: space-around;font-size: 20px;}
/style
bodydiv idmainBody/div
/bodyscript$(document).ready(function () {getList()})//获取地址栏参数function getUrlParam(name) {var reg new RegExp((^|) name ([^]*)(|$)); //构造一个含有目标参数的正则表达式对象var r window.location.search.substr(1).match(reg); //匹配目标参数if (r ! null) return unescape(r[2]); return null; //返回参数值}// 将列表数据分页array要分页的数据subNum是每页多少条根据纸张大小估算一页能展示多少条function groupArray(array, subNum) {let index 0let newArray []while (index array.length) {newArray.push(array.slice(index, (index subNum)))}return newArray}// 获取数据源页面添加元素function getList() {var params {PatientID: getUrlParam(PatientID),BedNo: getUrlParam(BedNo),xdStartDate: getUrlParam(StartDate),xdEndDate: getUrlParam(EndDate)}$.get(/IndexPrintList, params, function (res) {// 先清空上一次的数据$(#mainBody).empty()// 分页的数据返回的数组长度即页数var arr groupArray(res.alist, 14)if (arr.length) {for (let i 0; i arr.length; i) {// 创建打印元素$(#mainBody).append(div classprintContainerdiv classprintTitle${res.hospitalName}/divdiv styletext-align:center;font-weight:bold;font-size:20px;margin:20px 0;定点血糖记录表/divdiv classprintnav stylemargin: 10px 0; font-size:14px;div患者ID ${res.patientModel.no}/divdiv姓名${res.patientModel.name}/divdiv性别 ${res.patientModel.sex 0 ? 男 : 女}/divdiv病区${res.patientModel.Bed.WardModel.wardName}/divdiv床号${res.patientModel.Bed.innerOrder}/divdiv测量次数:${res.allNum}/div/divdiv classprintContenttabletheadtrth colspan2日期\监测点/th${res.SortList.map(column {return th${column.name}/th}).join()}/tr/theadtbody${arr[i].map(row {return trtd rowspan3 stylewidth:90px${row.measureTime}/tdtd血糖值mmol/L/td${res.MeasurePointList.map(point {if (row.dict[point.id]) {return td stylecolor:${row.dict[point.id].color} ${row.dict[point.id].Value}/td} else {return td/td}}).join()}/trtrtd操作者/td${res.MeasurePointList.map(point {if (row.dict[point.id]) {return td${row.dict[point.id].AccountName}/td} else {return td/td}}).join()}/trtrtd测量时间/td${res.MeasurePointList.map(point {if (row.dict[point.id]) {return td08:00/td} else {return td/td}}).join()}/tr}).join()}/tbody/table/divdiv classsignature_footerdiv医生手签/divdiv stylemargin-right:30px;质控护士手签/div/div/div)}}window.print();})}/script
代码解释
1、首先给打印元素设置宽和高高度根据需要或实际情况设置。可根据A4纸大小来定
2、通过接口拿到长列表数据然后用groupArray方法计算需要打印几页。groupArray函数返回一个二维数据二维数组的长度就是页数二维数组的每一项就是每页的数据
3、根据这个二维数组循环创建要打印的元素。类.printContainer是要打印的整体内容即一页纸的内容arr[i]就是每页的表格数据
4、示例中每页都加了标题和签名表格有合并单元格。
5、简单表格如下
tabletheadtrth检测日期/thth检测值/thth操作护士/th/tr/theadtbody${arr[i].map(item{return trtd${item.MeasureDateStr}/tdtd${item.value}/tdtd${item.AccountName}/td/tr}).join()}/tbody
/table
