Well ado, directly on the demo map:
Well :( directly on the code two js links to introduce me to put last )
<!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> /*Provided a white background * / .Wrap { background : #fff ; width : 1100px ; padding : 50px ; margin : 0 Auto ; } .header { text-align = left : Center ; border-bottom : 1px Solid # 797 979 ; margin-bottom : 10px ; padding-bottom : 30px ; } .h1Title { text-align = left : 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 > ha </ TD > < TD > ha ha ha </ TD > < TD > ha ha ha ha </ 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 ( ' the Click ' , ' #exportBtn ' , function () { var PDF = new new jsPDF ( ' P ' , ' Pt ' , ' A4 ' ); pdf.internal.scaleFactor = . 1 ; // can adjust the zoom var Options = { // pagesplit: to true // page pagesplit: to false // do not tab }; pdf.addHTML ($ ( ' .Wrap' ) .Get ( 0 ), 0 , 0 , Options, function () { // named pdf label with the name .h1Title pdf.save ($ ( ' .header .h1Title ' ) .text () + ' of.pdf ' ); }); }) }) </ Script > </ body > </ HTML >
Js two links : https://github.com/Clearlovesky/-js-jq-/blob/master/html2canvas.js
https://github.com/Clearlovesky/-js-jq-/blob/master/jspdf.min.js
More on the front js turn pdf reference links: https://www.cnblogs.com/waitingbar/p/6524808.html