jsPdf搭配html2canvas实现html转pdf并预览话不多说，直接上源码
<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="libs.baidu/jquery/2.1.4/jquery.min.js"></script>
<script src="unpkg/jspdf@latest/dist/jspdf.min.js"></script>
<script src="cdn.bootcss/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>会员⼊会申请表</h2>
</div>
<div class="table-time"><p>填表⽇期：  ；年  ⽉  ⽇</p></div>
<div class="table-controller">
<table>
<tr>
<td>申请单位名称</td>
<td colspan="3"></td>
</tr>
<tr>
<td>单位地址</td>
<td colspan="3"></td>
</tr>
<tr>
<td></td>
<td></td>
<td>电⼦邮箱</td>
<td></td>
</tr>
<tr>
<td>职⼯总数</td>
<td></td>
<td>年营业额</td>
<td></td>
</tr>
<tr>
<td>法⼈代表姓名</td>
<td>⼿机</td>
<td></td>
</tr>
<tr>
<td>联系⼈姓名</td>
<td></td>
<td>职务</td>
<td></td>
</tr>
<tr>
<td>（⼿机）</td>
<td></td>
<td>邮箱</td>
<td></td>
</tr>
<tr>
<td>申请单位承诺</td>
<td colspan="3">
<h3>郑重承诺：本单位将遵守会员章程，履⾏会员义务，遵守诚实守信原则，确保所提供材料真实有效。</h3>                    <br/>
<br/>
<p>法⼈签字（盖公章）：</p>
</td>
</tr>
<tr>
<td colspan="4"><h3>下列三种推荐⽅式选择其⼀即可：</h3></td>
</tr>
<tr>
<td>
<h3>(-)</h3>所在地县以上民政部门或殡葬协会意见
</td>
<td colspan="3">
<br/>
<br/>
<br/>
<p>（公  ；章）</p>
<p>年  ⽉  ⽇</p>
</td>
</tr>
<tr>
<td>
<h3>(⼆)</h3>分⽀机构推荐意见或附推荐信
</td>
<td colspan="3">
<br/>
<br/>
<br/>
<p>分⽀机构主任签字：</p>
<p>年  ⽉  ⽇</p>
</td>
</tr>
<tr>
<td><h3>(三)</h3>两个协会会员单位推荐</td>
<td colspan="">
<p>会员单位推荐意见或附推荐信（1）</p>
<br/>
<br/>
<p>推荐单位法⼈签字（盖公章）：</p>
<br/>
</td>
<td colspan="2">
<p>会员单位推荐意见或附推荐信（2）</p>
<br/>
<br/>
<p>推荐单位法⼈签字（盖公章）：</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 = ateElement('canvas');
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 = Context("2d");pdf转html
context.scale(2, 2);
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 = DataURL('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();
}
}
}
})
})
})
</script>
</html>