jspdf 导出html 例子(头部和底部表格固定)

作者: 王宣成 | 来源:发表于2022-05-31 10:49 被阅读0次

jspdf 导出html 例子(头部和底部表格固定)
2019-11-21
前端html页面转成pdf格式并下载
vue将HTML转PDF导出(纯干货)
Quasar 导出的csv中文乱码
vue中将网页以pdf格式下载
移动端常用布局1-头部、底部固定，内容滚动
前端命名
vue导出pdf
ionic头(低)部+按钮+列表+卡片

image.png

<!DOCTYPE html>
<html lang="zh">

<head>
  <title>
    导出pdf
  </title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <style>
    #html2canvas {
      width: 1110.56px;
      /* height: 1683.78px; */
      margin: 0 auto;
      /* border: solid 1px; */
    }

    table {
      border-collapse: collapse;
      width: 100%;
      margin: 0 auto;
      border-color: #34495E;
      /* border-style: solid; */
    }

    td {
      padding: 5px;
    }

    .cls {
      /* background: #fff; */
      /* border: solid 1px #34495E; */
      /* height: 1683.78px; */
    }
  </style>
</head>

<body>

  <div id="html2canvas">

    <div class="cls">
      <div class="header-cls">
        <div style="height: 20px;"></div>
        <p style="text-align: center;"><span>&nbsp;<strong>查勘任务测试<san>现场查勘记录</san></strong></span>
        </p>
      </div>

      <table border=1">

        <thead>
          <tr class="header-tr1">
            <td style=" width: 16.1986%; text-align: center;" colspan="2">勘查时间</td>
            <td style=" text-align: center; width: 33.8036%;"></td>
            <td style=" text-align: center; width: 9.65196%;">勘查地点</td>
            <td style=" text-align: center; width: 40.3502%;">任务地点</td>
          </tr>

          <tr class="header-tr2">
            <td style=" text-align: center; width: 6.15934%;" rowspan="3">参建单位和人员</td>
            <td style="width: 10.0392%;  text-align: center;">建设单位</td>
            <td style=" text-align: center; width: 33.8036%;">aaa单位</td>
            <td style=" text-align: center; width: 9.65196%;">参与人员</td>
            <td style=" text-align: center; width: 40.3502%;">王宣成</td>
          </tr>

          <tr class="header-tr3">
            <td style="width: 10.0392%; text-align: center; ">施工单位</td>
            <td style="text-align: center;  width: 33.8036%;">a</td>
            <td style="text-align: center;  width: 9.65196%;">参与人员</td>
            <td style="text-align: center;  width: 40.3502%;">b</td>
          </tr>
          <tr class="header-tr4">
            <td style="width: 10.0392%; text-align: center; ">监理单位</td>
            <td style="text-align: center;  width: 33.8036%;">c</td>
            <td style="text-align: center;  width: 9.65196%;">参与人员</td>
            <td style=" text-align: center; width: 40.3502%;">ddddddddddddddddddddddddd
              dddddddddddddddddddddddddd
            </td>
          </tr>
          <tr class="header-tr5">
            <td style=" text-align: center; width: 6.15934%;">
              <strong>序号</strong><strong><br /></strong>
            </td>
            <td style=" text-align: center; width: 10.0392%;">
              <strong>勘查部位</strong><strong><br /></strong>
            </td>
            <td style="text-align: center;  width: 43.4556%;" colspan="4">
              <strong>现场勘查情况</strong><strong><br /></strong>
            </td>
          </tr>
        </thead>

        <tbody>


        </tbody>

        <tfoot>
          <tr class="footer-tr1">
            <td style=" width: 16.1986%; text-align: center;" colspan="2">其他</td>
            <td style=" width: 83.8058%;" colspan="3"></td>
          </tr>
          <tr class="footer-tr2">
            <td style=" width: 16.1986%; text-align: center;" colspan="2">查勘单位</td>
            <td style=" width: 83.8058%;" colspan="3">投资评审中心</td>
          </tr>
          <tr class="footer-tr3">
            <td style=" width: 16.1986%; text-align: center;" colspan="2">测量与记录人员</td>
            <td style=" width: 83.8058%;" colspan="3"></td>
          </tr>
        </tfoot>

      </table>
    </div>

  </div>

  <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
  <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
  <script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>

  <script type="text/javascript">

    title = "查勘任务测试";
    
    thead_html = $('thead').eq(0).html();
    thead_html = "<thead>" + thead_html + "</thead>"

    tfoot_html = $('tfoot').eq(0).html();
    tfoot_html = "<tfoot>" + tfoot_html + "</tfoot>"


    var data = [
      { "name": "1" },
      { "name": "2" },
      { "name": "3" },
      { "name": "4" },
      { "name": "5" },
      { "name": "6" },
      { "name": "7" },
      { "name": "8" },
      { "name": "9" },
      { "name": "10" },
      { "name": "1" },
      { "name": "2" },
      { "name": "3" },
      { "name": "4" },
      { "name": "5" },
      { "name": "6" },
      { "name": "7" },
      { "name": "8" },
      { "name": "9" },
      { "name": "10" },
      { "name": "1" },
      { "name": "2" },
      { "name": "3" },
      { "name": "4" },
      { "name": "5" },
      { "name": "6" },
      { "name": "7" },
      { "name": "8" },
      { "name": "9" },
      { "name": "10" },
      { "name": "1" },
      { "name": "2" },
      { "name": "3" },
      { "name": "4" },
      { "name": "5" },
      { "name": "6" },
      { "name": "7" },
      { "name": "8" },
      { "name": "9" },
      { "name": "10" },
      { "name": "1" },
      { "name": "2" },
      { "name": "3" },
      { "name": "4" },
      { "name": "5" },
      { "name": "6" },
      { "name": "7" },
      { "name": "8" },
      { "name": "9" },
      { "name": "10" },
      { "name": "1" },
      { "name": "2" },
      { "name": "3" },
      { "name": "4" },
      { "name": "5" },
      { "name": "6" },
      { "name": "7" },
      { "name": "8" },
      { "name": "9" },
      { "name": "10" },
      { "name": "61" },
    ];

    var index = 0;
    var max_height = 1400; 

    while (true) {
      if(index == data.length){
        break;
      }
      addData();
    }
   
    function addData () {
      for (var i = index; i < data.length; i++) {
        n = Number(i) + 1
        
        inner = `  <tr class="data-tr${i}" style="">
            <td style=" width: 6.15934%;text-align: center;">${n}</td>
            <td style=" width: 10.0392%;">${data[i].name}  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</td>
            <td style="width: 43.4556%; " colspan="4">${data[i].name} </td>
          </tr>`;
        $('tbody').last().append(inner);

        var total_height = $('.cls').last().height();

        index = n;

        if (total_height >= max_height) {
          console.log('下一页')
          var empty_height = 1683.78 - total_height;
          var empty_inner = `
          <div style="height: ${empty_height}px;"></div> 
          `;
          $('.cls').last().after(empty_inner);
        
          addTable();
          break;
        }

      }
    }

    function addTable () {
      table_inner = `
      <div class="cls">
      <div class="header-cls">
        <div style="height: 20px;"></div>
        <p style="text-align: center;"><span>&nbsp;<strong> ${title}<san>现场查勘记录</san></strong></span>
        </p>
      </div>
      <table border=1">` + thead_html + ' <tbody></tbody>' + tfoot_html + '</table></div>'
      $('#html2canvas').append(table_inner);
    }


    jQuery(function () {
      //downPdf.click(function(){
      html2canvas($('#html2canvas'), {
        allowTaint: true,  //允许跨域
        useCORS: true,  //允许图片跨域
        //scale: 2, // 设置 scale 为 2 及以上，即可支持高分屏
        background: '#FFFFFF', // 默认为黑色，将 background 为其他颜色
        onrendered: function (canvas) {

          var contentWidth = canvas.width;
          var contentHeight = canvas.height;

          //一页pdf显示html页面生成的canvas高度;
          var pageHeight = contentWidth / 595.28 * 841.89;
          //未生成pdf的html页面高度
          var leftHeight = contentHeight;
          //pdf页面偏移
          var position = 0;
          //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
          var imgWidth = 555.28;
          var imgHeight = 555.28 / contentWidth * contentHeight;

          // console.log('contentWidth: ' + contentWidth);
          // console.log('contentHeight: ' + contentHeight);
          // console.log('imgWidth: ' + imgWidth);
          // console.log('imgHeight: ' + imgHeight);

          var pageData = canvas.toDataURL('image/jpeg', 1.0);

          var pdf = new jsPDF('', 'pt', 'a4');
          //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
          //当内容未超过pdf一页显示的范围，无需分页
          if (leftHeight < pageHeight) {
            pdf.addImage(pageData, 'JPEG', 20, 0, imgWidth, imgHeight);
          } else {
            while (leftHeight > 0) {
              pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)
              leftHeight -= pageHeight;
              position -= 841.89;
              //避免添加空白页
              if (leftHeight > 0) {
                pdf.addPage();
              }
            }
          }
          pdf.save('查勘记录.pdf');
        }
      })
    })

  </script>
</body>

</html>

jspdf 导出html 例子(头部和底部表格固定)
2019-11-21
界面整体布局（固定头部，底部）
前端html页面转成pdf格式并下载
html to pdf 目的：前端将页面导出为pdf格式，主要用到html2canvas 、 jspdf两个插件，...
vue将HTML转PDF导出(纯干货)
第〇步：效果返参格式导出格式（此时为PDF文件）步骤一 npm 安装 html2canvas 和 jspdf...
Quasar 导出的csv中文乱码
任务：将前端表格导出excel。前端的表格是Quasar的table组件，官方给出了文件导出的例子。例子是利用 ...
vue中将网页以pdf格式下载
1、下载 html2canvas和jspdf 两个插件 yarn add html2canvas jspdf 2、...
移动端常用布局1-头部、底部固定，内容滚动
移动端常用布局头部、底部固定，内容滚动。效果如下图：实现原理：头部、内容、底部为同一层级，头部、底部子级元素添...
前端命名
一、HTML文件命名 header.html----头部页面 footer.html------底部页面 user...
vue导出pdf
vue导出pdf文件方法：html2canvas+jspdf 第一步：安装第二步：定义全局函数创建一个html...
ionic头(低)部+按钮+列表+卡片
ionic 头部与底部 Header(头部) Header是固定在屏幕顶部的组件,可以包如标题和左右的功能按钮。i...