Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.80/5: Рейтинг темы: голосов - 5, средняя оценка - 4.80
 Аватар для PinkieRAR
4 / 4 / 0
Регистрация: 17.08.2016
Сообщений: 56

ExcelJS автоматическая высота строки

29.06.2022, 12:25. Показов 1442. Ответов 8

Студворк — интернет-сервис помощи студентам
Здравствуйте. Подскажите, пожалуйста, как сделать высоту строки по высоте контента.
Я сделал столбцы с фиксированной шириной, а высоту пытаюсь сделать с помощью
JavaScript
1
cell.aligment.textWrap = true
для каждой клетки в самом конце формирования таблицы, но это не помогает...
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
29.06.2022, 12:25
Ответы с готовыми решениями:

Автоматическая высота iscroll
Из-за библиотеки iscroll.js у меня вычисляется автоматически высота в зависимости от экрана. Так-же у меня возникает пространство, которое...

Автоматическая высота таблицы
Есть страница, она имеет вех и низ, а между ними таблица. Как сделать ширину по окну, я знаю: <table border=1 width=100%> ...

Автоматическая высота grid
Всем привет! Есть такой код: .bl { display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fit,...

8
Эксперт JSЭксперт HTML/CSS
 Аватар для krvsa
3833 / 1672 / 431
Регистрация: 14.03.2022
Сообщений: 4,220
29.06.2022, 12:40
Цитата Сообщение от PinkieRAR Посмотреть сообщение
JavaScript
1
cell.aligment.textWrap = true
Вот что я нашел...
что сработало для меня, так это ,

JavaScript
1
2
3
worksheet.addRow(temp);
const row = worksheet.lastRow;
row.getCell(3).alignment = { wrapText: true };
когда когда-либо добавляется новая строка, необходимо установить выравнивание ячеек 3-й строки.
или
как только все строки будут добавлены на этом листе, выполните итерацию по всем строкам и установите свойство выравнивания.
https://translated.turbopages.... fit-in-the
0
 Аватар для PinkieRAR
4 / 4 / 0
Регистрация: 17.08.2016
Сообщений: 56
29.06.2022, 12:59  [ТС]
Цитата Сообщение от krvsa Посмотреть сообщение
Вот что я нашел
Спасибо за попытку. Как раз на основе этого поста я и сделал то, что описал.
0
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
29.06.2022, 14:50
Цитата Сообщение от PinkieRAR Посмотреть сообщение
на основе этого поста я и сделал то, что описал
JavaScript
1
cell.aligment.textWrap = true
JavaScript
1
row.getCell(3).alignment = { wrapText: true };
Внимательно сравните наименования этих свойств
0
 Аватар для PinkieRAR
4 / 4 / 0
Регистрация: 17.08.2016
Сообщений: 56
29.06.2022, 15:11  [ТС]
Цитата Сообщение от Balanaar Посмотреть сообщение
Внимательно сравните наименования этих свойств
Прошу прощения, тему писал "от руки", в коде всё, как положено
0
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
29.06.2022, 15:21
А что за !. у вас там в коде?
0
 Аватар для PinkieRAR
4 / 4 / 0
Регистрация: 17.08.2016
Сообщений: 56
29.06.2022, 15:30  [ТС]
Цитата Сообщение от Balanaar Посмотреть сообщение
А что за !. у вас там в коде?
TypeScript оператор. Игнорирует возможное значение undefined.
0
 Аватар для PinkieRAR
4 / 4 / 0
Регистрация: 17.08.2016
Сообщений: 56
29.06.2022, 20:56  [ТС]
В общем, я вручную посмотрел сколько символов вмещается в 100 единиц ширины клетки и определил ширину чуть ли не всех символов...

Потом написал классы для определения количества переносов в клетке
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
public getHeight(): number {
    if (this._height)
        return this._height;
 
    const worksheet = this.excelJSCell.worksheet;
    const value = this.excelJSCell.value;
    const column = worksheet.getColumn(this.excelJSCell.col);
    const maxWidth = column.width ?? worksheet.properties.defaultColWidth;
    if (!maxWidth)
        throw new Error('Cell: !maxWidth');
 
    let currentLineWidth = 0;
    let widthToSeparator = 0;
    let rowsCount = 1;
 
    const chars = Array.from(String(value));
    chars.forEach(charValue => {
        const char = new Char(charValue);
 
        currentLineWidth += char.getWidth();
        widthToSeparator += char.getWidth();
 
        if (char.isSeparator()) {
            widthToSeparator = 0;
        }
 
        if (currentLineWidth > maxWidth) {
            currentLineWidth = widthToSeparator;
            rowsCount++;
        }
    });
 
    this._height = Math.max(rowsCount * Char.getHeight(), 1);
 
    return this.getHeight();
}
Весь код:
Кликните здесь для просмотра всего текста
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
import ExcelJS from 'exceljs';
 
class Char {
    public constructor(value: string) {
        this._value = value[0];
    }
 
    // Проверено на шрифте Times New Roman, 11pt
    public getWidth(): number {
        if (this._width)
            return this._width * Char._widthMultiplier;
 
        const widthFound = Char._widths.find(([chars]) => chars.includes(this.value));
        this._width = widthFound?.[1] ?? Char._defaultWidth;
 
        return this.getWidth();
    }
 
    public static getHeight(): number {
        return Char._height;
    }
 
    public isSeparator(): boolean {
        return Char._separators.includes(this.value);
    }
 
    public get value(): string {
        return this._value;
    }
 
 
    private readonly _value: string;
    private _width: number | undefined;
    private static readonly _widthMultiplier = 1;
    private static readonly _height = 14;
 
    private static readonly _defaultWidth = 2;
    // Исходя из количества символов на 100 единиц ширины столбца
    private static readonly _widths: readonly [readonly string[], number][] = [
        [['Ш', 'Щ', 'Ю'], 1.786], // 56
        [['@', 'W'], 1.667], // 60
        [['М', 'M', 'Ы', 'Ж'], 1.563], // 64
        [['Ф', '%'], 1.449], // 69
        [['А', 'Х', '&', 'A', 'D', 'G', 'H', 'K', 'N', 'O', 'Q', 'U', 'V', 'X', 'Y',
            'm', 'w', 'И', 'Й', 'Н', 'О', 'П', 'Ц', 'ю', 'ш', 'щ'], 1.333], // 75
        [['К', 'У', 'B', 'C', 'R', 'В', 'Д', 'Л', 'ж', 'С', 'Э', 'Я', 'ы', 'Ъ'], 1.22], // 82
        [['E', 'L', 'T', 'Z', 'Т', 'Е', 'Ё', 'Ч', 'м', 'ф'], 1.111], // 90
        [['+', '<', '=', '>', 'F', 'P', 'S', '~', 'Г', 'и', 'й', 'н', 'п', 'ц', 'Б', 'Р', 'Ь'], 1], // 100
        [['\\', 'к', '#', '$', '*', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
            '^', '_', 'b', 'd', 'g', 'h', 'k', 'n', 'o', 'p', 'q', 'u', 'v', 'x', 'y',
            '{', '}', 'у', 'х', 'ч', 'б', 'в', 'д', 'л', 'о', 'р', 'З', 'ъ'], 0.885], // 113
        [['г', ' ', '"', '?', 'a', 'c', 'e', 'z', 'т', 'с', 'ь', 'э', 'а', 'е', 'ё', 'я'], 0.775], // 129
        [['s', 'J', 'з'], 0.662], // 151
        [['!', '(', ')', '-', 'I', '[', ']', '`', 'f', 'r'], 0.552], // 181
        [[',', '.', '/', ':', ';', 'i', 'j', 'l', 't'], 0.442], // 226
        [['\'', '|'], 0.332] // 301
    ];
 
    private static readonly _separators: readonly string[] = ['!', '?', ' ', ',', '.', '-'];
}
 
export class Cell {
    constructor(excelJSCell: ExcelJS.Cell) {
        this._excelJSCell = excelJSCell;
    }
 
    public getHeight(): number {
        if (this._height)
            return this._height;
 
        const worksheet = this.excelJSCell.worksheet;
        const value = this.excelJSCell.value;
        const column = worksheet.getColumn(this.excelJSCell.col);
        const maxWidth = column.width ?? worksheet.properties.defaultColWidth;
        if (!maxWidth)
            throw new Error('Cell: !maxWidth');
 
        let currentLineWidth = 0;
        let widthToSeparator = 0;
        let rowsCount = 1;
 
        const chars = Array.from(String(value));
        chars.forEach(charValue => {
            const char = new Char(charValue);
 
            currentLineWidth += char.getWidth();
            widthToSeparator += char.getWidth();
 
            if (char.isSeparator()) {
                widthToSeparator = 0;
            }
 
            if (currentLineWidth > maxWidth) {
                currentLineWidth = widthToSeparator;
                rowsCount++;
            }
        });
 
        this._height = Math.max(rowsCount * Char.getHeight(), 1);
 
        return this.getHeight();
    }
 
    public get excelJSCell(): ExcelJS.Cell {
        return this._excelJSCell;
    }
 
    public getExcelJSCell(): ExcelJS.Cell {
        return this.excelJSCell;
    }
 
    public static from(excelJSCell: ExcelJS.Cell): Cell {
        return new Cell(excelJSCell);
    }
 
 
    private _height: number | undefined;
    private readonly _excelJSCell: ExcelJS.Cell;
}
 
export class Row {
    public static from(excelJSRow: ExcelJS.Row): Row {
        return new Row(excelJSRow);
    }
 
    public toBold(): Row {
        this.forEachCells(cell => {
            !cell.style.font && (cell.style.font = {});
            cell.style.font.bold = true;
        });
 
        return this;
    }
 
    public toLeft(): Row {
        this.forEachCells(cell => {
            !cell.style.alignment && (cell.style.alignment = {});
            cell.style.alignment.horizontal = 'left';
        });
 
        return this;
    }
 
    public merge(firstIndex: number, secondIndex: number): Row {
        this.excelJSRow.worksheet.mergeCells(
            this.excelJSRow.getCell(firstIndex).address,
            this.excelJSRow.getCell(secondIndex).address
        );
 
        return this;
    }
 
    public setAutoHeight(): Row {
        const cells = this.getCells();
        const heights = cells.map(cell => cell.getHeight());
 
        this.excelJSRow.height = Math.max(...heights);
 
        return this;
    }
 
    public setHeight(height: number): Row {
        this.excelJSRow.height = height;
 
        return this;
    }
 
    public showBorders(): Row {
        this.forEachCells(cell => {
            cell.style.border = {
                left: {style: 'thin'},
                top: {style: 'thin'},
                right: {style: 'thin'},
                bottom: {style: 'thin'}
            };
        });
 
        return this;
    }
 
    public forEachCells(callback: (cell: ExcelJS.Cell) => any): Row {
        this.getValues().forEach((value, index) =>
            callback(this.excelJSRow.getCell(index)));
 
        return this;
    }
 
    public getValues(): ExcelJS.CellValue[] {
        return Array.isArray(this.excelJSRow.values)
            ? this.excelJSRow.values
            : Object.values(this.excelJSRow.values);
    }
 
    public get excelJSRow(): ExcelJS.Row {
        return this._excelJSRow;
    }
 
    public getExcelJSRow(): ExcelJS.Row {
        return this.excelJSRow;
    }
 
    public getCells(): Cell[] {
        const cells: Cell[] = [];
        this.excelJSRow.eachCell(excelJSCell => cells.push(new Cell(excelJSCell)));
 
        return cells;
    }
 
 
    private readonly _excelJSRow: ExcelJS.Row;
 
    private constructor(excelJSRow: ExcelJS.Row) {
        this._excelJSRow = excelJSRow;
 
        if (this.excelJSRow.getCell(1).font?.name === 'Times New Roman')
            return;
 
        this.forEachCells(cell => {
            cell.style = {
                font: {
                    name: 'Times New Roman',
                    size: 12,
                    bold: false
                }
            };
 
            cell.alignment = {
                horizontal: 'center',
                vertical: 'middle',
                wrapText: true
            };
        });
    }
}
 
export class Excel {
    public readonly columnsCount: number;
    public readonly workbook: ExcelJS.Workbook;
    public readonly worksheet: ExcelJS.Worksheet;
    public readonly rows: Row[] = [];
 
    public constructor(
        name: string,
        widthColumns: number[]
    ) {
        this.workbook = new ExcelJS.Workbook();
        this.worksheet = this.workbook.addWorksheet(name, {
            pageSetup: {paperSize: 9}
        });
 
        this.worksheet.columns = widthColumns.map(width => ({width}));
 
        this.columnsCount = widthColumns.length;
    }
 
    public addRow(...values: ExcelJS.CellValue[]): Row {
        const newExcelJSRow = this.worksheet.addRow(values);
        const newRow = Row.from(newExcelJSRow);
 
        this.rows.push(newRow);
 
        return newRow;
    }
}

Использовал
JavaScript
1
2
3
4
const excel = new Excel('Экспертиза', [4, 45, 20]);
 
excel.addRow('Экспертное заключение').toBold().merge(1, 3);
//...
И получил какой-никакой результат!
1
 Аватар для PinkieRAR
4 / 4 / 0
Регистрация: 17.08.2016
Сообщений: 56
29.06.2022, 21:10  [ТС]
Неужели ни кто не делал автоматическую высоту
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
29.06.2022, 21:10
Помогаю со студенческими работами здесь

Автоматическая высота не работает на ul
Здравствуйте! Делаю чат. Делаю с помощью списков(ul) поскольку высоту записей вычислить трудно, я делаю их через height:auto; . Однако...

Автоматическая высота картинки
Добрый день! Сайт - armymusic.ru, для примера страница - https://armymusic.ru/R/51-rostov.html Фото исполнителя (маленькое, слева)...

Автоматическая высота блока
В общем нужно сделать так, чтобы блок с информацией о пользователе растягивался вместе с высотой сообщения (см. рис. 1 и рис. 2).

Автоматическая высота строчки в таблице
Подскажите можно ли сделать на подобие вот этой таблицы? То есть, что бы высота строки зависела от содержимого одной из её частей? В...

Автоматическая высота отчета в режиме "Всплывающее окно"
Доброго времени суток! Подскажите пожалуйста, как настроить высоту Отчёта в режиме &quot;Всплывающее окно&quot;, чтобы она...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Новые блоги и статьи
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image
8Observer8 10.02.2026
Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .
Установка Qt-версии Lazarus IDE в Debian Trixie Xfce
volvo 10.02.2026
В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer
8Observer8 08.02.2026
Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru