话不多说,直接上源码
<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>会员入会申请表</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> <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 = 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>