I've been working to convert HTML do PDF using domPDF, so the objective is to convert to a PDF the input that is manipulated by a user. The data does not come from a database but based on what's selected and written by the user. For example, he writes his name, birth date and selects particular checkboxes - preview
At the moment, I only managed to create the PDF with the background and with the empty inputs
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Mapa Cardio</title>
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
width: 793px;
position: relative;
margin: 0 auto;
height: 1121px;
}
img {
background-image: url("mapa_cardio.png");
background-repeat: no-repeat;
background-position: center center;
position: absolute;
}
form {
position: relative;
}
input {
position: absolute;
}
.transparent-input {
background-color:rgba(0,0,0,0) !important;
border:none !important;
}
.font-size {
font-size: 12px;
}
.font-size-name {
font-size: 14px;
}
.btn {
background-color: DodgerBlue;
border: none;
color: white;
padding: 12px 30px;
cursor: pointer;
font-size: 20px;
position: absolute;
top: 631px;
left: 312px;
}
.btn:hover {
background-color: RoyalBlue;
}
</style>
</head>
<body>
<div class="container">
<img src="mapa_cardio.png"/>
<form method="GET" action="mapa-cardio.php" style="top:150px">
<input type="text" class="position-absolute transparent-input font-size-name" style="top: 181px;left: 54px;width: 294px;height: 28px;">
<input type="text" class="position-absolute transparent-input font-size-name" maxlength="2" style="top: 181px;left: 468px;width: 19px;height: 28px;">
<input type="text" class="position-absolute transparent-input font-size-name" maxlength="2" style="top: 181px;left: 494px;width: 19px;height: 28px;">
<input type="text" class="position-absolute transparent-input font-size-name" maxlength="4" style="top: 181px;left: 521px;width: 33px;height: 28px;">
<!-- DADOS ANTROPOMÉTRICOS -->
<input type="text" class="font-size" style="top: 243px;left: 26px;width: 26px;height: 10px;">
<input type="text" class="font-size" style="top: 267px;left: 26px;width: 26px;height: 10px;">
<input type="text" class="font-size" style="top: 291px;left: 26px;width: 26px;height: 10px;">
<!-- HÁBITOS -->
<input type="checkbox" name="tabagismo" value="1" onclick="selectOnlyOneCheckBoxTabagismo(this)" style="top: 246px;left: 280.5px;width: 15px;height: 15px;">
<input type="checkbox" name="tabagismo" value="2" onclick="selectOnlyOneCheckBoxTabagismo(this)" style="top: 246px;left: 298px;width: 15px;height: 15px;">
<input type="checkbox" name="alcool" value="1" onclick="selectOnlyOneCheckBoxAlcool(this)" style="top: 263px;left: 280.5px;width: 15px;height: 15px;">
<input type="checkbox" name="alcool" value="2" onclick="selectOnlyOneCheckBoxAlcool(this)" style="top: 263px;left: 298px;width: 15px;height: 15px;">
<!-- ATIVIDADE FÍSICA -->
<input type="checkbox" name="atividadeFisica" value="1" onclick="selectOnlyOneCheckBoxAtividadeFisica(this)" style="top: 310px;left: 280px;width: 15px;height: 15px;">
<input type="checkbox" name="atividadeFisica" value="2" onclick="selectOnlyOneCheckBoxAtividadeFisica(this)" style="top: 310px;left: 366px;width: 15px;height: 15px;">
<!-- FATORES QUE INFLUENCIAM O PROGNÓSTICO -->
<input type="checkbox" name="apneia" value="1" onclick="selectOnlyOneCheckBoxApneia(this)" style="top: 376px;left: 23px;width: 15px;height: 15px;">
<input type="checkbox" name="apneia" value="2" onclick="selectOnlyOneCheckBoxApneia(this)" style="top: 376px;left: 41px;width: 15px;height: 15px;">
<input type="checkbox" name="fibrilhacao" value="1" onclick="selectOnlyOneCheckBoxFibrilhacao(this)" style="top: 392px;left: 23px;width: 15px;height: 15px;">
<input type="checkbox" name="fibrilhacao" value="2" onclick="selectOnlyOneCheckBoxFibrilhacao(this)" style="top: 392px;left: 41px;width: 15px;height: 15px;">
<input type="checkbox" name="menopausa" value="1" onclick="selectOnlyOneCheckBoxMenopausa(this)" style="top: 409px;left: 23px;width: 15px;height: 15px;">
<input type="checkbox" name="menopausa" value="2" onclick="selectOnlyOneCheckBoxMenopausa(this)" style="top: 409px;left: 41px;width: 15px;height: 15px;">
<input type="checkbox" name="diabetes" value="1" onclick="selectOnlyOneCheckBoxDiabetes(this)" style="top: 426px;left: 23px;width: 15px;height: 15px;">
<input type="checkbox" name="diabetes" value="2" onclick="selectOnlyOneCheckBoxDiabetes(this)" style="top: 426px;left: 41px;width: 15px;height: 15px;">
<input type="checkbox" name="diabetesTipo" value="1" onclick="selectOnlyOneCheckBoxDiabetesTipo(this)" style="top: 427px;left: 108px;width: 15px;height: 15px;">
<input type="checkbox" name="diabetesTipo" value="2" onclick="selectOnlyOneCheckBoxDiabetesTipo(this)" style="top: 427px;left: 158px;width: 15px;height: 15px;">
<input type="checkbox" name="diabetesTipo" value="3" onclick="selectOnlyOneCheckBoxDiabetesTipo(this)" style="top: 427px;left: 211px;width: 15px;height: 15px;">
<!-- TRATAMENTO ATUAL -->
<input type="checkbox" name="medAntiHipertensiva" value="1" onclick="selectOnlyOneCheckBoxMedAntiHipertensiva(this)" style="top: 374px;left: 280px;width: 15px;height: 15px;">
<input type="checkbox" name="medAntiHipertensiva" value="2" onclick="selectOnlyOneCheckBoxMedAntiHipertensiva(this)" style="top: 374px;left: 297px;width: 15px;height: 15px;">
<input type="checkbox" name="medAntiHipertensores" value="1" onclick="selectOnlyOneCheckBoxMedAntiHipertensores(this)" style="top: 399px;left: 280px;width: 15px;height: 15px;">
<input type="checkbox" name="medAntiHipertensores" value="2" onclick="selectOnlyOneCheckBoxMedAntiHipertensores(this)" style="top: 399px;left: 297px;width: 15px;height: 15px;">
<input type="checkbox" name="medAntiHipertensores" value="3" onclick="selectOnlyOneCheckBoxMedAntiHipertensores(this)"style="top: 399px;left: 314px;width: 15px;height: 15px;">
<input type="checkbox" name="medAntiHipertensores" value="4" onclick="selectOnlyOneCheckBoxMedAntiHipertensores(this)" style="top: 399px;left: 332px;width: 15px;height: 15px;">
<!-- ALTURA DA TOMA DOS ANTI-HIPERTENSORES -->
<input type="checkbox" name="alturaDaToma" value="1" onclick="selectOnlyOneCheckBoxAlturaDaToma(this)" style="top: 448px;left: 279px;width: 15px;height: 15px;">
<input type="checkbox" name="alturaDaToma" value="2" onclick="selectOnlyOneCheckBoxAlturaDaToma(this)" style="top: 448px;left: 353px;width: 15.2px;height: 15.2px;">
<input type="checkbox" name="alturaDaToma" value="3" onclick="selectOnlyOneCheckBoxAlturaDaToma(this)" style="top: 448px;left: 454px;width: 15.2px;height: 15.2px;">
<!-- Análises Clínicas -->
<input type="text" class="font-size" style="top: 371px;left: 672px;width: 45px;height: 10px;">
<input type="text" class="font-size" style="top: 391px;left: 672px;width: 45px;height: 10px;">
<input type="text" class="font-size" style="top: 412px;left: 672px;width: 45px;height: 10px;">
<input type="text" class="font-size" style="top: 432px;left: 672px;width: 45px;height: 10px;">
<input type="text" class="font-size" style="top: 452px;left: 672px;width: 45px;height: 10px;">
<input type="text" class="font-size" style="top: 472px;left: 672px;width: 45px;height: 10px;">
<input type="text" class="font-size" style="top: 492px;left: 672px;width: 45px;height: 10px;">
<input type="text" class="font-size" style="top: 513px;left: 672px;width: 45px;height: 10px;">
<input type="text" class="font-size" style="top: 533px;left: 672px;width: 45px;height: 10px;">
<input type="text" class="font-size" style="top: 553px;left: 672px;width: 45px;height: 10px;">
<!-- ANTECEDENTES DE DOENÇA CARDIOVASCULAR/RENAL -->
<input type="checkbox" name="avcIsquemico" value="1" onclick="selectOnlyOneCheckBoxAvcIsquemico(this)" style="top: 510px;left: 23px;width: 15px;height: 15px;">
<input type="checkbox" name="avcIsquemico" value="2" onclick="selectOnlyOneCheckBoxAvcIsquemico(this)" style="top: 510px;left: 41px;width: 15px;height: 15px;">
<input type="checkbox" name="avcHemorragico" value="1" onclick="selectOnlyOneCheckBoxAvcHemorragico(this)" style="top: 527px;left: 23px;width: 15px;height: 15px;">
<input type="checkbox" name="avcHemorragico" value="2" onclick="selectOnlyOneCheckBoxAvcHemorragico(this)" style="top: 527px;left: 41px;width: 15px;height: 15px;">
<input type="checkbox" name="enfarte" value="1" onclick="selectOnlyOneCheckBoxEnfarte(this)" style="top: 543px;left: 23px;width: 15px;height: 15px;">
<input type="checkbox" name="enfarte" value="2" onclick="selectOnlyOneCheckBoxEnfarte(this)" style="top: 543px;left: 41px;width: 15px;height: 15px;">
<input type="checkbox" name="revascularizacao" value="1" onclick="selectOnlyOneCheckBoxRevascularizacao(this)"style="top: 560px;left: 23px;width: 15px;height: 15px;">
<input type="checkbox" name="revascularizacao" value="2" onclick="selectOnlyOneCheckBoxRevascularizacao(this)"style="top: 560px;left: 41px;width: 15px;height: 15px;">
<input type="checkbox" name="insuficiencia" value="2" onclick="selectOnlyOneCheckBoxInsuficiencia(this)" style="top: 577px;left: 23px;width: 15.2px;height: 15.2px;">
<input type="checkbox" name="insuficiencia" value="2" onclick="selectOnlyOneCheckBoxInsuficiencia(this)" style="top: 577px;left: 41px;width: 15px;height: 15px;">
<input type="checkbox" name="doencaRenal" value="1" onclick="selectOnlyOneCheckBoxDoencaRenal(this)" style="top: 594px;left: 23px;width: 15px;height: 15px;">
<input type="checkbox" name="doencaRenal" value="2" onclick="selectOnlyOneCheckBoxDoencaRenal(this)" style="top: 594px;left: 41px;width: 15px;height: 15px;">
<!-- Outros medicamentos -->
<input type="checkbox" name="insulina" value="1" onclick="selectOnlyOneCheckBoxInsulina(this)" style="top: 510px;left: 280px;width: 15px;height: 15px;">
<input type="checkbox" name="insulina" value="2" onclick="selectOnlyOneCheckBoxInsulina(this)" style="top: 510px;left: 297px;width: 15.2px;height: 15.2px;">
<input type="checkbox" name="antidis" value="1" onclick="selectOnlyOneCheckBoxAntidis(this)" style="top: 526px;left: 280px;width: 15px;height: 15px;">
<input type="checkbox" name="antidis" value="2" onclick="selectOnlyOneCheckBoxAntidis(this)" style="top: 526px;left: 297px;width: 15.2px;height: 15.2px;">
<input type="checkbox" name="contraceptivos" value="1" onclick="selectOnlyOneCheckBoxContraceptivos(this)" style="top: 543px;left: 280px;width: 15px;height: 15px;">
<input type="checkbox" name="contraceptivos" value="2" onclick="selectOnlyOneCheckBoxContraceptivos(this)" style="top: 543px;left: 297px;width: 15px;height: 15px;">
<!-- ANTIAGREGANTES / ASPIRINA -->
<input type="checkbox" name="aspirina" value="1" onclick="selectOnlyOneCheckBoxAspirina(this)" style="top: 589px;left: 279px;width: 15.2px;height: 15.2px;">
<input type="checkbox" name="aspirina" value="2" onclick="selectOnlyOneCheckBoxAspirina(this)" style="top: 589px;left: 353px;width: 15.2px;height: 15.2px;">
<input type="checkbox" name="aspirina" value="3" onclick="selectOnlyOneCheckBoxAspirina(this)" style="top: 589px;left: 454px;width: 15.2px;height: 15.2px;">
<button type="submit" class="btn"><i class="fa fa-download"></i> Download</button>
</form>
</div>
<script src="formValidation.js"></script>
</body>
</html>
PHP CODE:
<?php
require __DIR__ . '/_core/composer/vendor/autoload.php';
use Dompdf\Dompdf;
use Dompdf\Options;
$options = new Options();
$options->set('enable_html5_parser', true);
$dompdf = new Dompdf($options);
$bodyBackground = file_get_contents('mapa_cardio.png');
$bodyBackground = 'data:image/png;base64,' . base64_encode($bodyBackground);
$bodyHtml = '
<div class="container">
<img src="' . $bodyBackground . '"/>
<form action="" method="POST" style="top:150px">
<input type="text" class="position-absolute transparent-input font-size-name" style="top: 181px;left: 54px;width: 294px;height: 28px;">
<input type="text" class="position-absolute transparent-input font-size-name" maxlength="2" style="top: 181px;left: 468px;width: 19px;height: 28px;">
<input type="text" class="position-absolute transparent-input font-size-name" maxlength="2" style="top: 181px;left: 494px;width: 19px;height: 28px;">
<input type="text" class="position-absolute transparent-input font-size-name" maxlength="4" style="top: 181px;left: 521px;width: 33px;height: 28px;">
<!-- DADOS ANTROPOMÉTRICOS -->
<input type="text" class="font-size" style="top: 243px;left: 26px;width: 26px;height: 10px;">
<input type="text" class="font-size" style="top: 267px;left: 26px;width: 26px;height: 10px;">
<input type="text" class="font-size" style="top: 291px;left: 26px;width: 26px;height: 10px;">
<!-- HÁBITOS -->
<input type="checkbox" name="tabagismo" value="1" onclick="selectOnlyOneCheckBoxTabagismo(this)" style="top: 246px;left: 280.5px;width: 15px;height: 15px;">
<input type="checkbox" name="tabagismo" value="2" onclick="selectOnlyOneCheckBoxTabagismo(this)" style="top: 246px;left: 298px;width: 15px;height: 15px;">
<input type="checkbox" name="alcool" value="1" onclick="selectOnlyOneCheckBoxAlcool(this)" style="top: 263px;left: 280.5px;width: 15px;height: 15px;">
<input type="checkbox" name="alcool" value="2" onclick="selectOnlyOneCheckBoxAlcool(this)" style="top: 263px;left: 298px;width: 15px;height: 15px;">
<!-- ATIVIDADE FÍSICA -->
<input type="checkbox" name="atividadeFisica" value="1" onclick="selectOnlyOneCheckBoxAtividadeFisica(this)" style="top: 310px;left: 280px;width: 15px;height: 15px;">
<input type="checkbox" name="atividadeFisica" value="2" onclick="selectOnlyOneCheckBoxAtividadeFisica(this)" style="top: 310px;left: 366px;width: 15px;height: 15px;">
<!-- FATORES QUE INFLUENCIAM O PROGNÓSTICO -->
<input type="checkbox" name="apneia" value="1" onclick="selectOnlyOneCheckBoxApneia(this)" style="top: 376px;left: 23px;width: 15px;height: 15px;">
<input type="checkbox" name="apneia" value="2" onclick="selectOnlyOneCheckBoxApneia(this)" style="top: 376px;left: 41px;width: 15px;height: 15px;">
<input type="checkbox" name="fibrilhacao" value="1" onclick="selectOnlyOneCheckBoxFibrilhacao(this)" style="top: 392px;left: 23px;width: 15px;height: 15px;">
<input type="checkbox" name="fibrilhacao" value="2" onclick="selectOnlyOneCheckBoxFibrilhacao(this)" style="top: 392px;left: 41px;width: 15px;height: 15px;">
<input type="checkbox" name="menopausa" value="1" onclick="selectOnlyOneCheckBoxMenopausa(this)" style="top: 409px;left: 23px;width: 15px;height: 15px;">
<input type="checkbox" name="menopausa" value="2" onclick="selectOnlyOneCheckBoxMenopausa(this)" style="top: 409px;left: 41px;width: 15px;height: 15px;">
<input type="checkbox" name="diabetes" value="1" onclick="selectOnlyOneCheckBoxDiabetes(this)" style="top: 426px;left: 23px;width: 15px;height: 15px;">
<input type="checkbox" name="diabetes" value="2" onclick="selectOnlyOneCheckBoxDiabetes(this)" style="top: 426px;left: 41px;width: 15px;height: 15px;">
<input type="checkbox" name="diabetesTipo" value="1" onclick="selectOnlyOneCheckBoxDiabetesTipo(this)" style="top: 427px;left: 108px;width: 15px;height: 15px;">
<input type="checkbox" name="diabetesTipo" value="2" onclick="selectOnlyOneCheckBoxDiabetesTipo(this)" style="top: 427px;left: 158px;width: 15px;height: 15px;">
<input type="checkbox" name="diabetesTipo" value="3" onclick="selectOnlyOneCheckBoxDiabetesTipo(this)" style="top: 427px;left: 211px;width: 15px;height: 15px;">
<!-- TRATAMENTO ATUAL -->
<input type="checkbox" name="medAntiHipertensiva" value="1" onclick="selectOnlyOneCheckBoxMedAntiHipertensiva(this)" style="top: 374px;left: 280px;width: 15px;height: 15px;">
<input type="checkbox" name="medAntiHipertensiva" value="2" onclick="selectOnlyOneCheckBoxMedAntiHipertensiva(this)" style="top: 374px;left: 297px;width: 15px;height: 15px;">
<input type="checkbox" name="medAntiHipertensores" value="1" onclick="selectOnlyOneCheckBoxMedAntiHipertensores(this)" style="top: 399px;left: 280px;width: 15px;height: 15px;">
<input type="checkbox" name="medAntiHipertensores" value="2" onclick="selectOnlyOneCheckBoxMedAntiHipertensores(this)" style="top: 399px;left: 297px;width: 15px;height: 15px;">
<input type="checkbox" name="medAntiHipertensores" value="3" onclick="selectOnlyOneCheckBoxMedAntiHipertensores(this)"style="top: 399px;left: 314px;width: 15px;height: 15px;">
<input type="checkbox" name="medAntiHipertensores" value="4" onclick="selectOnlyOneCheckBoxMedAntiHipertensores(this)" style="top: 399px;left: 332px;width: 15px;height: 15px;">
<!-- ALTURA DA TOMA DOS ANTI-HIPERTENSORES -->
<input type="checkbox" name="alturaDaToma" value="1" onclick="selectOnlyOneCheckBoxAlturaDaToma(this)" style="top: 448px;left: 279px;width: 15px;height: 15px;">
<input type="checkbox" name="alturaDaToma" value="2" onclick="selectOnlyOneCheckBoxAlturaDaToma(this)" style="top: 448px;left: 353px;width: 15.2px;height: 15.2px;">
<input type="checkbox" name="alturaDaToma" value="3" onclick="selectOnlyOneCheckBoxAlturaDaToma(this)" style="top: 448px;left: 454px;width: 15.2px;height: 15.2px;">
<!-- Análises Clínicas -->
<input type="text" class="font-size" style="top: 371px;left: 672px;width: 45px;height: 10px;">
<input type="text" class="font-size" style="top: 391px;left: 672px;width: 45px;height: 10px;">
<input type="text" class="font-size" style="top: 412px;left: 672px;width: 45px;height: 10px;">
<input type="text" class="font-size" style="top: 432px;left: 672px;width: 45px;height: 10px;">
<input type="text" class="font-size" style="top: 452px;left: 672px;width: 45px;height: 10px;">
<input type="text" class="font-size" style="top: 472px;left: 672px;width: 45px;height: 10px;">
<input type="text" class="font-size" style="top: 492px;left: 672px;width: 45px;height: 10px;">
<input type="text" class="font-size" style="top: 513px;left: 672px;width: 45px;height: 10px;">
<input type="text" class="font-size" style="top: 533px;left: 672px;width: 45px;height: 10px;">
<input type="text" class="font-size" style="top: 553px;left: 672px;width: 45px;height: 10px;">
<!-- ANTECEDENTES DE DOENÇA CARDIOVASCULAR/RENAL -->
<input type="checkbox" name="avcIsquemico" value="1" onclick="selectOnlyOneCheckBoxAvcIsquemico(this)" style="top: 510px;left: 23px;width: 15px;height: 15px;">
<input type="checkbox" name="avcIsquemico" value="2" onclick="selectOnlyOneCheckBoxAvcIsquemico(this)" style="top: 510px;left: 41px;width: 15px;height: 15px;">
<input type="checkbox" name="avcHemorragico" value="1" onclick="selectOnlyOneCheckBoxAvcHemorragico(this)" style="top: 527px;left: 23px;width: 15px;height: 15px;">
<input type="checkbox" name="avcHemorragico" value="2" onclick="selectOnlyOneCheckBoxAvcHemorragico(this)" style="top: 527px;left: 41px;width: 15px;height: 15px;">
<input type="checkbox" name="enfarte" value="1" onclick="selectOnlyOneCheckBoxEnfarte(this)" style="top: 543px;left: 23px;width: 15px;height: 15px;">
<input type="checkbox" name="enfarte" value="2" onclick="selectOnlyOneCheckBoxEnfarte(this)" style="top: 543px;left: 41px;width: 15px;height: 15px;">
<input type="checkbox" name="revascularizacao" value="1" onclick="selectOnlyOneCheckBoxRevascularizacao(this)"style="top: 560px;left: 23px;width: 15px;height: 15px;">
<input type="checkbox" name="revascularizacao" value="2" onclick="selectOnlyOneCheckBoxRevascularizacao(this)"style="top: 560px;left: 41px;width: 15px;height: 15px;">
<input type="checkbox" name="insuficiencia" value="2" onclick="selectOnlyOneCheckBoxInsuficiencia(this)" style="top: 577px;left: 23px;width: 15.2px;height: 15.2px;">
<input type="checkbox" name="insuficiencia" value="2" onclick="selectOnlyOneCheckBoxInsuficiencia(this)" style="top: 577px;left: 41px;width: 15px;height: 15px;">
<input type="checkbox" name="doencaRenal" value="1" onclick="selectOnlyOneCheckBoxDoencaRenal(this)" style="top: 594px;left: 23px;width: 15px;height: 15px;">
<input type="checkbox" name="doencaRenal" value="2" onclick="selectOnlyOneCheckBoxDoencaRenal(this)" style="top: 594px;left: 41px;width: 15px;height: 15px;">
<!-- Outros medicamentos -->
<input type="checkbox" name="insulina" value="1" onclick="selectOnlyOneCheckBoxInsulina(this)" style="top: 510px;left: 280px;width: 15px;height: 15px;">
<input type="checkbox" name="insulina" value="2" onclick="selectOnlyOneCheckBoxInsulina(this)" style="top: 510px;left: 297px;width: 15.2px;height: 15.2px;">
<input type="checkbox" name="antidis" value="1" onclick="selectOnlyOneCheckBoxAntidis(this)" style="top: 526px;left: 280px;width: 15px;height: 15px;">
<input type="checkbox" name="antidis" value="2" onclick="selectOnlyOneCheckBoxAntidis(this)" style="top: 526px;left: 297px;width: 15.2px;height: 15.2px;">
<input type="checkbox" name="contraceptivos" value="1" onclick="selectOnlyOneCheckBoxContraceptivos(this)" style="top: 543px;left: 280px;width: 15px;height: 15px;">
<input type="checkbox" name="contraceptivos" value="2" onclick="selectOnlyOneCheckBoxContraceptivos(this)" style="top: 543px;left: 297px;width: 15px;height: 15px;">
<!-- ANTIAGREGANTES / ASPIRINA -->
<input type="checkbox" name="aspirina" value="1" onclick="selectOnlyOneCheckBoxAspirina(this)" style="top: 589px;left: 279px;width: 15.2px;height: 15.2px;">
<input type="checkbox" name="aspirina" value="2" onclick="selectOnlyOneCheckBoxAspirina(this)" style="top: 589px;left: 353px;width: 15.2px;height: 15.2px;">
<input type="checkbox" name="aspirina" value="3" onclick="selectOnlyOneCheckBoxAspirina(this)" style="top: 589px;left: 454px;width: 15.2px;height: 15.2px;">
</form>
</div>
<script src="formValidation.js"></script>';
$html = '
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Mapa Cardio</title>
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
background-image: url("mapa_cardio.png");
background-repeat: no-repeat;
background-position: center center;
width: 793px;
position: relative;
margin: 0 auto;
height: 1121px;
}
img {
background-image: url("mapa_cardio.png");
background-repeat: no-repeat;
background-position: center center;
position: absolute;
}
form {
position: relative;
}
input {
position: absolute;
}
.transparent-input {
background-color:rgba(0,0,0,0) !important;
border:none !important;
}
.font-size {
font-size: 12px;
}
.font-size-name {
font-size: 14px;
}
</style>
</head>
<body>' . $bodyHtml . '
</body>
</html>';
$contents = $html = preg_replace('/>\s+</', '><', $html);
$dompdf->loadHtml($contents);
$dompdf->setPaper('A4', 'portrait');
$dompdf->render();
$dompdf->stream("mapa-cardio.pdf", array(true));
?>
Any help/advices will be greatly appreciated.
Basically if your download button posts your form on the "mapa-cardio.php" page.
Update your HTML with
<form method="POST"...//more clean method
Set name property to your input type text
<input type="text" name="name"...
And "mapa-cardio.php" contains your "PHP CODE":
// reference the Dompdf namespace
use Dompdf\Dompdf;
// Get data from form
$name= $_POST['name'];
// instantiate and use the dompdf class
$dompdf = new Dompdf();
// Insert form data into the content
$dompdf->loadHtml('hello : '.$name);
// (Optional) Setup the paper size and orientation
$dompdf->setPaper('A4', 'landscape');
// Render the HTML as PDF
$dompdf->render();
// Output the generated PDF to Browser
$dompdf->stream();
The deal is done!