<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Make PDF</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
body {
background-image: linear-gradient(to right, rgb(54, 53, 53), rgb(67, 67, 88), rgb(76, 98, 119));
color: black;
font-weight: 600;
}
.main {
width: 960px;
/* height:480px; */
margin: 0px auto;
margin-top: 20px;
padding: 10px;
text-align: center;
background-image: linear-gradient(to bottom, white, rgb(219, 219, 221));
border-radius: 10px;
overflow: hidden;
box-shadow: 2px 2px 8px #fff;
}
.body {
width: 95%;
height: 480px;
padding-top: 40px;
}
.tempTr1 td {
text-align: center;
}
table tr td {
padding: 5px;
}
.buttonBox {
width: 960px;
height: 480px;
margin: 0px auto;
}
.buttonBox button {
padding: 5px;
background-color: #888888;
color: #FFFFFF;
border: none;
border-radius: 5px;
cursor: pointer;
}
.tbodys:hover {
background-color: #e98d1d !important;
cursor: pointer;
font-size: 16px;
border: 2px solid #ffe4c4;
box-shadow: 2px 2px 10px #ffe4c4;
font-weight: 900;
}
.time {
margin-bottom: 10px;
}
.allInfoData {
width: 940px;
height: 70px;
border: 1px solid black;
border-top: none;
}
.allInfoData {
text-align: left;
}
.left {
width: 60px;
height: 70px;
border-right: 1px solid black;
font-size: 20px;
line-height: 70px;
margin-left: 20px;
}
.right {
position: relative;
top: -57px;
right: -105px;
text-align: left;
}
.content>span{
padding: 0 20px;
}
.contentOne>span{
padding: 0 20px;
}
</style>
</head>
<body>
<!-- 需要打印的pdf页面放在这里 -->
<div class="main">
<div style="font-weight:900;font-size
:24px">广东金立变速科技股份有限公司出勤明细表</div>
<div class="time">2020-05-01 至 2020-05-31</div>
<table border="1"
style="background-color: #ffe4c4; width: 100%; border-collapse: collapse;border-bottom: none;">
<tbead>
<tr>
<th>工号</th>
<th>0166</th>
<th>姓名</th>
<th>张请</th>
<th>部门</th>
<th>3FC</th>
<th>职务</th>
<th>员工</th>
<th>入职日期</th>
<th>2020-11-03</th>
</tr>
</thead>
</table>
<table border="1" style="width: 100%; border-collapse: collapse;background-color: #ffe4c4;">
<thead>
<tr>
<th>日期</th>
<th>星期</th>
<th>
<div
style="position: relative;left: 22px;border-bottom: 1px solid black;background-color:#ffe4c4;">
第一次</div>
上班
</th>
<th>
<div style="visibility: hidden;">d</div>
下班
</th>
<th>
<div
style="position: relative;left: 22px;border-bottom: 1px solid black;background-color: #ffe4c4;">
第二次</div>
上班
</th>
<th>
<div style="visibility: hidden;">d</div>
下班
</th>
<th>
<div
style="position: relative;left: 22px;border-bottom: 1px solid black;background-color: #ffe4c4;">
第三次</div>
上班
</th>
<th>
<div style="visibility: hidden;">d</div>
下班
</th>
<th>
<div
style="position: relative;left: 22px;border-bottom: 1px solid black;background-color: #ffe4c4;">
第四次</div>
上班
</th>
<th>
<div style="visibility: hidden;">d</div>
下班
</th>
<th>出勤</th>
<th>迟到</th>
<th>早退</th>
<th>旷工</th>
<th>请假</th>
<th>放假</th>
<th>
<div
style="position: relative;left: 45px;border-bottom: 1px solid black;background-color: #ffe4c4;">
加班时间</div>
平时
</th>
<th>
<div style="visibility: hidden;">d</div>
周末
</th>
<th>
<div style="visibility: hidden;">d</div>
法日
</th>
<th>工作</th>
<th>性质</th>
<th>班制</th>
</thead>
<tbody class="tbodys">
<tr class="tbodys">
<td>2020.11.21</td>
<td>周五</td>
<td>9</td>
<td>10</td>
<td>23</td>
<td>3</td>
<td>2</td>
<td>23</td>
<td>2</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>为</td>
<td>1</td>
<td>7</td>
<td>9</td>
<td>7</td>
<td>6</td>
<td>公休日</td>
</tr>
<tr class="tbodys">
<td>2020.11.21</td>
<td>周五</td>
<td>9</td>
<td>10</td>
<td>23</td>
<td>3</td>
<td>2</td>
<td>23</td>
<td>2</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>为</td>
<td>1</td>
<td>7</td>
<td>9</td>
<td>7</td>
<td>6</td>
<td>公休日</td>
</tr>
<tr class="tbodys">
<td>2020.11.21</td>
<td>周五</td>
<td>9</td>
<td>10</td>
<td>23</td>
<td>3</td>
<td>2</td>
<td>23</td>
<td>2</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>为</td>
<td>1</td>
<td>7</td>
<td>9</td>
<td>7</td>
<td>6</td>
<td>公休日</td>
</tr>
<tr class="tbodys">
<td>2020.11.21</td>
<td>周五</td>
<td>9</td>
<td>10</td>
<td>23</td>
<td>3</td>
<td>2</td>
<td>23</td>
<td>2</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>为</td>
<td>1</td>
<td>7</td>
<td>9</td>
<td>7</td>
<td>6</td>
<td>公休日</td>
</tr>
<tr class="tbodys">
<td>2020.11.21</td>
<td>周五</td>
<td>9</td>
<td>10</td>
<td>23</td>
<td>3</td>
<td>2</td>
<td>23</td>
<td>2</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>为</td>
<td>1</td>
<td>7</td>
<td>9</td>
<td>7</td>
<td>6</td>
<td>公休日</td>
</tr>
<tr class="tbodys">
<td>2020.11.21</td>
<td>周五</td>
<td>9</td>
<td>10</td>
<td>23</td>
<td>3</td>
<td>2</td>
<td>23</td>
<td>2</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>为</td>
<td>1</td>
<td>7</td>
<td>9</td>
<td>7</td>
<td>6</td>
<td>公休日</td>
</tr>
<tr class="tbodys">
<td>2020.11.21</td>
<td>周五</td>
<td>9</td>
<td>10</td>
<td>23</td>
<td>3</td>
<td>2</td>
<td>23</td>
<td>2</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>为</td>
<td>1</td>
<td>7</td>
<td>9</td>
<td>7</td>
<td>6</td>
<td>公休日</td>
</tr>
<tr class="tbodys">
<td>2020.11.21</td>
<td>周五</td>
<td>9</td>
<td>10</td>
<td>23</td>
<td>3</td>
<td>2</td>
<td>23</td>
<td>2</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>为</td>
<td>1</td>
<td>7</td>
<td>9</td>
<td>7</td>
<td>6</td>
<td>公休日</td>
</tr>
<tr class="tbodys">
<td>2020.11.21</td>
<td>周五</td>
<td>9</td>
<td>10</td>
<td>23</td>
<td>3</td>
<td>2</td>
<td>23</td>
<td>2</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>为</td>
<td>1</td>
<td>7</td>
<td>9</td>
<td>7</td>
<td>6</td>
<td>公休日</td>
</tr>
<tr class="tbodys">
<td>2020.11.21</td>
<td>周五</td>
<td>9</td>
<td>10</td>
<td>23</td>
<td>3</td>
<td>2</td>
<td>23</td>
<td>2</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>为</td>
<td>1</td>
<td>7</td>
<td>9</td>
<td>7</td>
<td>6</td>
<td>公休日</td>
</tr>
<tr class="tbodys">
<td>2020.11.21</td>
<td>周五</td>
<td>9</td>
<td>10</td>
<td>23</td>
<td>3</td>
<td>2</td>
<td>23</td>
<td>2</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>为</td>
<td>1</td>
<td>7</td>
<td>9</td>
<td>7</td>
<td>6</td>
<td>公休日</td>
</tr>
<tr class="tbodys">
<td>2020.11.21</td>
<td>周五</td>
<td>9</td>
<td>10</td>
<td>23</td>
<td>3</td>
<td>2</td>
<td>23</td>
<td>2</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>为</td>
<td>1</td>
<td>7</td>
<td>9</td>
<td>7</td>
<td>6</td>
<td>公休日</td>
</tr>
<tr class="tbodys">
<td>2020.11.21</td>
<td>周五</td>
<td>9</td>
<td>10</td>
<td>23</td>
<td>3</td>
<td>2</td>
<td>23</td>
<td>2</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>为</td>
<td>1</td>
<td>7</td>
<td>9</td>
<td>7</td>
<td>6</td>
<td>公休日</td>
</tr>
<tr class="tbodys">
<td>2020.11.21</td>
<td>周五</td>
<td>9</td>
<td>10</td>
<td>23</td>
<td>3</td>
<td>2</td>
<td>23</td>
<td>2</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>为</td>
<td>1</td>
<td>7</td>
<td>9</td>
<td>7</td>
<td>6</td>
<td>公休日</td>
</tr>
<tr class="tbodys">
<td>2020.11.21</td>
<td>周五</td>
<td>9</td>
<td>10</td>
<td>23</td>
<td>3</td>
<td>2</td>
<td>23</td>
<td>2</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>为</td>
<td>1</td>
<td>7</td>
<td>9</td>
<td>7</td>
<td>6</td>
<td>公休日</td>
</tr>
<tr class="tbodys">
<td>2020.11.21</td>
<td>周五</td>
<td>9</td>
<td>10</td>
<td>23</td>
<td>3</td>
<td>2</td>
<td>23</td>
<td>2</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>为</td>
<td>1</td>
<td>7</td>
<td>9</td>
<td>7</td>
<td>6</td>
<td>公休日</td>
</tr>
<tr class="tbodys">
<td>2020.11.21</td>
<td>周五</td>
<td>9</td>
<td>10</td>
<td>23</td>
<td>3</td>
<td>2</td>
<td>23</td>
<td>2</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>为</td>
<td>1</td>
<td>7</td>
<td>9</td>
<td>7</td>
<td>6</td>
<td>公休日</td>
</tr>
<tr class="tbodys">
<td>2020.11.21</td>
<td>周五</td>
<td>9</td>
<td>10</td>
<td>23</td>
<td>3</td>
<td>2</td>
<td>23</td>
<td>2</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>为</td>
<td>1</td>
<td>7</td>
<td>9</td>
<td>7</td>
<td>6</td>
<td>公休日</td>
</tr>
</tbody>
</table>
<div class="allInfoData">
<div class="left">合计
</div>
<div class="right">
<div class="content"> <span>出勤天数20</span>
<span>工作小时180</span>
<span>平时加班0</span>
<span>周末加班0</span>
<span>法日加班0</span>
<span>总加班0</span></div>
</div>
</div>
</div>
<div class="buttonBox">
<button onclick="pdfDo()">导出PDF</button>
<div style="color: red;font-weight: 500;font-size: 12px;">温馨提示:当数据错乱或导出文件失败时请切换浏览器!</div>
</div>
</body>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>
<script>
// 导出pdf
function pdfDo() {
var isDo = confirm("确定导出pdf页面");
if (!isDo) { return; }
var target = document.getElementsByClassName("main")[0];
target.style.backgroundImage = "#FFFFFF";
html2canvas(target, {
onrendered: function (canvas) {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth / 592.28 * 841.89;
//未生成pdf的html页面高度
var leftHeight = contentHeight;
//页面偏移
var position = 0;
//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
var imgWidth = 595.28;
var imgHeight = 592.28 / contentWidth * contentHeight;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
var pdf = new jsPDF('', 'pt', 'a4');
//有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围,无需分页
if (leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
} else {
while (leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白页
if (leftHeight > 0) {
pdf.addPage();
}
}
}
pdf.save("pdf_file_name.pdf");
}
})
}
// 隔行变色
function selectColor() {
var tbodys = document.getElementsByClassName('tbodys')
for (var i = 0; i < tbodys.length; i++) {
var j = i + 1;
if (j % 2 === 0) {
tbodys[i].style.backgroundColor = '#e2dad0';
} else {
tbodys[i].style.background = '#ffff'
}
}
};
selectColor()
</script>
</html>
JavaScript生成表格PDF
最新推荐文章于 2024-03-01 11:38:31 发布