作成日: 2026/06/30 最終更新日: 2026/06/30
文書種別
制限事項
状況
回避方法あり
詳細
FlexGridXlsxConverterを使用してExcel出力する際、セルスタイルを含める(デフォルトの設定)場合に、ブラウザの拡大率が小さいと罫線が太く出力されます。
本現象は、ブラウザの制限(ブラウザが要素の境界線を処理する方法に起因)によるものです。
WijmoのExcelエクスポート処理では、ブラウザのgetComputedStyleメソッドを使用して罫線の幅を決定しておりますが、getComputedStyleはブラウザのズームレベルに応じて異なる境界線幅の値を返します。
その結果、エクスポートされた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');
});