[FlexGrid] autoRowHeightsとwordWrapがtrueのFlexGridをPDF出力したとき、セルの縦方向の余白がFlexGridで表示しているよりも大きくなる – MESCIUS ナレッジベース

作成日: 2025/02/12 最終更新日: 2025/02/12

文書種別

制限事項

状況

回避方法あり

詳細

autoRowHeights=true かつ wordWrap=true を設定した FlexGrid を FlexGridPdfConverter でPDF出力したとき、セルの縦方向の余白がFlexGridで表示しているよりも大きくなります。また、文字数が多いほど余白が大きくなります。

回避方法

次善策となりますが、PDF出力時に下記の3つの設定を行うことで改善する可能性がございますので、ご利用をご検討ください。

フォントファミリーをFlexGridの設定と同じ値に設定する。
[補足]：
PDFモジュールで標準サポートされているフォントファミリーは 'courier'、'helvetica'、 'symbol'、 'times'、'zapfdingbats'の5つです（詳細）。FlexGridに適用されたフォントと同じフォントをPDFに設定できるのは、サポートされているフォントリストに存在する場合のみで、それ以外の場合はembeddedFontsを使用する必要があります（詳細）。
フォントサイズを FlexGrid のフォントサイズを基準とし、それよりも小さい値に設定する。
verticalAlign を FlexGrid の設定と同じ値に設定する。

const cellStyle = window.getComputedStyle(flexGrid.hostElement.querySelector('.wj-cells .wj-cell'));
const headerCellStyle = window.getComputedStyle(flexGrid.hostElement.querySelector('.wj-header'));
   
gridPdf.FlexGridPdfConverter.export(flexGrid, 'FlexGrid.pdf', {
    ・・・
    styles: {
        cellStyle: {
            font: {
                family: cellStyle.fontFamily,
                size: parseFloat(cellStyle.fontSize) - 2.2,
            },
            verticalAlign: cellStyle.verticalAlign,
         },
        headerCellStyle: {
            font: {
                family: headerCellStyle.fontFamily,
                size: parseFloat(headerCellStyle.fontSize) - 2.2
            },
            verticalAlign: headerCellStyle.verticalAlign,
        }
        ・・・
    }
});

なお、上記の回避方法適用後も、下記の制限が残ります。

・グループ化した際、FlexGrid上で太字で表示されているテキストが出力したPDFでは太字にならない。
・行の高さがPDFの1ページを超える場合、セルの途中までが出力され、次のページにオーバーフローしたコンテンツは表示されない。