XLSX: Работа с ячейками на странице XLSX-документа
В этом разделе
UI-контрол
WebSpreadsheetEditorControlJS позволяет работать (просматривать, добавлять, редактировать и удалять) с ячейками на листе XLSX-документа в веб-браузере.
Ячейки можно изменять вручную с помощью мыши/клавиатуры или программным способом.
Добавление ячейки на лист XLSX-документа.
Если вы хотите добавить ячейку на выбранный лист XLSX-документа с помощью мыши, выполните следующие действия:
- Щёлкните правой кнопкой мыши по ячейке, рядом с которой вы хотите вставить новую ячейку. Откроется контекстное меню. В контекстном меню выберите пункт "Insert cell and shift right" либо пункт "Insert cell and shift down". Новая ячейка будет добавлена на лист.
Вот JavaScript код, который демонстрирует, как добавить ячейку на выбранный лист XLSX-документа:
// _spreadsheetDocumentEditorControl is an instance of WebSpreadsheetDocumentEditorControlJS class
// get spreadsheet editor
var spreadsheetEditorControl = _spreadsheetDocumentEditorControl.get_SpreadsheetEditorControl();
// insert empty cells in range of selected cells and shift columns to the right
spreadsheetEditorControl.insertCellsAndShiftRight();
// insert empty cells in range of selected cells and shift rows to down
spreadsheetEditorControl.insertCellsAndShiftDown();
Копирование и вставка ячеек на листе XLSX-документа.
Если вы хотите скопировать и вставить выбранные ячейки на листе XLSX-документа с помощью мыши, выполните следующие действия:
- Нажмите на вкладку "Edit" в UI-контроле WebSpreadsheetDocumentEditorControlJS.
- Выделите ячейки, которые требуется скопировать.
- Нажмите сочетание клавиш "Ctrl+C" ЛИБО нажмите кнопку "Copy content", ЛИБО щёлкните правой кнопкой мыши по выбранным ячейкам и выберите пункт "Copy" в контекстном меню.
- Нажмите на ячейку, где вы хотите вставить скопированные ячейки.
- Нажмите сочетание клавиш "Ctrl+V" ЛИБО нажмите кнопку "Paste content", ЛИБО щёлкните правой кнопкой мыши по выбранным ячейкам и выберите пункт "Paste" в контекстном меню.
Вот JavaScript код, который демонстрирует, как скопировать и вставить ячейки на листе XLSX-документа:
// _spreadsheetDocumentEditorControl is an instance of WebSpreadsheetDocumentEditorControlJS class
// get spreadsheet editor
var spreadsheetEditorControl = _spreadsheetDocumentEditorControl.get_SpreadsheetEditorControl();
// copy content (selected cells, cell text, etc) to the clipboard
spreadsheetEditorControl.doCopy();
// paste content (selected cells, cell text, etc) from the clipboard
spreadsheetEditorControl.doPaste();
Вырезание и вставка ячеек на листе XLSX-документа.
Если вы хотите вырезать и вставить выделенные ячейки на листе XLSX-документа с помощью мыши, выполните следующие действия:
- Нажмите на вкладку "Edit" в UI-контроле WebSpreadsheetDocumentEditorControlJS.
- Выделите ячейки, которые требуется вырезать.
- Нажмите сочетание клавиш "Ctrl+X" ЛИБО нажмите кнопку "Cut content", ЛИБО щёлкните правой кнопкой мыши по выделенным ячейкам и выберите пункт "Cut" в контекстном меню.
- Нажмите сочетание клавиш "Ctrl+V" ЛИБО нажмите кнопку "Paste content", ЛИБО щёлкните правой кнопкой мыши по выделенным ячейкам и выберите пункт "Paste" в контекстном меню.
- Нажмите сочетание клавиш "Ctrl+V" ЛИБО нажмите кнопку "Paste content", ЛИБО щёлкните правой кнопкой мыши по выбранным ячейкам и выберите пункт "Paste" в контекстном меню.
Вот JavaScript код, который демонстрирует, как вырезать и вставить ячейку на листе XLSX-документа:
// _spreadsheetDocumentEditorControl is an instance of WebSpreadsheetDocumentEditorControlJS class
// get spreadsheet editor
var spreadsheetEditorControl = _spreadsheetDocumentEditorControl.get_SpreadsheetEditorControl();
// cut content(selected cells, cell text, etc) to the clipboard
spreadsheetEditorControl.doCut();
// paste content (selected cells, cell text, etc) from the clipboard
spreadsheetEditorControl.doPaste();
Программное изменение значения выделенной ячейки.
Вот JavaScript код, который демонстрирует, как изменить значение выделенной ячейки на листе XLSX-документа:
// _spreadsheetDocumentEditorControl is an instance of WebSpreadsheetDocumentEditorControlJS class
// get the spreadsheet editor
var spreadsheetEditorControl = _spreadsheetDocumentEditorControl.get_SpreadsheetEditorControl();
// get value or formula of focused cell
var cellValue = spreadsheetEditorControl.get_FocusedCellValue();
// set value or formula of focused cell
spreadsheetEditorControl.set_FocusedCellValue("0");
Изменение значения выделенной ячейки с помощью текстового поля во внутренней области ячейки (внутренний редактор).
Если вы хотите изменить значение выделенной ячейки на листе XLSX-документа с помощью мыши, выполните следующие действия:
- Дважды щёлкните по ячейке, которую необходимо изменить.
- Измените значение ячейки.
- Нажмите клавишу "Enter" или клавишу "Tab" ЛИБО нажмите кнопку "Apply change" на панели формул.
Изменение значения выделенной ячейки с помощью текстового поля в строке формул (внешний редактор).
Если вы хотите изменить значение выделенной ячейки на листе XLSX-документа с помощью мыши, выполните следующие действия:
- Щёлкните по ячейке, которую необходимо изменить.
- Установите курсор в текстовое поле на панели формул.
- Измените значение ячейки.
- Нажмите клавишу "Enter" или клавишу "Tab" ЛИБО нажмите кнопку "Apply change" на панели формул.
Изменение числового формата текста выделенных ячеек на листе XLSX-документа.
Если вы хотите изменить числовой формат выделенных ячеек на листе XLSX-документа с помощью мыши, выполните следующие действия:
- Нажмите на вкладку "Home" в UI-контроле WebSpreadsheetDocumentEditorControlJS.
- Выделите ячейки, числовой формат которых требуется изменить.
- Нажмите кнопку "Currency number format", если числовой формат текста требуется изменить на формат "Currency".
- Нажмите кнопку "Percent number format", если числовой формат текста требуется изменить на формат "Percent".
- Выберите числовой формат текста "Number format" в выпадающем элементе, если вы хотите выбрать числовой формат из списка поддерживаемых форматов.
Вот JavaScript код, который демонстрирует, как изменить числовой формат текста выделенных ячеек на листе XLSX-документа:
// _spreadsheetDocumentEditorControl is an instance of WebSpreadsheetDocumentEditorControlJS class
// get the number format of focused cell
var cellValue = _spreadsheetDocumentEditorControl.get_NumberingFormat();
// set the number format of selected cells
_spreadsheetDocumentEditorControl.set_NumberingFormat("0");
Изменение свойств шрифта выделенных ячеек на листе XLSX-документа.
Если вы хотите изменить свойства шрифта выделенных ячеек на листе XLSX-документа с помощью мыши, выполните следующие действия:
- Нажмите на вкладку "Home" в UI-контроле WebSpreadsheetDocumentEditorControlJS.
- Выделите ячейки, свойства шрифта которых необходимо изменить.
- Используйте выпадающие элементы "Font name" и "Font size", если вы хотите изменить шрифт текста выделенных ячеек.
- Нажмите кнопки "Bold text", "Italic text", "Underline text" или "Strikethrought text", если вы хотите использовать жирный шрифт/курсив/подчёркивание/зачёркивание для текста выделенных ячеек.
- Используйте инструмент выбора цвета "Font color", если вы хотите изменить цвет текста выделенных ячеек.
Вот JavaScript код, который демонстрирует, как изменить свойства шрифта для выделенных ячеек на листе XLSX-документа:
// _spreadsheetDocumentEditorControl is an instance of WebSpreadsheetDocumentEditorControlJS class
// get the font name for focused cell
var fontName = _spreadsheetDocumentEditorControl.get_FontName();
// set new font name for selected cells
_spreadsheetDocumentEditorControl.set_FontName("Impact");
// get the font size for focused cell
var fontSize = _spreadsheetDocumentEditorControl.get_FontSize();
// set new font size for selected cells
_spreadsheetDocumentEditorControl.set_FontSize(16);
// get the bold status of text of focused cell
var isBold = _spreadsheetDocumentEditorControl.get_IsFontBold();
// set new bold status for text in selected cells
_spreadsheetDocumentEditorControl.set_IsFontBold(true);
// get the italic status of text of focused cell
var isItalic = _spreadsheetDocumentEditorControl.get_IsFontItalic();
// set new italic status for text in selected cells
_spreadsheetDocumentEditorControl.set_IsFontItalic(true);
// get the underline status of text of focused cell
var isUnderline = _spreadsheetDocumentEditorControl.get_IsFontUnderline();
// set new underline status for text in selected cells
_spreadsheetDocumentEditorControl.set_IsFontUnderline(true);
// get the strikeout status of text of focused cell
var isStrikeout = _spreadsheetDocumentEditorControl.get_IsFontStrikeout();
// set new strikeout status for text in selected cells
_spreadsheetDocumentEditorControl.set_IsFontStrikeout(true);
// get font color (for example, "rgba(0,0,0,1)") for focused cell
var fontColor = _spreadsheetDocumentEditorControl.get_FontColor();
// get a string that represents HTML color ("black", "red", "transparent", "rgb(255,255,255)", "rgba(255,255,255,0.5)")
var htmlColor = "teal";
// set new font color for selected cells
_spreadsheetDocumentEditorControl.set_FontColor(htmlColor);
Изменение свойств текста выделенных ячеек на листе XLSX-документа.
Если вы хотите изменить свойства текста выделенных ячеек на листе XLSX-документа с помощью мыши, выполните следующие действия:
- Нажмите на вкладку "Home" в UI-контроле WebSpreadsheetDocumentEditorControlJS.
- Выделите ячейки, свойства текста которых необходимо изменить.
- Используйте кнопки "Align left", "Center" или "Align right", если требуется изменить горизонтальное выравнивание текста выделенных ячеек.
- Используйте кнопки "Top align", "Middle align" или "Bottom align", если требуется изменить вертикальное выравнивание текста выделенных ячеек.
Вот JavaScript код, который демонстрирует, как изменить свойства текста выделенных ячеек на листе XLSX-документа:
// _spreadsheetDocumentEditorControl is an instance of WebSpreadsheetDocumentEditorControlJS class
// get the text horizontal alignment for focused cell
var textHorizontalAlign = _spreadsheetDocumentEditorControl.get_TextHorizontalAlign();
// create value that defines horizontal alignment
var horizontalAlign = Vintasoft.Imaging.Office.WebTextHorizontalAlignEnumJS("Center");
// set new text horizontal alignment for selected cells
_spreadsheetDocumentEditorControl.set_TextHorizontalAlign(horizontalAlign);
// get the text vertical alignment for focused cell
var textVerticalAlign = _spreadsheetDocumentEditorControl.get_TextVerticalAlign();
// create value that defines vertical alignment
var verticalAlign = Vintasoft.Imaging.Office.WebTextVerticalAlignEnumJS("Bottom");
// set new text vertical alignment for selected cells
_spreadsheetDocumentEditorControl.set_TextVerticalAlign(verticalAlign);
Изменение цвета фона выделенных ячеек на листе XLSX-документа.
Если вы хотите изменить цвет фона выделенных ячеек на листе XLSX-документа с помощью мыши, выполните следующие действия:
Вот JavaScript код, который демонстрирует, как изменить цвет фона выделенных ячеек на листе XLSX-документа:
// _spreadsheetDocumentEditorControl is an instance of WebSpreadsheetDocumentEditorControlJS class
// get the background color (for example, "rgba(255,255,225,1)") of focused cell
var backgroundColor = _spreadsheetDocumentEditorControl.get_FillColor();
// create a string that represents HTML color ("black", "red", "transparent", "rgb(255,255,255)", "rgba(255,255,255,0.5)")
var htmlColor = "rgb(200,150,200)";
// set new background color for selected cells
_spreadsheetDocumentEditorControl.set_FillColor(htmlColor);
Изменение границ выделенных ячеек на листе XLSX-документа.
Если вы хотите изменить границы выделенных ячеек на листе XLSX-документа с помощью мыши, выполните следующие действия:
- Нажмите на вкладку "Edit" в UI-контроле WebSpreadsheetDocumentEditorControlJS.
- Выделите ячейки, границы которых необходимо изменить.
- Используйте кнопки "All borders", "Thick Outside Borders" и "Cell Borders".
Вот JavaScript код, который демонстрирует, как изменить границы выделенных ячеек на листе XLSX-документа:
// _spreadsheetDocumentEditorControl is an instance of WebSpreadsheetDocumentEditorControlJS class
// get the border color (for example, "rgba(255,255,225,1)") of focused cell
var borderColor = _spreadsheetDocumentEditorControl.get_BordersColor();
// create a string that represents HTML color ("black", "red", "transparent", "rgb(255,255,255)", "rgba(255,255,255,0.5)")
var htmlColor = "rgb(200,150,200)";
// set new border color for selected cells
_spreadsheetDocumentEditorControl.set_BordersColor(htmlColor);
Очистка содержимого выделенных ячеек на листе XLSX-документа.
Если вы хотите очистить содержимое выделенных ячеек на листе XLSX-документа с помощью мыши, выполните следующие действия:
- Выделите ячейки, содержимое которых необходимо очистить.
- Щёлкните правой кнопкой мыши по выделенным ячейкам и выберите пункт "Clear Contents" в контекстном меню.
Вот JavaScript код, который демонстрирует, как очистить содержимое ячеек на листе XLSX-документа:
// _spreadsheetDocumentEditorControl is an instance of WebSpreadsheetDocumentEditorControlJS class
// get spreadsheet editor
var spreadsheetEditorControl = _spreadsheetDocumentEditorControl.get_SpreadsheetEditorControl();
// clear contents (value and formula) of selected cells
spreadsheetEditorControl.clearCellsContent();
Объединение и разъединение ячеек на листе XLSX-документа.
Если вы хотите объединить или разъединить выделенные ячейки на листе XLSX-документа с помощью мыши, выполните следующие действия:
- Нажмите на вкладку "Edit" в UI-контроле WebSpreadsheetDocumentEditorControlJS.
- Выделите ячейки, которые требуется объединить или разъединить.
- Нажмите кнопку "Merge Cells", если вы хотите объединить выделенные ячейки.
- Нажмите кнопку "Unmerge Cells", если вы хотите разъединить выделенные ячейки.
Вот JavaScript код, который демонстрирует, как объединить и разъединить ячейки на листе XLSX-документа:
// _spreadsheetDocumentEditorControl is an instance of WebSpreadsheetDocumentEditorControlJS class
// get spreadsheet editor
var _spreadsheetDocumentEditorControl = _spreadsheetDocumentEditorControl.get__spreadsheetDocumentEditorControl();
// merges the selected cells
_spreadsheetDocumentEditorControl.mergeCells();
// unmerges the selected cells
_spreadsheetDocumentEditorControl.unmergeCells();
Удаление ячейки с листа XLSX-документа.
Если вы хотите удалить ячейку с выбранного листа XLSX-документа с помощью мыши, выполните следующие действия:
- Щёлкните правой кнопкой мыши по ячейке, которую вы хотите удалить. Откроется контекстное меню. В контекстном меню выберите пункт "Delete cell and shift left" либо пункт "Delete cell and shift up". Выделенная ячейка будет удалена с листа.
Вот JavaScript-код, который демонстрирует, как удалить ячейку из XLSX-листа:
// _spreadsheetDocumentEditorControl is an instance of WebSpreadsheetDocumentEditorControlJS class
// get spreadsheet editor
var spreadsheetEditorControl = _spreadsheetDocumentEditorControl.get_SpreadsheetEditorControl();
// remove selected cells and shift columns to the left
spreadsheetEditorControl.removeCellsAndShiftLeft();
// remove selected cells and shift rows to up
spreadsheetEditorControl.removeCellsAndShiftUp();