话不多说好吧, 直接上demo图:
直接上代码好吧:(要引入的两个js 链接我放最后)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>大熊博客园谢谢关注</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <style> /* 设置背景为白色 */ .wrap { background: #fff; width: 1100px; padding: 50px; margin: 0 auto;} .header { text-align: center; border-bottom: 1px solid #797979; margin-bottom: 10px; padding-bottom: 30px;} .h1Title { text-align: center; font-size: 32px; line-height: 40px; margin-bottom: 10px; font-weight: normal;} .container {border-top: 1px solid #797979; padding-top: 36px;} .contain_info_box { font-size: 16px; line-height: 40px; margin-bottom: 40px;} .table_box { border: 1px solid #797979; width: 100%; margin-bottom: 10px;} #exportBtn{background: pink;width: 100px;line-height: 40px;text-align: center;border-radius: 20px;cursor: pointer;} </style> </head> <body> <div id="exportBtn"">导出</div> <div id="wrap" class="wrap"> <div class="header"> <h1 class="h1Title">大熊js转pdf</h1> <p>2020年3月2号 舔狗日记</p> </div> <div class="container"> <div class="contain_info_box"> <h2 class="h2Title">测试数据</h2> <p>大熊js转pdf</p> </div> <div class="table_list_box"> <table class="table_box" border="1" cellspacing="0" cellpadding="0"> <tr> <th>111</th> <th>222</th> <th>333</th> </tr> <tr> <td>哈哈</td> <td>哈哈哈哈哈哈</td> <td>哈哈哈哈哈哈哈哈</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> </div> </div> </div> <script src="js/jquery.min.js"></script> <script src="js/html2canvas.js"></script> <script src="js/jspdf.min.js"></script> <script type="text/javascript"> $(function(){ $(document).on('click','#exportBtn',function(){ var pdf = new jsPDF('p','pt','a4'); pdf.internal.scaleFactor = 1; //可以调整缩放比例 var options = { //pagesplit: true //分页 pagesplit: false//不分页 }; pdf.addHTML($('.wrap').get(0),0,0,options,function() { // 用.h1Title 标签的名字命名 pdf pdf.save($('.header .h1Title').text()+'.pdf'); }); }) }) </script> </body> </html>
两个js链接: https://github.com/Clearlovesky/-js-jq-/blob/master/html2canvas.js
https://github.com/Clearlovesky/-js-jq-/blob/master/jspdf.min.js
关于前端js转pdf更多参考链接: https://www.cnblogs.com/waitingbar/p/6524808.html