Bonjour,
Une idée ?
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contremarque Generator</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- QR Code CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@zxing/[email protected] /types/css/QRCode.css">
</head>
<body>
<div class="container mt-5">
<h1 class="text-center mb-4">Contremarque Generator</h1>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="codeList">Liste de codes:</label>
<textarea class="form-control" id="codeList" rows="5"></textarea>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="datepicker">Choisir une date:</label>
<input type="date" class="form-control" id="datepicker">
</div>
<button class="btn btn-primary btn-block" id="generateBtn">Générer PDF</button>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected] /dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- QR Code Generator -->
<script src="https://cdn.jsdelivr.net/npm/@zxing/[email protected] "></script>
<!-- jsPDF -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.3/jspdf.umd.min.js"></script>
<script>
document.getElementById('generateBtn').addEventListener('click', generatePDF);
async function generatePDF() {
const codeList = document.getElementById('codeList').value.split('\n').map(code => code.trim()).filter(Boolean);
const selectedDate = document.getElementById('datepicker').value;
if (codeList.length === 0 || selectedDate === '') {
alert('Veuillez entrer au moins un code et sélectionner une date.');
return;
}
const doc = new jsPDF();
const qrCodeSize = 150;
const margin = 10;
const pageHeight = doc.internal.pageSize.height;
let currentY = margin;
for (let i = 0; i < codeList.length; i++) {
if (currentY + qrCodeSize > pageHeight) {
doc.addPage();
currentY = margin;
}
const qrDataUrl = await QRCode.toDataURL(codeList[i]);
doc.addImage(qrDataUrl, 'JPEG', margin, currentY, qrCodeSize, qrCodeSize);
doc.setFontSize(12);
doc.text(margin, currentY + qrCodeSize + 10, `Code: ${codeList[i]}`);
doc.text(margin, currentY + qrCodeSize + 20, `Date: ${selectedDate}`);
currentY += qrCodeSize + 40;
}
doc.save('contremarque.pdf');
}
</script>
</body>
</html>
Afficher la suite
