HTML Table 打印

最新推荐文章于 2023-09-08 16:27:15 发布
最新推荐文章于 2023-09-08 16:27:15 发布
阅读量828 收藏 1
点赞数
分类专栏： Layui JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tjhfsghbjknjdy/article/details/114358107
版权

实现表格跨页自动分开

  @media print
	{
	  .layui-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 }
	}

 模板渲染： json 数组嵌套json数组 实现table渲染，同时合并单元格，子任务为空时，设置一个value为空的json字符串，避免subtasks[0]报错

	<table class="layui-table" id="subtasks">
							<colgroup>
								<col width="4%">
								<col width="26%">
								<col width="27%">
								<col width="27%">
								<col width="8%">
								<col width="8%">
							</colgroup>
							<tr>
								<td rowspan="2" align="center">序号</td>
								<td rowspan="2" align="center">教学内容</td>
								<td rowspan="2" align="center">子情境/子项目/子任务</td>
								<td rowspan="2" align="center">知识、技能内容与要求</td>
								<td colspan="2" align="center">参考学时</td>
							</tr>
							<tr>
								<td align="center">理论</td>
								<td align="center">实训</td>
							</tr>
							<tbody id="contents">
							</tbody>
						</table>
<script type="text/html" id="contentlist">
	{{# layui.each(d.list,function(index,item){ }}
	<tr>
		<td rowspan="{{item.subnum}}" align="center">
			{{index + 1}}
		</td>
		<td rowspan="{{item.subnum}}" align="center">
			{{item.content}}
		</td>
		<td align="center">
			{{item.subtasks[0].subtask}}
		</td>
		<td align="center">
			{{item.subtasks[0].demand}}
		</td>
		<td align="center">
			{{item.subtasks[0].theoryHour}}
		</td>
		<td align="center">
			{{item.subtasks[0].practiceHour}}
		</td>
	</tr>
	{{# layui.each(item.subtasks,function(index1,item1){ }}
	{{# if(index1>0){ }}
	<tr>
		<td align="center">
			{{item1.subtask}}
		</td>
		<td align="center">
			{{item1.demand}}
		</td>
		<td align="center">
			{{item1.theoryHour}}
		</td>
		<td align="center">
			{{item1.practiceHour}}
		</td>
	</tr>
	{{# } }}
	{{# }); }}
	{{# }); }}
</script>

 

		var urlsubtask = '/subtask/subTask/list';
				var dones = function(success, message, data) {
					var subtasks = data.records;
					for(var j=0;j<contents.length;j++){
						var id = contents[j].id;
						var list = new Array();
						for(var i=0;i<subtasks.length;i++){
							var contentId = subtasks[i].contentId;
							if(id==contentId){
								list.push(subtasks[i]);
							}
						}
						if(list==''||list==null){
							list.push({"subtask":' ',"demand":' ',"theoryHour":' ',"practiceHour":' '});
						}
						contents[j].subtasks = list;
					}
					console.log(contents);
					var ds = {
					'list': contents
				};
					renderMod(contentlist, 'contents', ds);
				}
				layui.syReqUtil.sendAjaxByParams(urlsubtask, "GET", {}, dones);

表格里嵌套表格和复杂表头

	<tr>
					<td colspan="8">						
						
						<table class="layui-table" id="subtasks">
							<colgroup>
								<col width="4%">
								<col width="26%">
								<col width="27%">
								<col width="27%">
								<col width="8%">
								<col width="8%">
							</colgroup>
							<tr>
								<td rowspan="2" align="center">序号</td>
								<td rowspan="2" align="center">教学内容</td>
								<td rowspan="2" align="center">子情境/子项目/子任务</td>
								<td rowspan="2" align="center">知识、技能内容与要求</td>
								<td colspan="2" align="center">参考学时</td>
							</tr>
							<tr>
								<td align="center">理论</td>
								<td align="center">实训</td>
							</tr>
							<tbody id="contents">
							</tbody>
						</table>
					</td>
				</tr>

css  绝对定位配合z-index，再也不担心它乱跑了

img
	{
	position:absolute;
	right:36%;
	top:0px;
	z-index:2;
	width: 70px;
	height: 70px;
	}

代码： 

<style type="text/css">
	.layui-table td,
	.layui-table th {
		border: none;
	}
	
	#subtasks td {
		border: 1px solid #000;
	}
	
	#subtasks,
	#assess {
		margin-top: -10px;
		color: #000000;
	}
	
	html body {
		margin-top: 0;
	}
	
	.layui-table tbody tr:hover,
	.layui-table thead tr,
	.layui-table-click,
	.layui-table-header,
	.layui-table-hover,
	.layui-table-mend,
	.layui-table-patch,
	.layui-table-tool,
	.layui-table[lay-even] tr:nth-child(even) {
		background-color: transparent;
	}
	img
	{
	position:absolute;
	right:36%;
	top:0px;
	z-index:2;
	width: 70px;
	height: 70px;
	}
  @media print
	{
	  .layui-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>
<div class="layui-card">
	<div style="border-style: none;">
		<script type="text/html" template lay-done="layui.data.done(d);">
		</script>
		<img src="../../../layui-assign/dist/style/images/printBtn.png" id="img" />					
		<table class="layui-table" style="width:45%;color: #000;margin: auto;" id="all">
			<colgroup>
				<col width="12.5%">
				<col width="12.5%">
				<col width="12.5%">
				<col width="12.5%">
				<col width="12.5%">
				<col width="12.5%">
				<col width="12.5%">
				<col width="12.5%">
			</colgroup>
			<tbody id="table">
				<tr>
					<td colspan="8" align="center" style="border-style:none;font-size: 20px;">
						浙江同济科技职业学院<br /> 《<span id="title"></span>》课程标准
					</td>
				</tr>
				<tr>
					<td colspan="8" style="font-size: 15px;font-weight: 600;">课程基本信息</td>
				</tr>
				<tr>
					<td style="border: 1px solid #000;" align="center">课程编码</td>
					<td colspan="2" style="border: 1px solid #000;" align="center" id="courseNo"></td>
					<td style="border: 1px solid #000;" align="center">课程名称</td>
					<td style="border: 1px solid #000;" align="center" id="courseName"></td>
					<td colspan="2" style="border: 1px solid #000;" align="center">课程性质</td>
					<td style="border: 1px solid #000;" align="center" id="courseNature"></td>
				</tr>
				<tr>
					<td style="border: 1px solid #000;" align="center">学分</td>
					<td style="border: 1px solid #000;" align="center" id="credit"></td>
					<td style="border: 1px solid #000;" align="center">总学时</td>
					<td style="border: 1px solid #000;" align="center" id="totalHour"></td>
					<td style="border: 1px solid #000;" align="center">理论学时</td>
					<td style="border: 1px solid #000;" align="center" id="theoryHour"></td>
					<td style="border: 1px solid #000;" align="center">实践学时</td>
					<td style="border: 1px solid #000;" align="center" id="practiceHour"></td>
				</tr>
				<tr>
					<td style="border: 1px solid #000;" align="center">适用专业</td>
					<td colspan="7" style="border: 1px solid #000;" align="center" id="suitSub"></td>
				</tr>
				<tr>
					<td colspan="8" style="font-size: 15px;font-weight: 600;">一、前言</td>
				</tr>
				<tr>
					<td colspan="8" style="font-size: 15px;">1、课程性质</td>
				</tr>
				<tr>
					<td colspan="8" id="natureOverview">
						
					</td>
				</tr>
				<tr>
					<td colspan="8" style="font-size: 15px;">2、设计思路</td>
				</tr>
				<tr>
					<td colspan="8" id="designIdea">
						
					</td>
				</tr>
				<tr>
					<td colspan="8" style="font-size: 15px;font-weight: 600;">
						二、课程教学目标
					</td>
				</tr>
				<tr>
					<td colspan="8" style="font-size: 15px;">1、能力目标</td>
				</tr>
				<tr>
					<td colspan="8" id="abilityGoal">
						
					</td>
				</tr>
				<tr>
					<td colspan="8" style="font-size: 15px;">2、知识目标</td>
				</tr>
				<tr>
					<td colspan="8" id="knowledgeGoal">
						
					</td>
				</tr>
				<tr>
					<td colspan="8" style="font-size: 15px;">3、素质目标</td>
				</tr>
				<tr>
					<td colspan="8" id="qualityGoal">
						
					</td>
				</tr>
				<tr>
					<td colspan="8" style="font-size: 15px;">4、职业资格证书目标（选填）</td>
				</tr>
				<tr>
					<td colspan="8" id="certificateGoal">
						
					</td>
				</tr>
				<tr>
					<td colspan="8" style="font-size: 15px;font-weight: 600;">三、课程的主要内容与要求</td>
				</tr>
				<tr>
					<td colspan="8">
						&nbsp;&nbsp;课程内容和要求是根据课程目标对本课程主要内容进行设计。请将达到课程目标应当完成的主要教学内容和要求填写在下表中：
					</td>
				</tr>
				<tr>
					<td colspan="8">						
						
						<table class="layui-table" id="subtasks">
							<colgroup>
								<col width="4%">
								<col width="26%">
								<col width="27%">
								<col width="27%">
								<col width="8%">
								<col width="8%">
							</colgroup>
							<tr>
								<td rowspan="2" align="center">序号</td>
								<td rowspan="2" align="center">教学内容</td>
								<td rowspan="2" align="center">子情境/子项目/子任务</td>
								<td rowspan="2" align="center">知识、技能内容与要求</td>
								<td colspan="2" align="center">参考学时</td>
							</tr>
							<tr>
								<td align="center">理论</td>
								<td align="center">实训</td>
							</tr>
							<tbody id="contents">
							</tbody>
						</table>
					</td>
				</tr>
				<tr>
					<td colspan="8" style="font-size: 15px;font-weight: 600;">四、课程实施建议</td>
				</tr>
				<tr>
					<td colspan="8" style="font-size: 15px;">1、教材的开发与选用</td>
				</tr>
				<tr>
					<td colspan="8" id="textbookSelection">
						
					</td>
				</tr>
				<tr>
					<td colspan="8" style="font-size: 15px;">2、教学资源的要求与利用</td>
				</tr>
				<tr>
					<td colspan="8" id="resourceUsage">
						
					</td>
				</tr>
				<tr>
					<td colspan="8" style="font-size: 15px;">3、教学建议</td>
				</tr>
				<tr>
					<td colspan="8" id="suggest">
						
					</td>
				</tr>
				<tr>
					<td colspan="8" style="font-size: 15px;">4、评价方式</td>
				</tr>
				<tr>
					<td colspan="8">
						<table class="layui-table" id="assess">
							<tr>
								<td colspan="8" style="font-size: 14px;">4.1&nbsp;考核办法与所占权重</td>
							</tr>
							<tr>
								<td colspan="8" id="accessmentMethod">
									
								</td>
							</tr>
							<tr>
								<td colspan="8" style="font-size: 14px;">4.2&nbsp;考核要点与权重分配</td>
							</tr>
							<tr>
								<td colspan="8" id="weightAssignment">
									
								</td>
							</tr>
							<tr>
								<td colspan="8" style="font-size: 14px;">4.3&nbsp;成绩评定</td>
							</tr>
							<tr>
								<td colspan="8" id="gradeAssess">
									
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
<script type="text/html" id="contentlist">
	{{# layui.each(d.list,function(index,item){ }}
	<tr>
		<td rowspan="{{item.subnum}}" align="center">
			{{index + 1}}
		</td>
		<td rowspan="{{item.subnum}}" align="center">
			{{item.content}}
		</td>
		<td align="center">
			{{item.subtasks[0].subtask}}
		</td>
		<td align="center">
			{{item.subtasks[0].demand}}
		</td>
		<td align="center">
			{{item.subtasks[0].theoryHour}}
		</td>
		<td align="center">
			{{item.subtasks[0].practiceHour}}
		</td>
	</tr>
	{{# layui.each(item.subtasks,function(index1,item1){ }}
	{{# if(index1>0){ }}
	<tr>
		<td align="center">
			{{item1.subtask}}
		</td>
		<td align="center">
			{{item1.demand}}
		</td>
		<td align="center">
			{{item1.theoryHour}}
		</td>
		<td align="center">
			{{item1.practiceHour}}
		</td>
	</tr>
	{{# } }}
	{{# }); }}
	{{# }); }}
</script>

<script>
	layui.data.done = function(d) {
		layui.use(['form', 'syFormUtil', 'syTableUtil', 'syCrudUtil', 'syDialogUtil', 'syTableSelectUtil', 'syCommonUtil', 'laytpl'], function() {
			var $ = layui.$;
			var laytpl = layui.laytpl;
			var form = layui.form;
			var urlstr = decodeURI(window.location.href);
			var id = urlstr.split("id=")[1];
			
			var url = '/course/courseResult/' + id;
			var done = function(success, message, data) {
				var abilityGoal= data.abilityGoal;
				var accessmentMethod= data.accessmentMethod;
				var certificateGoal= data.certificateGoal;
				var courseName= data.courseName;
				var courseNature= data.courseNature_Text;
				var natureOverview = data.natureOverview;
				var courseNo= data.courseNo;
				var credit= data.credit;
				var contents = data.contents;
				var designIdea= data.designIdea;
				var gradeAssess= data.gradeAssess;
				var knowledgeGoal= data.knowledgeGoal;
				var practiceHour= data.practiceHour;
				var qualityGoal= data.qualityGoal;
				var resourceUsage= data.resourceUsage;
				var suggest= data.suggest;
				var suitSub= data.suitSub_Text;
				var textbookSelection= data.textbookSelection;
				var theoryHour= data.theoryHour;
				var totalHour= data.totalHour;
				var weightAssignment= data.weightAssignment;
				$("#title").text(courseName);
				$("#courseName").text(courseName);
				$("#courseNo").text(courseNo);
				$("#courseNature").text(courseNature);
				$("#credit").text(credit);
				$("#totalHour").text(totalHour);
				$("#practiceHour").text(practiceHour);
				$("#theoryHour").text(theoryHour);
				$("#suitSub").text(suitSub);
				$("#natureOverview").text(natureOverview);
				$("#designIdea").text(designIdea);
				$("#abilityGoal").text(abilityGoal);
				$("#knowledgeGoal").text(knowledgeGoal);
				$("#qualityGoal").text(qualityGoal);
				$("#certificateGoal").text(certificateGoal);
				$("#textbookSelection").text(textbookSelection);
				$("#resourceUsage").text(resourceUsage);
				$("#suggest").text(suggest);
				$("#accessmentMethod").text(accessmentMethod);
				$("#weightAssignment").text(weightAssignment);
				$("#gradeAssess").text(gradeAssess);			
				
				
				var urlsubtask = '/subtask/subTask/list';
				var dones = function(success, message, data) {
					var subtasks = data.records;
					for(var j=0;j<contents.length;j++){
						var id = contents[j].id;
						var list = new Array();
						for(var i=0;i<subtasks.length;i++){
							var contentId = subtasks[i].contentId;
							if(id==contentId){
								list.push(subtasks[i]);
							}
						}
						if(list==''||list==null){
							list.push({"subtask":' ',"demand":' ',"theoryHour":' ',"practiceHour":' '});
						}
						contents[j].subtasks = list;
					}
					console.log(contents);
					var ds = {
					'list': contents
				};
					renderMod(contentlist, 'contents', ds);
				}
				layui.syReqUtil.sendAjaxByParams(urlsubtask, "GET", {}, dones);
			}
			layui.syReqUtil.sendAjaxByParams(url, 'GET', {}, done);
			
			$('#img').click(function() {
				$("#img").hide();
				$("#all").css("width","85%");
				window.print();
				$("#all").css("width","45%");
				$("#img").show();
			})


						function renderMod(sid, id, data) {
							var getTpl = sid.innerHTML,
								view = document.getElementById(id);
							laytpl(getTpl).render(data, function(html) {
								view.innerHTML = html;
							});
							form.render();
						}

		});
	}
</script>

 

 

 

qqandpinecone
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html大段文本如何分页,打印大型HTML表时如何处理分页符
weixin_42535720的博客
06-18 936
回答(11)3 years agoTesttable { page-break-inside:auto }tr { page-break-inside:avoid; page-break-after:auto }thead { display:table-header-group }tfoot { display:table-footer-group }headingnotesxxx3 ye...
html 将table中选中行的数据直接打印在表单中（一般在修改信息用到）
DesireForPower的博客
09-21 394
这是table表： <el-table ref="multipleTable" :data="page.list" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-colu
打印屏蔽部分内容window.print()
小贝de
07-20 676
var bdhtml=window.document.body.innerHTML; var sprnstr="<!--startprint-->"; //开始打印标识字符串有17个字符 var eprnstr="<!--endprint-->"; //结束打印标识字符串 var prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //从开始打印标识之后的内容 prnhtml=prnhtml.substring(0,prnh.
纯html的table打印注意事项
weixin_34064653的博客
08-27 707
1. 在firefox下，每页均会打印重复thead（表头），tfoot（表尾）的内容；IE8下无效(其它IE版本未测试) 2. 分页的处理     @media print {     .page-break { page-break-after: always; }   } 在需要分页的tr上，加上该样式即可 3.隐藏某些不需要打印的区域     @media print {    ...
HTML 打印table分页
Yxh_255的博客
03-13 998
html打印table分页
HTML 表格打印
Done
09-29 471
打印web页面时，表格线设置有些不一样，否则打印出来的表格可能要么变粗，要么不显示。没有样式处理前的表格： &lt;table border="1" cellpadding="3" cellspacing="0" width="100%" bgcolor="#ffffff" &gt; &lt;tr&gt; &lt;td widt
Web Html 分页、表格跨页断裂处理、自定义页眉页脚页码打印控件
10-11
Web打印控件，完美解决以下HTML打印难题 1.Web Html 分页打印 2.内容、图片、表格跨页断裂，封边 3.table并行、并列双边、重边 4.自动计算页码（总数及每一页），样式、位置、形式完全个性化 5.页眉页脚，去除浏览...
使用jsoup解析html的table中的文本信息实例
10-18
在本文中，我们将深入探讨如何使用Jsoup这个Java库来解析HTML文档，特别是提取HTML表格（table）中的文本信息。Jsoup是一个强大的库，它提供了方便的API来处理HTML，包括解析、查找、修改和输出HTML内容。让我们通过...
js table导出以及打印
06-03
该插件可以将Html的表格导出成为 JSON, XML, CSV, TSV, TXT, SQL, Word, Excel, PNG...在项目上遇到pdf导出中文乱码问题，经过一天的研究修改了一些js代码解决了pdf导出中文乱码问题，随便融入了一个html打印功能的js.
打印table表格数据
10-25
标题"打印table表格数据"和描述中的内容揭示了一个资源包，它提供了实现这一功能的方法。资源包包括一个打印页面和两个JavaScript（js）文件，这表明它依赖于前端技术来处理表格的打印工作。 首先，我们来看“打印...
jquery打印HTML表格自动分页
05-14
采用JQuery实现的打印HTML表格自动按多少行分页，打印时分页
html页面实现数据打印效果
11-21
html页面实现生成数据调用打印机打印，通过后台传送json数据，前端js生成表格化样式，最后连接打印机即可
C#中HTML转PDF Pechkin
10-27
这个版本解决了在web项目使用时生成一次pdf后就锁住的问题
深入解析HTML的table表格标签与相关的换行问题
09-28
在HTML中，`<table>`标签用于创建表格，它是网页布局和展示数据的重要工具。表格由多个组成部分构成，包括`<tr>`（表格行）、`<th>`（表头单元格）和`<td>`（数据单元格）。在处理表格时，换行问题是一个常见的挑战...
html打印table，分页时每页都有表头，表头的高度和行数有限制吗
期待变成大神的博客
07-14 860
当表头有5行时，分页正常，如下图 当表头有6行时，分页时第二有人就没有表头了，如下图 把其中一行删掉，或者内容置空就是正常的，这是行数有限制吗？望大神们不吝赐教
vue+antd——实现table表格的打印——分页换行，每页都有表头——基础积累
yehaocheng520的博客
09-08 2721
vue+antd——实现table表格的打印——分页换行，每页都有表头——基础积累
浏览器打印复杂表格
snowball的博客
09-04 1173
一、需求 1.1、实现如图所示内容的打印 1.2、打印内容分析： 1.2.1、包括：1、页眉；2、页脚；3、表头；4、合并行；5、合并列；6、分页； 二、print.js 1、html打印 2、iframe打印 // 打印内容--可以直接使用 /** * @des 打印的方法 * @param {[String|Object]} body require true * @param {Array} styleList require false 样式 * @param {Stri
分享一个简单好看的html的表格table（个人简历的html表格），vue table，以及vue打印（简单好用的vue打印插件）
新林的博客
01-02 6505
想写一个很普通的那种word文档样式的table，发现网上很多都是什么教程，没有合适的，我只想要一个拿来就能用的html的table，没有什么别的依赖，而且样式要很普通的简单的表格。既然没有合适的，那我分享一个。以及记录一下在vue里面如何让浏览器弹出打印框打印这个表格table（一个在git上发现的好用的打印插件，不用install进项目，直接存一个js文件就能用，简单好用的vue打印插件）。下面代码粘贴出来另存为html文件就能直接用，没有别的依赖，先看效果图
table表格打印断页时自动分页的实现方法
SDN233的博客
12-29 3342
利用 css样式和 th 标签占位的方法解决自动分页后每页底部会出现一条横线的问题。先做一个表头、表尾自动分页后，在后一页会自动加到表格头部和尾部的例子。解决的方法是在thead的tr中加入th标签占位和利用css样式解决，直接上代码。有时候table表格打印的时候会遇到 自动分页时每页最底部有一根横线。其实还是利用 thead 标签实现自动分页的效果，直接上代码吧。接下来写一个没有表头和表尾的表格打印，内容自动分页的实现方法。完美解决自动分页后底部出现横线的问题。table表格打印自动分页的实现思路。
el-table 打印
最新发布
10-18
如果您想在 el-table 中打印数据，可以使用 el-table 的 $refs 属性获取到 el-table 组件的实例，然后调用其 $el.outerHTML 方法将表格转换为 HTML 字符串，再使用 window.print() 方法进行打印。 示例代码如下： ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值