Как создать динамический QR-код, используя jquery и php, и сохранить его в формате pdf?

Я хочу сгенерировать qr-код на входной карточке, и я хочу загрузить эту приемную карточку в формате PDF с некоторым изображением. Я написал код для этого. Все хорошо в веб-представлении, но когда я собираюсь скачать это,QR-код не идет в PDF. Я использовал 1) https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js 2) " https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js "

<script>


$('#cmd').click(function() {
  var options = {};
  var pdf = new jsPDF('p', 'pt', 'a4');
  pdf.addHTML($("#content"), 15, 15, options, function() {
    pdf.save('pageContent.pdf');
  });
});


</script>
</head>
<body>

<div id="content" style="background-color: #ffffff;">
   
            <div class="page-content">
               <div class="container-fluid">
                
                    <table id="table-sm" class="table table-bordered  table-sm">
                    
                    <tbody>
                    <tr >
                        
                        <td class="color-blue-grey-lighter" colspan="3"><center><img src="fb.png"></center></td>
                        
                    </tr>
                    <tr>
                        <td><img src="https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=<?php echo $_GET['name'].$_GET['address']; ?>" title="Link to Google.com"></td>
///Here i am using google api qr code generator
                        <td ><p style="font-size: 20px;margin-top: 29px;">Registration number :<strong>AISEWERT456</strong></p></td>
                        <td><p style="font-size: 20px;margin-top: 29px;"">Appliaction Status:<strong>Completed</strong></p></td>
                    
                    </tr>



                    <tr>
                        
                        <td style="width: 500px;" ><strong>Center Number: </strong></td>
                        <td style="width: 600px;"><strong>Date of Exam : </strong></td>
                        <td rowspan="7">
                         
                         <img src="std.png"><br>
                         <img src="sign.png">
                            

                        </td>
                        
                    </tr>
                    

                    

                    
                    

                    </tbody>
                </table>



                </div>

            </div>
            
</div>

   

<button id="cmd" style="float: right;" type="button" class="btn btn-danger">Download</button>
</body>
</html>

Источник

1 ответ

AFAIK, вы должны конвертировать ваши изображения в формат base64, прежде чем подавать ваш dom в jspdf. Вот как это решить

  1. добавлять id='qrcode' crossOrigin="anonymous" на ваш тег img, который имеет qrcode

  2. Конвертируйте свой атрибут url для использования base64

  3. Конвертировать в pdf

$('#cmd').click(function() {
  var options = {
    allowTaint: true,
    logging: true
  };
  var pdf = new jsPDF('p', 'pt', 'a4');
  var base64 = getBase64Image($("#qrcode").get(0));
  $("#qrcode").attr('src', base64);
  pdf.addHTML($("#content"), 15, 15, options, function() {
    pdf.save('pageContent.pdf');
  });
});

function getBase64Image(img) {
  img.setAttribute('crossOrigin', 'anonymous');
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL("image/png");
  return dataURL;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

  <div id="content" style="background-color: #ffffff;">

    <div class="page-content">
      <div class="container-fluid">

        <table id="table-sm" class="table table-bordered  table-sm">

          <tbody>
            <tr>
              <td class="color-blue-grey-lighter" colspan="3">
                <center><img src="fb.png"></center>
              </td>
            </tr>
            <tr>
              <td><img id='qrcode' crossOrigin="anonymous" src='https://chart.googleapis.com/chart?chs=200x200&cht=qr' title="Link to Google.com"></td>
              ///Here i am using google api qr code generator
              <td>
                <p style="font-size: 20px;margin-top: 29px;">Registration number :<strong>AISEWERT456</strong></p>
              </td>
              <td>
                <p style="font-size: 20px;margin-top: 29px;">Appliaction Status:<strong>Completed</strong></p>
              </td>
            </tr>
            <tr>
              <td style='width: 500px;'><strong>Center Number: </strong></td>
              <td style='width: 600px;'><strong>Date of Exam : </strong></td>
              <td rowspan='7'>
                <img src='std.png'><br>
                <img src='sign.png'>
              </td>

            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <button id='cmd' style='float: right;' type='button' class='btn btn-danger'>Download</button>

Каким-то образом фрагмент кода здесь не работает, так что вот его jsfiddle

Источник
Другие вопросы по тегам