Man of few words said, directly on the source code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jsPDF</title>
<!--<script type="text/javascript" src="js/jquery.min.js"></script>-->
<!--<script type="text/javascript" src="js/jsPDF/dist/jspdf.min.js"></script>-->
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
<script src="http://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<style>
*{
padding: 0;
margin: 0;
}
#pdf-content{
width: 80%;
height: 100%;
margin: auto;
}
.table-controller table{
margin-left: 10px;
width: 98%;
border-collapse: collapse;
}
.table-controller table tr td{
height: 60px;
border: 1px solid #0d152a;
width: 300px;
text-align: center;
}
#pdf-content .title{
text-align: center;
padding: 20px 0;
}
#pdf-content .table-time{
text-align: right;
padding-right: 10px;
padding-bottom: 10px;
}
.form-control{
width: 98%;
height: 100%;
border: none;
padding-left: 40px;
font-size: 18px;
}
</style>
</head>
<body>
<div id="pdf-content">
<div class="title">
<H2> Membership Application </ h2> table
</div>
<div class="table-time"><p>填表日期： 年 月 日</p></div>
<div class="table-controller">
<table>
<tr>
<Td> Application Name </ td>
<td colspan="3"></td>
</tr>
<tr>
<Td> Address </ td>
<td colspan="3"></td>
</tr>
<tr>
<Td> ZIP </ td>
<td></td>
<Td> e-mail </ td>
<td></td>
</tr>
<tr>
<Td> The total number of employees </ td>
<td></td>
<Td> turnover </ td>
<td></td>
</tr>
<tr>
<Td> legal representative Name </ td>
<td></td>
<Td> cell phone </ td>
<td></td>
</tr>
<tr>
<Td> Contact Name </ td>
<td></td>
<Td> Position </ td>
<td></td>
</tr>
<tr>
<Td> Tel (mobile phones) </ td>
<td></td>
<Td> mailbox </ td>
<td></td>
</tr>
<tr>
<Td> Applicant commitment </ td>
<td colspan="3">
<H3> solemn commitment: This unit will abide by the articles of association members, to fulfill obligations, abide by the principles of honesty and trustworthiness, to ensure real and effective materials provided. </ H3>
<br/>
<br/>
<P> legal signature (seal cap): </ p>
</td>
</tr>
<tr>
<TD colspan = " . 4 " > <H3> the following three ways recommended to choose one: </ h3> </ td >
</tr>
<tr>
<td>
<h3> (-) </ h3> or above the county civil affairs department or opinions Funeral Association
</ td>
<td colspan="3">
<br/>
<br/>
<br/>
<p>（公 章）</p>
<p>年 月 日</p>
</td>
</tr>
<tr>
<td>
<h3> (two) </ h3> branch attached recommendation or recommendation
</ td>
<td colspan="3">
<br/>
<br/>
<br/>
<P> branch director of the signature: </ p>
<p>年 月 日</p>
</td>
</tr>
<tr>
<Td> <h3> (three) </ h3> two Association recommendation </ td>
<td colspan="">
<p> member attached recommendation or recommendation ( . 1 ) </ P>
<br/>
<br/>
<P> Recommended by corporate signature (official seal): </ p>
<br/>
</td>
<td colspan="2">
<p> member attached recommendation or recommendation ( 2 ) </ P>
<br/>
<br/>
<P> Recommended by corporate signature (official seal): </ p>
<br/>
</td>
</tr>
</table>
</div>
</div>
<div><button class="btn btn-save">点击确认</button></div>
<iframe id="iframe123" frameborder="0" width="2000" height="700"></iframe>
</body>
<script type="text/javascript">
$(function () {
$('.btn-save').click(function(){
let element = $('#pdf-content');
let w = element.width();
let h = element.height();
let offsetTop = element.offset().top;
let offsetLeft = element.offset().left;
let canvas = document.createElement('canvas');
let abs = 0;
let position = 0;
let win_i = $(window).width();
let win_o = window.innerWidth;
if (win_o > win_i) {
abs = (win_o - win_i) / 2;
}
canvas.width = w * 2;
canvas.height = h * 2;
let context = canvas.getContext("2d");
context.scale(2, 2);
context.translate(-offsetLeft - abs, -offsetTop);
html2canvas(element,{
onrendered: function (canvas) {
let contentWidth = canvas.width;
let contentHeight = canvas.height;
let pageHeight = contentHeight / 592.28 * 841.89;
let leftHeight = contentHeight;
let imgWidth = 595.28;
let imgHeight = 592.28 / contentWidth * contentHeight*1.5;
let pageData = canvas.toDataURL('image/jpeg', 1.0);
let pdf = new jsPDF('', 'pt', 'a4');
if (leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
} else {
while (leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
leftHeight -= pageHeight;
position -= 841.89;
if (leftHeight > 0) {
pdf.addPage();
}
}
}
document.getElementById("iframe123").src = pdf.output('datauristring');
},background: '#FFF'
})
})
})
</script>
</html>