js 生成 pdf 文件

话不多说好吧, 直接上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

猜你喜欢