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的更多相关文章
- Microsoft.Office.Interop.Excel的用法以及利用Microsoft.Office.Interop.Excel将web页面转成PDF
1.常见用法 using Microsoft.Office.Interop.Excel; 1)新建一个Excel ApplicationClass ExcelApp = New A ...
- 利用Microsoft.Office.Interop.Excel 将web页面转成PDF
网上有很多将Web页面转成PDF的方法,还有许多收费的第三方插件.其实利用Office 自带的将EXCEL发布成PDF的功能就可以实现,如果你的需求没有多复杂,可以采用笔者的方法. 首先将web页面h ...
- 【jsPDF】jsPDF插件实现将html页面转换成PDF,并下载,支持分页
1.目的:在前段是 jQuery库 或者 VUE库 或者两者混合库,将html 页面和数据 转换成PDF格式并下载,支持分页 1.项目背景: 对客户报修记录进行分类统计,并生成各种饼图.柱状图.线性图 ...
- html页面转换成pdf
一般页面都是.jsp页面,所以要把.jsp转换成html,在生成pdf,在网上找了好多方法,只有用一个插件,wkhtmltopdf-0.8.3.exe,生成的pdf会相对的好看. 先附上我做的.jsp ...
- 使用JavaScript将当前页面保存成PDF,支持图片和文字的保存
前端开发的朋友们可能会遇到这个需求:将您负责开发的网页的全部内容,包括文字和图片,一起保存成一个PDF文件.如果采用屏幕截图的话,默认Windows操作系统的截图按钮无法完整截取超过一屏幕的屏幕内容. ...
- 利用itext将html页面转成pdf(不模糊)
1.maven项目进入依赖 <dependency> <groupId>org.xhtmlrenderer</groupId> <artifactId> ...
- vue将页面导出成pdf
npm i jspdf-html2canvas prinOut(){ // 导出pdf let page = document.querySelector('.app-main'); // page ...
- Vue 页面导出成PDF文件
注意事项 如果导出的页面中设计到图片或者其他文件跨域文件,需要后端服务配合 安装依赖 npm install html2Canvas --save npm install jspdf--save 封装 ...
- html 转成 pdf 进行预览、下载、打印
html 页面转成 pdf,直接看代码: 参考地址: https://github.com/linwalker/render-html-to-pdf 给出代码 方便粘贴: var downPdf = ...
随机推荐
- IDEA 简单的正则匹配
IDEA在进行查看或替换的时候,勾选Regex 选项就可以进行正则匹配查找了 几个简单实用的正则: 以什么开头,以什么结尾的字符串 以aa开头,以bb结尾的字符串aa.*bb 从开头到某个字符串为止的 ...
- mysql 0x80004005 unable to connect to any of the specified mysql hosts
语言:c# 问题:偶尔会出现连不上mysql 报标题的这个错误. 解决方法:把server = localhost 改为 =127.0.0.1 或者静态IP ,按着改暂时没出现了,继续观望!
- 【支付宝】"验签出错,sign值与sign_type参数指定的签名类型不一致:sign_type参数值为RSA,您实际用的签名类型可能是RSA2"
问题定位:从描述就可以看的出来了,你现在sign_type是 RSA类型的,要改成跟你现在用的签名类型一致的类型,也就是 要改为 RSA2 PHP为例 // 新版只支持此种签名方式 商户生成签名字符 ...
- 【HDU - 4341】Gold miner(分组背包)
BUPT2017 wintertraining(15) #8B 题意 给出每个黄金的坐标.价值及耗时,同一方向的黄金只能依次取,求T时间内收获的最大值. 题解 同一方向,物品前缀和构成的组合,相当于是 ...
- Educational Codeforces Round 33 (Rated for Div. 2) F. Subtree Minimum Query(主席树合并)
题意 给定一棵 \(n\) 个点的带点权树,以 \(1\) 为根, \(m\) 次询问,每次询问给出两个值 \(p, k\) ,求以下值: \(p\) 的子树中距离 \(p \le k\) 的所有点权 ...
- Luogu P5285 / LOJ3050 【[十二省联考2019]骗分过样例】
伪提答害死人...(出题人赶快出来挨打!!!) 虽说是考场上全看出来是让干嘛了,然而由于太菜以及不会打表所以GG了,只拿了\(39\)... 经测试,截至\(2019.4.18-11:33\),这份接 ...
- SSH防暴力破解脚本
crontab -e 编辑添加一下内容 1 1 * * * sh /root/bin/Denyhosts.sh 脚本内容 #!/bin/bash #Denyhosts SHELL SCRIPT #20 ...
- MVC aspx
客户端服务器---Model(模型)---View(视图)---Control(控制器) 1.ASP.NET MVC 2.新建项目引擎选aspx.在Controllers创建控制器,默认启动Home ...
- Django(十)COOKIE和session
https://www.cnblogs.com/haiyan123/p/7763169.html from django.shortcuts import render,redirect # Crea ...
- linux less对文件内容进行搜索
[ 可以先用 less 文件名 来打开文件, 然后可以按回车,打开底部命令输入行(即出现一个冒号的位置), 然后可以使用 键盘上的 home 键跳到文件开始,end键跳到最后,PgUp向前翻页,Pg ...