Ciao sono uno studente e come progetto dovrei fare un sito dove devo creare un curriculum vitae da un sito con un pdf personalizzato non so come salvare i dati inseriti dall'utente in questo codice su un pdf girando online è consigliato PHP avete qualche soluzione
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Curriculum Vitae</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #ffffff; /* Celeste chiaro */
}
h1 {
text-align: center;
}
.cv-form {
background-color: rgb(255, 255, 255);
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(241, 241, 241, 0.1);
max-width: 600px;
margin: auto;
position: relative;
}
.info {
margin-bottom: 20px;
}
label {
font-weight: bold;
}
input[type="text"],
input[type="date"],
textarea {
width: calc(100% - 16px);
padding: 8px;
margin-top: 4px;
margin-bottom: 20px;
box-sizing: border-box;
}
input[type="file"] {
position: absolute;
top: 20px; /* Posizione in alto */
right: 20px; /* Posizione a destra */
display: none;
}
input[type="file"] + label {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type="file"] + label:hover {
background-color: #45a049;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type="submit"]:hover {
background-color: #45a049;
}
.uploaded-img {
max-width: 250px;
max-height: 1000px;
position: absolute;
top: 20px; /* Posizione in alto */
right: 20px; /* Posizione a destra */
display: none;
border-radius: 50%; /* Arrotondamento bordo */
}
</style>
</head>
<body>
<h1>Curriculum Vitae</h1>
<div class="cv-form">
<form action="#" id="cv-form">
<div class="info">
<label for="nome">Nome:</label><br>
<input type="text" id="nome" name="nome" required><br>
</div>
<div class="info">
<label for="cognome">Cognome:</label><br>
<input type="text" id="cognome" name="cognome" required><br>
</div>
<div class="info">
<label for="nazionalità">Nazionalita:</label><br>
<input type="text" id="nazionalita" name="nazionalita" required><br>
</div>
<div class="info">
<label for="sesso">Sesso:</label><br>
<input type="text" id="sesso" name="sesso" required><br>
</div>
<div class="info">
<label for="data">Data di nascita:</label><br>
<input type="date" id="campoData" name="data" required><br>
</div>
<div class="info">
<label for="contatti">CONTATTI</label><br>
</div>
<div class="info">
<label for="email">Email:</label><br>
<input type="text" id="email" name="email" required><br>
</div>
<div class="info">
<label for="telefono">Telefono:</label><br>
<input type="text" id="telefono" name="telefono"><br>
</div>
<div class="info">
<label for="indirizzo">Indirizzo:</label><br>
<input type="text" id="indirizzo" name="indirizzo"><br>
</div>
<div class="info">
<label for="esperienzaa">ESPERIENZA LAVORATIVA</label><br>
</div>
<div class="info">
<label for="esperienzaa">Esperienza lavorativa:</label><br>
<textarea id="esperienzaa" name="esperienzaa"></textarea><br>
</div>
<div class="info">
<label for="istruzione">ISTRUZIONE</label><br>
</div>
<div class="info">
<label for="istruzione">Istruzione:</label><br>
<textarea id="istruzione" name="istruzione"></textarea><br>
</div>
<div class="info">
<label for="competenze">COMPETENZE E ABILITÀ</label><br>
</div>
<div class="info">
<label for="competenze">Competenze:</label><br>
<textarea id="competenze" name="competenze"></textarea><br>
</div>
<div class="info">
<input type="file" id="foto" name="foto" onchange="previewImage(this)">
<label for="foto">Carica Foto</label><br>
<img id="uploaded-img" class="uploaded-img" src="#" alt="Uploaded Image">
</div>
<div class="info">
<input type="submit" value="Invia">
</div>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<script>
document.getElementById("cv-form").addEventListener("submit", function(event) {
event.preventDefault(); // Previeni il comportamento predefinito del modulo
salvaDati(); // Chiama la funzione per generare e scaricare il PDF
});
document.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
event.preventDefault(); // Previeni il comportamento predefinito dell'evento "Enter"
salvaDati(); // Chiama la funzione per generare e scaricare il PDF
}
});
function previewImage(input) {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById('uploaded-img').src = e.target.result;
document.getElementById('uploaded-img').style.display = 'block';
};
reader.readAsDataURL(input.files[0]);
}
function salvaDati() {
var nome = document.getElementById("nome").value;
var cognome = document.getElementById("cognome").value;
var nazionalita = document.getElementById("nazionalita").value;
var sesso = document.getElementById("sesso").value;
var data = document.getElementById("campoData").value;
var email = document.getElementById("email").value;
var telefono = document.getElementById("telefono").value;
var indirizzo = document.getElementById("indirizzo").value;
var esperienzaa = document.getElementById("esperienzaa").value;
var istruzione = document.getElementById("istruzione").value;
var competenze = document.getElementById("competenze").value;
var pdf = new jsPDF();
pdf.text(20, 20, "Curriculum Vitae");
pdf.text(20, 30, "Nome: " + nome);
pdf.text(20, 40, "Cognome: " + cognome);
pdf.text(20, 50, "Nazionalità: " + nazionalita);
pdf.text(20, 60, "Sesso: " + sesso);
pdf.text(20, 70, "Data di nascita: " + data);
pdf.text(20, 80, "Email: " + email);
pdf.text(20, 90, "Telefono: " + telefono);
pdf.text(20, 100, "Indirizzo: " + indirizzo);
pdf.text(20, 110, "Esperienza lavorativa: " + esperienzaa);
pdf.text(20, 120, "Istruzione: " + istruzione);
pdf.text(20, 130, "Competenze: " + competenze);
var fileName = "curriculum.pdf";
saveAs(pdf.output('blob'), fileName); // Utilizza FileSaver.js per il download del file PDF
}
</script>
</body>
</html>