web-dev-qa-db-fra.com

Table DomPDF largeur de colonne fixe et texte long de rupture

J'ai un tableau avec de très longs textes sans espaces (les utilisateurs aiment publier une URL de site Web complète avec tous les paramètres)

Ensuite, j'ai mis Word-break:break-all; et Word-wrap:break-Word; sur chaque <td> en espérant que le texte pourrait tenir sur la table.

J'ai également défini tous les <td>/largeurs de colonne à un certain montant spécifié.

J'utilise le wrapper DomPDF de Laravel ici: https://github.com/barryvdh/laravel-dompdf

Cas 1: Non table-layout: fixed

<table class="bordered">
    <tr class="font-12">
        <th style="width: 25px">No</th>
        <th style="width: 100px">Nama Alat</th>
        <th style="width: 25px">Jml</th>
        <th style="width: 300px">Spesifikasi</th>
        <th style="width: 300px">Supplier</th>
        <th style="width: 150px">Gambar</th>
    </tr>
    @foreach ($items as $index => $item)
    <tr>
        <td style="width: 25px">{{ ($index+1) }}</td>
        <td style="width: 100px">{{ $item['name'] }}</td>
        <td style="width: 25px">{{ $item['jumlah_disetujui'] }}</td>
        <td class="font-12" style="width: 300px; Word-break:break-all; Word-wrap:break-Word;">
            {!! nl2br( $item['spesifikasi'] ) !!}
        </td>
        <td class="font-12" style="width: 300px; Word-break:break-all; Word-wrap:break-Word;">
            {!! nl2br( $item['supplier'] ) !!}
        </td>
        <td style="width: 150px">
            @if ($item['image'])
                <img style="max-height: 125px;" src="{{ $item['image'] }}" />
            @else
                -
            @endif
        </td>
    </tr>
    @endforeach
</table>

Cas 1 PDF Résultat: Le retour à la ligne ne fonctionne pas, la largeur de colonne fonctionne sur les cellules avec peu de texte, mais ne fonctionne pas ne fonctionne pas non plus sur les cellules contenant des textes longs (nécessite un retour à la ligne).

Word-wrap does not work

Cas 2: Ajout de table-layout: fixed

<table class="bordered" style="table-layout: fixed"> <!-- only added this -->
    <tr class="font-12">
        <th style="width: 25px">No</th>
        <th style="width: 100px">Nama Alat</th>
        <th style="width: 25px">Jml</th>
        <th style="width: 300px">Spesifikasi</th>
        <th style="width: 300px">Supplier</th>
        <th style="width: 150px">Gambar</th>
    </tr>
    @foreach ($items as $index => $item)
    <tr>
        <td style="width: 25px">{{ ($index+1) }}</td>
        <td style="width: 100px">{{ $item['name'] }}</td>
        <td style="width: 25px">{{ $item['jumlah_disetujui'] }}</td>
        <td class="font-12" style="width: 300px; Word-break:break-all; Word-wrap:break-Word;">
            {!! nl2br( $item['spesifikasi'] ) !!}
        </td>
        <td class="font-12" style="width: 300px; Word-break:break-all; Word-wrap:break-Word;">
            {!! nl2br( $item['supplier'] ) !!}
        </td>
        <td style="width: 150px">
            @if ($item['image'])
                <img style="max-height: 125px;" src="{{ $item['image'] }}" />
            @else
                -
            @endif
        </td>
    </tr>
    @endforeach
</table>

Cas 2 PDF Résultat: Le retour à la ligne fonctionne, mais la largeur de colonne n'a aucun effet

Word-wrap works, but column width has no effect

Ce que je veux, c'est: un tableau avec des colonnes de largeur fixe qui a un retour à la ligne fonctionnel

Est-ce impossible à faire sur DomPDF?
Une solution de contournement ou des "hacks" qui peuvent aider à atteindre cet objectif?

Ou peut-être devrais-je commencer à chercher d'autres/meilleurs générateurs PDF?

MODIFIER:
J'ai également trouvé beaucoup de problèmes Github à ce sujet, sans signe de correction du bug

phphtmlpdfdompdf
6
topher

Pas vraiment une "réponse", mais ma solution est de passer à Snappy PDF (utilisé le Laravel Package ).
Fonctionnait comme un charme, je n'ai même pas changé les balises HTML.

2
topher

J'ai réglé la largeur en% avec la disposition de la table: fixe et cela a bien fonctionné

9
Solonka

J'ai eu le même problème, je l'ai résolu grâce à la réponse de @ Solonka.

Exemple:

<table border="1px" style="table-layout:fixed;">
    <tr>
        <th style="width:5%;">5%</th>
        <th style="width:10%;">10%</th>
        <th style="width:25%;">25%</th>
        <th style="width:60%;">60%</th>
    </tr>
</table>
2
Irvıng Ngr