wkhtmltopdf を使用して HTML テーブル レポートを変換します:
ここには多くのコードがあることはわかっていますが、位置がずれている行がいくつかあります。それは 1 行だけではなく、ランダムです。 HTML をブラウザに入力すると、正常に表示されますが、印刷版には変換されません。 この問題を解決するにはどうすればよいでしょうか?ありがとう＃＃＃
さらに行を追加した後、問題を再現することができました。これは、この問題が実際に非常に予測不可能であることを示しています。
ただし、この問題は border-collapse:collapse; css プロパティが原因であるようです。これを削除すると、すべての行が同じ高さになります。
border-collapse:collapse;
もちろん、これにより表の各セルの周囲に白い境界線が表示されますが、これは望ましくない場合があります。
枠線をセルに溶け込ませるには、(個々のセルの background-color プロパティではなく) テーブル全体の背景パターンを使用して列に色を付けることが解決策です。
background-color
以下のコードでは、テーブルの列幅と色を備えた 3 つの四角形で構成されるインライン SVG イメージを作成します。 リーリー
に調整する必要があります。 リーリー
リーリー
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
さらに行を追加した後、問題を再現することができました。これは、この問題が実際に非常に予測不可能であることを示しています。
ただし、この問題は
border-collapse:collapse;css プロパティが原因であるようです。これを削除すると、すべての行が同じ高さになります。もちろん、これにより表の各セルの周囲に白い境界線が表示されますが、これは望ましくない場合があります。
枠線をセルに溶け込ませるには、(個々のセルの
background-colorプロパティではなく) テーブル全体の背景パターンを使用して列に色を付けることが解決策です。以下のコードでは、テーブルの列幅と色を備えた 3 つの四角形で構成されるインライン SVG イメージを作成します。 リーリー
変換中に列幅が正しく計算されるようにするには、dpi 設定を 130:に調整する必要があります。 リーリー
HTMLコード:リーリー
生成された PDF ファイル: