我想在准考证中生成一个二维码，并且我想将此准考证下载为带有一些图像的 PDF 格式。我已经为此编写了代码。在 WebView 中一切都很好，但是当我要下载此二维码时代码不是 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>最佳答案
据我所知，在将 dom 输入 jspdf 之前，您必须将图像转换为 base64 格式。解决方法如下
将
id='qrcode' crossOrigin="anonymous"添加到包含 qrcode 的 img 标记将您的 url 属性转换为使用 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
关于javascript - 如何使用jquery和php生成动态二维码，并保存为pdf？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47588112/