Я пытаюсь создать скрипт, позволяющий создать PDF-файл со страницы HTML. Я использую библиотеку mustache, jspdfhtml2canvas и jquery
Все работает правильно: усы извлекают данные и создают переменную. Все правильно отображается на странице.
Я создал функцию для генерации PDF-файла, она работает:
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");
});
}
После нажатия кнопки «Создать» создается PDF-файл. Тем не менее, выделить текст в pdf невозможно. Я не знаю, как обновить скрипт для этого, потому что мне нужна эта функция в файле 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>
Не могли бы вы мне помочь с что?
Заранее благодарим за помощь.