我想使用jquery、jspdf和mustache从HTML页面创建一个真正的pdf（我们可以在其中访问pdf选项作为pdf文件中的选择文本）。
当我尝试使用 jspdf 和 html2canvas 库时，生成 pdf 时不会考虑用于在 html 中显示数据的所有 Mustache 代码。
我将 jspdf 与 html2canvas 一起使用，但它不起作用，因为该库会生成用于 PDF 创建的图像。
这是我的代码：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF CREATOR</title>
<link id="BootstrapCSS" rel="stylesheet" type="text/css" href="../lib/bootstrap.min.css">
<script type="text/javascript" src="/_layouts/15/jquery/jquery-2.1.4.min.js"></script>
<script src="../lib/mustache/mustache.js"></script>
<script src="../lib/jspdf/html2canvas.js"></script>
<script src="../lib/jspdf/jspdf.debug.js"></script>
</head>
<body onload="renderHTML()">
<div id="target">Loading...</div>
<script id="template" type="x-tmpl-mustache">
<div class="container-fluid">
<button type="button" class="btn btn-primary btn-lg" onclick="generatePDF()">Generate PDF</button>
<div id="content"><br />
<table id="table01" class="table table-bordered table_border">
<tbody>
<tr>
<td colspan="2"><b>CONTRACT:</b> <strong class="red">{{ subject }}</strong></td>
</tr>
<tr>
<td><b>RESPONSIBLE UNIT:</b> <strong class="red">{{ unit }}</strong></td>
<td><b>CONTRACT NUMBER:</b> {{ contractNumber }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</script>
<script>
$(document).ready(function() {
var contractId = $.urlParam('contractId');
if (ContractId) {
var contract = getContractById(contractId);
data.contractId = contractId;
data.subject = contract.Title;
data.unit = contract.Unit;
data.contractNumber = contract.ContractNumber;
}
});
var data = {
contractId: '',
subject: '',
unit: '',
contractNumber: ''
};
function renderHTML() {
var template = document.getElementById('template').innerHTML;
var rendered = Mustache.render(template, data);
document.getElementById('target').innerHTML = rendered;
}
function generatePDF() {
html2canvas(document.getElementById('content'), { scale: 1, width: 2000, height: 9000 }).then(canvas => {
var imgData = canvas.toDataURL("image/jpeg");
var pdf = new jsPDF('p', 'mm', [520, 1080]);
pdf.addImage(imgData, 'JPEG', 10, 10);
pdf.save(Test.pdf);
});
}
</script>
</body>
</html>
你能帮我找到最好的图书馆吗？
提前感谢您的帮助。
不用JSPDF，直接使用iframe + windows即可。print
iframe.contentWindow.document.body.innerHTML = rendered
function generatePDF() {
iframe.contentWindow.print()
}