domPDF 动态输入值到 PDF

Question

我一直致力于使用 domPDF 转换 HTML PDF，因此 objective 是将用户操作的输入转换为 PDF。数据不是来自数据库，而是基于用户选择和写入的内容。例如，他写下自己的名字、出生日期并选中特定的复选框—— preview

目前，我只设法创建了带有背景和空白输入的 PDF

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">
        <!-- 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 代码：

<?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)); 

?>

任何 help/advices 将不胜感激。

Answer 1

基本上，如果您的下载按钮将您的表单发布到“mapa-cardio.php”页面上。

将您的 HTML 更新为

<form method="POST"...//more clean method

将名称属性设置为您的输入类型文本

<input type="text" name="name"...

并且“mapa-cardio.php”包含您的“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();

交易完成！

domPDF 动态输入值到 PDF

domPDF dynamic input values to PDF

php

dompdf

html-to-pdf

css-to-pdf