jqueryとphpを使って動的QRコードを生成し、pdfとして保存するにはどうすればいいですか？

私は認可カードにqrコードを生成したいと思っています。この許可カードをPDFとしてダウンロードしたいのですが、image.iにはこのコードを書いてあります。ウェブビューでは問題ありませんが、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"jqueryとphpを使って動的QRコードを生成し、pdfとして保存するにはどうすればいいですか？

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

出典

2017-12-01 subhajit khan

私の知る限り、あなたがjspdfにあなたのDOMを供給する前に、base64形式へのあなたのイメージ（複数可）を変換する必要があります。ここでQRコード

が

$('#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>

をPDFにbase64で

変換を使用するようにurl属性を変換しているあなたのimgタグにid='qrcode' crossOrigin="anonymous"を追加

に

それを解決する方法を説明します

何らかの形でコードスニペットが機能しないので、ここではjsfiddleの
です

出典

2017-12-01 08:14:56 Pratansyah

jqueryとphpを使って動的QRコードを生成し、pdfとして保存するにはどうすればいいですか？

答えて

関連する問題