Home / Questions / 364347
Accepted
DAD
Asked: 2020-06-11 18:21:37 +0800 CST 2020-06-11 18:21:37 +0800 CST

Why can't I use textarea and input with DomPDF in Laravel or how could I use it?

  • 772

Well what happens is that I need to export a PDF, the problem I have is when I use the textareait doesn't show me the text correctly.

The following image is the "objective", what I want to achieve, what is in yellow are the spaces between "paragraphs" (which textareaI don't know how I could achieve). enter image description here

Now when I generate the PDF, the table that I will export looks like this:

the first column is with a textarea, and all the text looks that way, in css I puttext-align: justify; enter image description here

But if I don't use text-align: justify;it, it looks like this: (all the text in a single line) enter image description here

CODE:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
 
    <style>
                /*######################################### T-HEAD ##########################*/

                .t-table-pdf thead tr th {
          background: #109090;
          border: rgba(25, 85, 141, 0.3) solid 1px;
          color: #FFF;
          font-size: 12px;
          text-align: center;
          vertical-align: middle;
          text-transform: uppercase;
        }

        /*######################################### T-BODY ##########################*/

        .t-table-pdf tbody tr td {
          border: #d4d4d48f solid 1px;
          color: #444444;
          font-size: 13px;
          /* vertical-align: middle; */
        }

        .t-table-pdf tbody tr .costo-referencial {
          background: transparent;
          color: #444444;
          font-size: 13px;
          text-align: right;
          margin-top: 100%;
          margin-bottom: auto;
        }

        textarea{
          background: transparent;
          border: none;
          color: #444444;
          /* font-size: 13px; */
          /* text-align: justify;           */
        }

        /*######################################### T-FOOT ##########################*/
        .t-table-pdf tfoot tr td {
          background: #109090;
          border: rgba(25, 85, 141, 0.3) solid 1px;
          font-size: 13px;
          text-align: left;
          vertical-align: middle;
          text-transform: uppercase;
          color: #FFF;
          font-weight: bold;
        }

        .t-table-pdf tfoot tr td span {
          /* background: #109090; */
          /* background: red; */
          color: #FFF;
          font-size: 13px;
          text-align: center;
          vertical-align: middle;
          text-align: right;
        }
    </style>

</head>
<body>
    <div class="row">
            <table class="table t-table-pdf">
                <thead>
                    <tr>
                        <th>Nombre del proyeto referencia</th>
                        <th>Tipo</th>
                        <th>Beneficios</th>
                        <th>Descripción de elementos involucrados</th>
                        <th>Costo Referencial</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($referencia as $item)
                    <tr>
                        <td class=""><textarea>{{$item->dato}}</textarea></td>
                        <td class="">{{$item->dato}}</td>
                        <td class="">{{$item->dato}}</td>
                        <td class="">{{$item->dato}}</td>
                        <td class="costo-referencial">$ {{$item->dato}}</td>
                    </tr>
                    @endforeach
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="3"></td>
                        <td>Promedio de Módulos </td>
                        <td class="text-right">$ {{$costo->dato}}</td>
                    </tr>
                </tfoot>
            </table>
    </div>
</body>
</html>

laravel

1 Answers

  1. Best Answer

    The tag <textarea>is used in forms. The appropriate thing would be that you use <p>or, as @porloscerrosΨ suggested <pre>, but I'm not sure if it is the most appropriate.

    Now, if the original text has line breaks, you have to represent that with the tag <br>. PHP has a function called nl2br()that automatically converts all line breaks to <br>, the problem is that when using {{ }}Blade, you are escaping all HTML tags and the <br>would be seen as text.

    To be able to combine everything, what you have to do is:

    {!! nl2br(e($item->dato)) !!}}

    The syntax {!! !!}is to display the information without escaping . Inside we call nl2br()so that it creates the <br>and finally a e()that is a Laravel helper to escape the HTML characters. That is, we escape all characters except the <br>one we generated.

    • 2