[Excel] FlexGridXlsxConverterを使用してExcel出力する際、セルスタイルを含める場合に、ブラウザの拡大率が小さいと罫線が太く出力される – MESCIUS ナレッジベース

作成日: 2026/06/30 最終更新日: 2026/06/30

文書種別

制限事項

状況

回避方法あり

詳細

FlexGridXlsxConverterを使用してExcel出力する際、セルスタイルを含める（デフォルトの設定）場合に、ブラウザの拡大率が小さいと罫線が太く出力されます。

本現象は、ブラウザの制限（ブラウザが要素の境界線を処理する方法に起因）によるものです。
WijmoのExcelエクスポート処理では、ブラウザのgetComputedStyleメソッドを使用して罫線の幅を決定しておりますが、getComputedStyleはブラウザのズームレベルに応じて異なる境界線幅の値を返します。
その結果、エクスポートされたExcelの境界線幅がズームレベルによって異なる現象が発生します。

回避方法

Workbook側で罫線のスタイルを設定します。

document.getElementById('btnSave2').addEventListener('click', function () {
    var workbook = wijmo.grid.xlsx.FlexGridXlsxConverter.save(flexGrid2, {
        includeStyles: false,
    });
    
    // workbookBorderSetting作成
    var workbookBorderSetting = new wijmo.xlsx.WorkbookBorderSetting();
    workbookBorderSetting.color = 'brack';
    workbookBorderSetting.style = wijmo.xlsx.BorderStyle.Thin;
    
    // workbookBorder作成
    var workbookBorder = new wijmo.xlsx.WorkbookBorder();
    workbookBorder.top = workbookBorderSetting;
    workbookBorder.bottom = workbookBorderSetting;
    workbookBorder.left = workbookBorderSetting;
    workbookBorder.right = workbookBorderSetting;
    
    // 全セルに罫線を設定
    var sheet = workbook.sheets[0];
    for (var j = 0; j < sheet.rows.length; j++) {
        var row = sheet.rows[j];
        for (var k = 0; k < row.cells.length; k++) {
            row.cells[k].style.borders = workbookBorder;
        }
    }
    
    workbook.save('sample2.xlsx');
});