Web SDK

Примечания

Примечания позволяют добавлять к ячейкам электронной таблицы комментарии с дополнительной информацией или пояснениями. Поддержка различных стилей примечаний и операций с ними упрощает понимание данных и совместную работу.

Режим плагинов

Установка

Shell
pnpm add @univerjs/sheets-note @univerjs/sheets-note-ui

Использование

TypeScript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import { UniverSheetsNotePlugin } from '@univerjs/sheets-note'import { UniverSheetsNoteUIPlugin } from '@univerjs/sheets-note-ui'import SheetsNoteUIEnUS from '@univerjs/sheets-note-ui/locale/en-US'import '@univerjs/sheets-note-ui/lib/index.css'import '@univerjs/sheets-note/facade'const univer = new Univer({  locale: LocaleType.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(      SheetsNoteUIEnUS,     ),  },})univer.registerPlugin(UniverSheetsNotePlugin)univer.registerPlugin(UniverSheetsNoteUIPlugin)

Режим предустановок

Установка

Shell
pnpm add @univerjs/preset-sheets-note

Использование

TypeScript
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'import { UniverSheetsNotePreset } from '@univerjs/preset-sheets-note'import UniverPresetSheetsNoteEnUS from '@univerjs/preset-sheets-note/locales/en-US'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-sheets-core/lib/index.css'import '@univerjs/preset-sheets-note/lib/index.css'const { univerAPI } = createUniver({  locale: LocaleType.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(      UniverPresetSheetsCoreEnUS,      UniverPresetSheetsNoteEnUS,     ),  },  presets: [    UniverSheetsCorePreset(),    UniverSheetsNotePreset(),   ],})

Facade API

Полные определения типов Facade API приведены в справочнике FacadeAPI.

Импорт

Примечание для режима плагинов

Импортировать пакет Facade вручную требуется только в режиме плагинов. В режиме предустановок соответствующий пакет Facade уже включен, поэтому дополнительный импорт не нужен.

TypeScript
import '@univerjs/sheets-note/facade'

Получение примечаний

Метод FWorksheet.getNotes возвращает все примечания на листе.

TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const notes = fWorksheet.getNotes()notes.forEach((item) => {  const { row, col, note } = item  console.log(`Cell ${fWorksheet.getRange(row, col).getA1Notation()} has note: ${note}`)})

Метод FRange.getNote возвращает примечание из верхней левой ячейки диапазона.

TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const fRange = fWorksheet.getRange('A1:D10')const note = fRange.getNote()

Добавление и изменение примечаний

Метод FRange.createOrUpdateNote создает или изменяет примечание в верхней левой ячейке диапазона.

TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const fRange = fWorksheet.getRange('A1')fRange.createOrUpdateNote({  note: 'This is an annotation',  width: 160,  height: 100,  show: true,})

Удаление примечаний

Метод FRange.deleteNote удаляет примечание из верхней левой ячейки диапазона.

TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const notes = fWorksheet.getNotes()if (notes.length > 0) {  // Remove the first annotation in the worksheet  const { row, col } = notes[0]  fWorksheet.getRange(row, col).deleteNote()}// Remove the annotation in cell C1const fRange = fWorksheet.getRange('C1')fRange.deleteNote()

Обработчики событий

Полные определения типов событий приведены в разделе События.

Название событияОписание
SheetNoteAddСрабатывает после добавления примечания
SheetNoteDeleteСрабатывает после удаления примечания
SheetNoteUpdateСрабатывает после изменения примечания
SheetNoteShowСрабатывает при отображении примечания
SheetNoteHideСрабатывает при скрытии примечания
BeforeSheetNoteAddСрабатывает перед добавлением примечания
BeforeSheetNoteDeleteСрабатывает перед удалением примечания
BeforeSheetNoteUpdateСрабатывает перед изменением примечания
BeforeSheetNoteShowСрабатывает перед отображением примечания
BeforeSheetNoteHideСрабатывает перед скрытием примечания
Примеры обработчиков событий
TypeScript
// Triggered after adding an annotationconst disposable = univerAPI.addEvent(univerAPI.Event.SheetNoteAdd, (params) => {  const { workbook, worksheet, row, col, note } = params})// Remove event listener using `disposable.dispose()`
TypeScript
// Triggered before removing an annotation, can be canceledconst disposable = univerAPI.addEvent(univerAPI.Event.BeforeSheetNoteDelete, (params) => {  const { workbook, worksheet, row, col, oldNote } = params  // Cancel the annotation deletion operation  params.cancel = true})// Remove event listener using `disposable.dispose()`

Насколько полезно это руководство?

© 2026 DreamNum Co., Ltd.