Question

我想在admit卡中生成一个qr代码，我想以PDF格式下载这张admit卡片。我已经为此编写了代码。在Web视图中一切都很好但是当我打算下载时，QR代码不是PDF格式的。我使用了1）https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js 2）＆＃34; https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js＆＃34;

＆＃13;

<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>

＆＃13;

</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>

＆＃13;

Answer 1

AFAIK在将dom送入jspdf之前，你必须将你的图像转换为base64格式。这是如何解决它

将id='qrcode' crossOrigin="anonymous"添加到包含qrcode的img标记
将您的网址属性转换为使用base64
转换为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

如何使用jquery和php生成动态QR码，并将其保存为pdf？

1 个答案: