js generate pdf file

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

Guess you like

Origin www.cnblogs.com/520BigBear/p/12578823.html