如何使用jquery和php生成动态二维码，并保存为PDF文件？
我想在录取卡中生成一个二维码，我想下载这张录取卡为PDF格式，带有一些图像。我已经为此编写了代码。在网页视图中一切都很好，但是当我要下载这个时，二维码不是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”
null
<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>null
共有1个答案
AFAIK，在将dom输入JSPDF之前，您必须将图像转换为base64格式。下面是解决方法
>
将id='qrcode'crossorigin=“anonymous”添加到具有qrcode的img标记中
将url属性转换为使用base64
转换为pdf格式
null
$('#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>-
我必须在运行时动态生成一个xml文件。请帮助我使用PHP动态生成下面的XML文件。 null
-
说明 用于软件端生成点菜二维码 请求地址 http://api.dc78.cn/Api/do_qr_order 请求方式 GET 请求参数 table=桌台号 expire=60(过期时间，分钟)此参数不传默认30分钟 返回 {"status":"1","code_url":"https:\/\/wx.dc78.cn\/t_BuUG4","token":"t_BuUG4","expire":30,
-
此协议用于开台时生成动态点餐二维码，可以打印到桌台留台单上，客人用来扫码点餐，正餐模式比较适用。 相比固定桌台二维码的好处是可以控制一码只能一次消费使用。桌台结账后可以主动调用1.6来使二维码失效。 请求参数说明 参数 描述 必填 示例值 类型 最大长度 action 接口参数组 是 object └action 需要调用的接口名称 是 do_qr_order string get GET参数组，
-
本文向大家介绍用.NET如何生成二维码，包括了用.NET如何生成二维码的使用技巧和注意事项，需要的朋友参考一下 下面介绍一下如何用.NET生成二维码（QR Code码制），下面给出详细步骤： 1、新建一个window应用程序，然后引入.NET二维码类库（开源的类库，可从网上下载）： 2、构建UI界面，代码如下： 图形如下所示： 3、编写 编码和解码按钮事件，进行编码和解码处理： 4、编译运行，
-
我基于thymeleaf模板创建了一个pdf文件，实际上我正在使用模板分解器flying Discer将文件写入输出流，但由于我无法访问前端以定义每次客户端需要时生成的摘要内容，我认为最好在服务器端生成pdf文件。所以我的问题是： 有没有办法获取写入数据的输出流，并将其转换为动态写入，这样就不会在本地存储中创建数据 这是我业务逻辑的一部分： 我在控制器中使用它，在响应实体中使用attachemen
-
问题内容： 我最近一直在摆弄WebGL，并让Collada阅读器工作。问题是它的运行速度非常慢（Collada是一种非常冗长的格式），因此我将开始将文件转换为更易于使用的格式（可能是JSON）。我已经有了使用JavaScript解析文件的代码，因此我也可以将其用作导出器！问题正在保存。 现在，我知道我可以解析文件，将结果发送到服务器，然后让浏览器从服务器请求文件下载作为下载。但是实际上，服务器与该
-
本文向大家介绍如何使用Jquery动态生成二级选项列表，包括了如何使用Jquery动态生成二级选项列表的使用技巧和注意事项，需要的朋友参考一下 这篇文章主要介绍了如何使用Jquery动态生成二级选项列表,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 想写一个多级联动的选项列表，并且我想要动态生成，但是我看了好多博客看得我晕乎乎的，就自己查了一些j
-
本文向大家介绍iOS使用CIFilter生成二维码，包括了iOS使用CIFilter生成二维码的使用技巧和注意事项，需要的朋友参考一下 二维码（Quick Response Code，简称QR Code）是由水平和垂直两个方向上的线条设计而成的一种二维条形码（barcode)。可以编码网址、电话号码、文本等内容，能够存储大量的数据信息。自iOS 7以来，二维码的生成和读取只需要使用Core Ima