web-dev-qa-db-ja.com

DomPDFテーブルの固定列幅と長いテキストの分割

スペースのない非常に長いテキストを含むテーブルがあります(ユーザーはすべてのパラメーターを含む完全なWebサイトのURLを投稿したい)

次に、Word-break:break-all;Word-wrap:break-Word;を各<td>に設定し、テキストがテーブルに収まることを期待しました。

また、すべての<td> /列の幅を指定された値に設定しました。

ここではLaravelのDomPDFラッパーを使用します。 https://github.com/barryvdh/laravel-dompdf


ケース1:いいえ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>

ケース1 PDF結果:ワードラップは機能せず、列幅はテキストの少ないセルでは機能しますが、機能します長いテキストが含まれるセルでは機能しません(ワードラップが必要です)。

Word-wrap does not work


ケース2: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>

ケース2 PDF結果:ワードラップは機能しますが、列幅は影響しません

Word-wrap works, but column width has no effect


私が欲しいのは、ワードラップが機能している固定幅の列を持つテーブルです

DomPDFでこれを行うことは不可能ですか?
これを達成するのに役立つ回避策または「ハッキング」はありますか?

または多分私は他の/より良いPDFジェネレーターを探し始める必要がありますか?

編集:
また、バグが修正されている兆候はなく、Githubに関する多くの問題が見つかりました。

6
topher

実際には「答え」ではありませんが、私の解決策は Snappy PDF に切り替えることです(- Laravelパッケージ を使用)。
HTMLマークアップを変更することすらできませんでした。

2
topher

Table-layout:fixedで幅を%で設定しましたが、うまく機能しました

9
Solonka

同じ問題がありましたが、@ Solonkaの回答のおかげで解決しました。

例:

<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