Add header for each page when exporting to PDF

Next to the last article, , someone asked how to add a header to each page. In fact, the idea is very simple. For example, if you want to add a logo to the header, just add more pictures to each page when jspdf is created.

First of all, the renderings are used by borrowing HUAWEI LOGO:

Put the code again, and the main body is the paging export algorithm of the previous article:

<!DOCTYPE html>
  <meta charset="utf-8">
  <title>test PDF export</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="js/html2canvas.min.js"></script>
  <script src="js/jspdf.min.js"></script>
  html,body { margin:0; padding:0; }
  #page ul { padding:0;list-style:none; }
  #page li { line-height:110px;color:#fff;padding-left:10px;font-size:26px; }
  #logo { display:none; }
  .c0 { background-color:#ea644a; }
  .c1 { background-color:#f1a325; }
  .c2 { background-color:#38b03f; }
  .c3 { background-color:#03b8cf; }
  .c4 { background-color:#bd7b46; }
  .c5 { background-color:#8666b8; }
  function exportPdf() {
      var element = document.getElementById("page");
    html2canvas(element, {
    }).then(function(canvas) {
        var pdf = new jsPDF('p', 'mm', 'a4');//A4 paper, portrait
          var ctx = canvas.getContext('2d'),
           a4w = 190, a4h = 257,//A4 size, 210mm x 297mm, 10 mm margin on each side, display area 190x277
             imgHeight = Math.floor(a4h * canvas.width / a4w),//Convert pixel height of one page image to A4 display scale
             renderedHeight = 0;
        var logo = document.getElementById("logo");//Icon placed in header
        while(renderedHeight < canvas.height) {
          var page = document.createElement("canvas");
          page.width = canvas.width;
          page.height = Math.min(imgHeight, canvas.height - renderedHeight);//Maybe less than one page
          //Trim the specified area with getImageData and draw it into the canvas object created earlier
          page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0);
          //Add an image to the page with a 10 mm / 20 mm margin
          pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 20, a4w, Math.min(a4h, a4w * page.height / page.width));
          //Add header logo
          pdf.addImage(logo, 'PNG', 5, 3);
          renderedHeight += imgHeight;
          if(renderedHeight < canvas.height)
              pdf.addPage();//Add an empty page if there is more to follow
          delete page;

    function generateData() {
      var html = [];
      html[html.length] = '<ul>';
      for(var i = 0;i < 20;++i) {
        html[html.length] = '<li class="c';
        html[html.length] = i % 6;
        html[html.length] = '">This is the first.';
        html[html.length] = i;
        html[html.length] = 'That's ok</li>';
      html[html.length] = '</ul>';
      document.getElementById('page').innerHTML = html.join('');
<body onload="generateData()">
    <button onclick="exportPdf()">export pdf</button>
    <div id="page"></div>
    <img id="logo" src="huawei.png" />

The changes are as follows:

1. A hidden < img > tag is added to carry the logo;
2. When creating each page, an additional line of pdf.addImage(logo, 'PNG', 5, 3) is added to place the logo in the header position;

Without using the < img > tag, it's OK to directly create the Image object in the code and then specify src to load the Image, but it's important to handle the subsequent code in the onload event of the Image object. In addition, note that you cannot double-click to open it directly at runtime, but you need to put it on the web server. Because the Image resources are loaded, the toDataURL only allows the same source resources due to browser security restrictions, otherwise an error will be reported.

Tags: Javascript IE less Web Server

Posted on Tue, 17 Mar 2020 10:26:30 -0400 by beckjo1