layui打印html页面转成pdf
Posted 杨治中
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了layui打印html页面转成pdf相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" type="text/css" href="lib/layui/css/layui.css"/>
<script src="lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script language="javascript">
function preview(oper)
if (oper < 10)
bdhtml=window.document.body.innerHTML;//获取当前页的html代码
sprnstr="<!--startprint"+oper+"-->";//设置打印开始区域
eprnstr="<!--endprint"+oper+"-->";//设置打印结束区域
prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html
window.document.body.innerHTML=prnhtml;
window.print();
window.document.body.innerHTML=bdhtml;
else
window.print();
</script>
<!--打印-->
</head>
<body>
<style type="text/css">
.layui-tab-item
margin-top: 100px;
.layui-this
background-color: orange;
</style>
<div class="layui-tab">
<ul class="layui-tab-title">
<li class="layui-this">
<table border="1" align="center" id="informationtable">
<tr>
<th>年龄1</th>
<th>身高</th>
<th>体重</th>
<th>疾病史</th>
</tr>
<tr>
<td>61岁 </td>
<td>161cm</td>
<td>61kg</td>
<td>高血压、糖尿病</td>
</tr>
</table>
</li>
<!--标签1-->
<li>
<table border="1" align="center" id="informationtable">
<tr>
<th>年龄2</th>
<th>身高</th>
<th>体重</th>
<th>疾病史</th>
</tr>
<tr>
<td>61岁 </td>
<td>161cm</td>
<td>61kg</td>
<td>高血压、糖尿病</td>
</tr>
</table>
</li>
<!--标签2-->
<li>
<table border="1" align="center" id="informationtable">
<tr>
<th>年龄2</th>
<th>身高</th>
<th>体重</th>
<th>疾病史</th>
</tr>
<tr>
<td>61岁 </td>
<td>161cm</td>
<td>61kg</td>
<td>高血压、糖尿病</td>
</tr>
</table>
</li>
<!--标签3-->
<li>
<table border="1" align="center" id="informationtable">
<tr>
<th>年龄2</th>
<th>身高</th>
<th>体重</th>
<th>疾病史</th>
</tr>
<tr>
<td>61岁 </td>
<td>161cm</td>
<td>61kg</td>
<td>高血压、糖尿病</td>
</tr>
</table>
</li>
<li>
<!--标签4-->
<table border="1" align="center" id="informationtable">
<tr>
<th>年龄2</th>
<th>身高</th>
<th>体重</th>
<th>疾病史</th>
</tr>
<tr>
<td>61岁 </td>
<td>161cm</td>
<td>61kg</td>
<td>高血压、糖尿病</td>
</tr>
</table>
</li>
<!--标签5-->
</ul>
<!--startprint1-->
<!--打印内容开始-->
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<table border="1" align="center" id="informationtable">
<tr>
<th>年龄1</th>
<th>身高</th>
<th>体重</th>
<th>疾病史</th>
</tr>
<tr>
<td>61岁 </td>
<td>161cm</td>
<td>61kg</td>
<td>高血压、糖尿病</td>
</tr>
</table>
</div>
<!--对应1-->
<div class="layui-tab-item"><table border="1" align="center" id="informationtable">
<tr>
<th>年龄2</th>
<th>身高</th>
<th>体重</th>
<th>疾病史</th>
</tr>
<tr>
<td>61岁 </td>
<td>161cm</td>
<td>61kg</td>
<td>高血压、糖尿病</td>
</tr>
</table></div>
<!--对应2-->
<div class="layui-tab-item"><table border="1" align="center" id="informationtable">
<tr>
<th>年龄3</th>
<th>身高</th>
<th>体重</th>
<th>疾病史</th>
</tr>
<tr>
<td>61岁 </td>
<td>161cm</td>
<td>61kg</td>
<td>高血压、糖尿病</td>
</tr>
</table></div>
<!--对应3-->
<div class="layui-tab-item"><table border="1" align="center" id="informationtable">
<tr>
<th>年龄4</th>
<th>身高</th>
<th>体重</th>
<th>疾病史</th>
</tr>
<tr>
<td>61岁 </td>
<td>161cm</td>
<td>61kg</td>
<td>高血压、糖尿病</td>
</tr>
</table></div>
<!--对应4-->
<div class="layui-tab-item"><table border="1" align="center" id="informationtable">
<tr>
<th>年龄5</th>
<th>身高</th>
<th>体重</th>
<th>疾病史</th>
</tr>
<tr>
<td>61岁 </td>
<td>161cm</td>
<td>61kg</td>
<td>高血压、糖尿病</td>
</tr>
</table></div>
<!--对应5-->
</div>
<!--打印内容结束-->
<!--endprint1-->
</div>
<div class="layui-inline" title="打印" onclick=preview(1) ><i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i></div>
<!-- <input type=button name='button_export' title='打印' onclick=preview(1) value=打印1>-->
<script>
layui.use('element', function()
var element = layui.element;
);
</script>
</body>
</html>
以上是关于layui打印html页面转成pdf的主要内容，如果未能解决你的问题，请参考以下文章