HTML 打印table分页

/*** 构造打印的excel* */
function buildPrintExcel(data,boxNo){//这一步是重点，添加分页样式let html ="<head>" +"    <style>" +"        @media print" +"        {" +"            table { page-break-after:auto }" +"            tr    { page-break-inside:avoid; page-break-after:auto }" +"            td    { page-break-inside:avoid; page-break-after:auto }" +"            thead { display:table-header-group }" +"            tfoot { display:table-footer-group }" +"        }" +"    </style>\n" +"</head>";html += "<div style='width: 900px;margin: 0 auto;'>"+"<table style='border-collapse: collapse;width:100%;' border='1' id='table' page-break-after:auto>" +"<div style='height: 70px;border: 1px solid black;border-bottom: none;'>" +"<h3 style='text-align: center;height: 20px;margin: 0 0;margin-top: 20px;'>"+ xxxx+ "</h3>"+"<p style='height: 20px;width: 30%;margin: 0 0;float: right;font-size: 15px'>xx号："+ xxx +"</p>"+"</div>"+"<tr style='height:30pt;' id='title'>" +"<td style='text-align: center; width: 5%;font-size: 15px'>序号</td>" +"<td style='text-align: center; width: 10%;font-size: 15px'>xxx</td>" +"<td style='text-align: center;  width: 15%;font-size: 15px'>xxx</td>" +"<td style='text-align: center; font-size: 15px'>xxx</td>" +"<td style='text-align: center; width: 10%;font-size: 15px'>xxx</td>" +"<td style='text-align: center;  width: 5%;font-size: 15px'>xxx</td>" +"<td style='text-align: center;  width: 5%;font-size: 15px'>xxx</td>" +"<td style='text-align: center; width: 15%;font-size: 15px'>xxx</td>" +"</tr>";let str = "";let trL = "<td style='text-align: center;font-size: 14px'>";let trR = "</td>";debuggerfor (let i = 0; i < data.length; i++) {let info = data[i];str +="<tr style='height: 30px'>"//序号str += trL + (i + 1) + trR;str += trL + isNull(info.xxx) + trR;str += trL + isNull(info.xxx)  + trR;str += trL + isNull(info.xxx)  + trR;str += trL + isNull(info.xxx)  + trR;str += trL + isNull(info.xxx)  + trR;str += trL + isNull(info.xxx)  + trR;str += trL + isNull(info.xxx)  + trR;str +="</tr>";}html += str +"</table></div>";var newWindow = window.open("打印窗口", "_blank");//打印内容写入newWindow文档newWindow.document.write(html);//关闭文档newWindow.document.close();//调用打印机newWindow.print();//关闭newWindow页面newWindow.close();
}function json2obj(json) {let result = null;if (typeof (json) != "object") {result = eval('(' + json + ')');}else{result = json;}return result;
}function isNull(data){if(0 == data){return data;}if(null == data || "" == data){return "";}return data;
}

HTML 打印table分页相关推荐

lodop打印html包含图片,使用lodop.js打印控件打印table并分页等
使用lodop.js打印控件打印table并分页等 import {getLodop} from '@/utils/LodopFuncs.js' //打印表格 export default{ // n ...
bootstraptable控制分页_bootstrap table分页（前后端两种方式实现）
bootstrap table分页的两种方式: 前端分页:一次性从数据库查询所有的数据,在前端进行分页(数据量小的时候或者逻辑处理不复杂的话可以使用前端分页) 服务器分页:每次只查询当前页面加载所需要 ...
table分页的简单实现逻辑
为什么80%的码农都做不了架构师?>>> //table分页函数showPageNum: function(pageNum, allPageNum) { //pageNum点击 ...
Bootstrap table分页问题汇总
首先非常感谢作者针对bootstrap table分页问题进行详细的整理,并分享给了大家,希望通过这篇文章可以帮助大家解决Bootstrap table分页的各种问题,谢谢大家的阅读. 问题1 :服务 ...
layui table 分页序号始终从”1“开始解决方法
layui table 分页序号始终从"1"开始解决方法参考文章: (1)layui table 分页序号始终从"1"开始解决方法 (2)https:// ...
ant design vue table分页
ant design vue table分页设置 1.设置pagination <a-table :columns="columns" :dataSource="d ...
Vue + Element + Table 分页选择勾选和取消勾选的问题
Vue + Element + Table 分页选择勾选和取消勾选的问题问题描述: 需求是这样的===>表格前面每条数据都有复选框吧然后表格有很多页 , 我从第一页选取N条数据再去其他页 ...
Vue+iView table分页勾选记忆功能
iView table分页勾选记忆功能一,需求. a,需求分析: 第一页勾选后,再点分页,勾选其它页数据,可以记住所有勾选的数据,然后可以回显所选数据到页面上,并且跳转页面仍可显示. b,现有功能: ...
Lua 打印table、ngx.say table
目录打印 table函数: ngx.say table 函数: 打印 table函数: function print_r ( t )local print_r_cache={}local funct ...

HTML 打印table分页

HTML 打印table分页相关推荐

最新文章

热门文章