Button to download HTML form

Asked

Viewed 561 times

0

I made a form in HTML and I would like that when clicking a button on the page, begins the dowload of the page with form filled in in pdf or other possible format.

I did it with mpdf, the problem is that I can not copy the page always, because it is a form:

<?php
    include("mpdf60/mpdf.php");

    $html = "
    <style type='text/css'>
.container-fluid{
    padding:0%;
}
.logo{
    width:200px;
    height:80px;
}
.coluna{
    background-color: #e5e3e3;
    height:1345px;
}
.numeros{
    width:22px;
    height:22px;
    margin-bottom:9px;
}
.titulo{
    font-family: Arial, Verdana;
    font-size: 20px;
    margin-bottom: 0px;
}
.botao, .fundo{
    background-image: linear-gradient(to bottom, #FFFFFF, #F0F0F0);  
    border: solid 1px #c0c0c0;
}
.botao:hover{
    background-image: linear-gradient(to bottom, #F0F0F0, #F0F0F0); 
}
.botao1{
    background-color: #c0c0c0;
    color:#ffffff;
}
.botao1:hover{
    background-color: #7c7474;
    border: solid 1px #c0c0c0;
    color:#ffffff;
}
.botao2{
    background-color: #fcbd11;
    color:#ffffff;
}
.botao2:hover{
    background-color: #cc8f0c;
    border: solid 1px #ffaa00;
    color:#ffffff;
}
@media screen and (max-width: 991px){
.botao1{
    width:100%;
    padding: 8px;
    margin-top: 10px;
}
}
</style>
<script type='text/javascript'>
 function mascara(t, mask){
 var i = t.value.length;
 var saida = mask.substring(1,0);
 var texto = mask.substring(i)
 if (texto.substring(0,1) != saida){
 t.value += texto.substring(0,1);
 }
 }
</script>
</head>
<body>
    <div class='container clearflix'>
        <div class='row-fluid'>
            <img class='logo' src='image/logo.jpg' title=''/>
        </div>
        <div class='row-fluid' style='width:100%;height:1px;background-color:#e5e3e3;margin:0%;padding:0%'></div>
        <form name='cadastro_cliente'>
            <div class='row-fluid'>
                <div class='col-md-12'>
                    <div class='row'>
                        <br>
                        <br>
                        <div class='col-md-12'>
                            <p class='titulo'>Busca de Cliente</p>
                            <div class='row' style='width:100%;height:1px;background-color:#12e824;margin:0%;padding:0%'></div>
                        </div>
                    </div>
                    <div class='row has-success' style='margin-top:1%'>
                        <div class='col-md-7'>
                            <input type='text' class='form-control' name='txtcliente' placeholder='Nome do Cliente...'' aria-describedby='helpBlock2'>
                        </div>


                </div>
            </div>
        </form><!---fechamento do formulário-->
    </div><!---fechamento da div class container-fluid-->
</body>";

$mpdf=new mPDF();
$mpdf->SetDisplayMode('fullpage');
//$css = file_get_contents("css/estilo.css");
$mpdf->WriteHTML($html);
$mpdf->Output();

exit;
php html form pdf

  • tried to write the generated pdf? you can also create a temporary file

  • I understood, how so?

  • When you set up to download from html, if you pass the file address(image, binary, etc.), usually if the browser has support for reading the file, it will open, otherwise request the download if your file php have a echo $mpdf (or similar), to write the contents of pdf, is likely to download or open the reader pdf in the browser.

  • then I can take the input values of the form, pass to that page and assemble a pdf with the content of the inputs

  • yes, you just need to add the content in $html, but if you prefer, and I think it will be easier, would create your page in html even, set a layout using the @media print and have printed by js. So you can choose whether to print or save to pdf using their own apis of browser.

  • as I have printed by js?

  • 1

    window.print(); , this command prints the entire html, to define the style of your page before printing, use in css @media print that makes the page layout for case will print

  • could give me some idea of javascript code using this command

  • 1

    now if you want to print a specific part of your page, you can do so var conteudo = document.getElementById('sua_div').innerHTML; impressao = window.open('about:blank'); impressao.document.write(conteudo); impressao.window.print(); impressao.window.close(); this will pick up the content you want, play on another page, print to close the page.

  • <html lang="en-BR"> <head> </head> <script type="text/javascript"> Function print(){ var contents = Document.getElementById('#form'). innerHTML; impressao = window.open('about:Blank'); impressao.document.write(conteudo); impressao.window.print(); impressao.window.close(); </script> <body> <div id="form"> <form name="formulary"> <label>Client: </label><input type="text" name="client"> <button onclick="print()" name="buttom">Send</button> </form> </div> </body> </html>

  • is not working

  • Let’s go continue this discussion in chat.

  • 1

    The ideal would be to send the form to the PHP of the MPDF, and PHP to generate the final PDF, using the form fields. Although you have accepted an answer that works on Chrome, it is not a solution that works anywhere and browser. The answer is valid, but has how to do something more "universal".

Show 8 more comments

1 answer

1


Using the broswer’s own Apis makes it easier to release the pdf.

<!doctype html>

<html>
    <head>
        <style>
            @media print{
                /*Estilo da impressão*/
            }
        </style>
        <script>
            function doc_print(){
                window.print();
            }
            window.onload = function(){
                // window.print(); (opicional)
                doc_print();
            }
        </script>
    </head>
    <body>
        <!-- Conteúdo da impressão -->
    </body>
</html>

Browser other questions tagged php html form pdf

You are not signed in. Login or sign up in order to post.