Univer
Univer Sheet
Features
Hyperlink
HyperLink
📊 Univer Sheet📝 Univer Doc
import './style.css'; import { LocaleType, Univer, UniverInstanceType } from '@univerjs/core'; import { defaultTheme } from '@univerjs/design'; import { UniverDocsPlugin } from '@univerjs/docs'; import { UniverDocsUIPlugin } from '@univerjs/docs-ui'; import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula'; import { UniverRenderEnginePlugin } from '@univerjs/engine-render'; import { UniverSheetsPlugin } from '@univerjs/sheets'; import { UniverSheetsFormulaPlugin } from '@univerjs/sheets-formula'; import { UniverSheetsUIPlugin } from '@univerjs/sheets-ui'; import { UniverUIPlugin } from '@univerjs/ui'; import { UniverSheetsNumfmtPlugin } from '@univerjs/sheets-numfmt'; import { UniverSheetsHyperLinkUIPlugin } from '@univerjs/sheets-hyper-link-ui'; import { FUniver } from '@univerjs/facade'; import './style.css' import { zhCN, enUS } from 'univer:locales'; const univer = new Univer({ theme: defaultTheme, locale: LocaleType.EN_US, locales: { [LocaleType.ZH_CN]: zhCN, [LocaleType.EN_US]: enUS, }, }); univer.registerPlugin(UniverRenderEnginePlugin); univer.registerPlugin(UniverFormulaEnginePlugin); univer.registerPlugin(UniverUIPlugin, { container: 'app', disableAutoFocus: true, }); univer.registerPlugin(UniverDocsPlugin); univer.registerPlugin(UniverDocsUIPlugin); univer.registerPlugin(UniverSheetsPlugin); univer.registerPlugin(UniverSheetsUIPlugin); univer.registerPlugin(UniverSheetsNumfmtPlugin); univer.registerPlugin(UniverSheetsFormulaPlugin); univer.registerPlugin(UniverSheetsHyperLinkUIPlugin); // create univer sheet instance univer.createUnit(UniverInstanceType.UNIVER_SHEET, { id: 'gyI0JO', sheetOrder: ['RSfWjJFv4opmE1JaiRj80'], name: '', appVersion: '0.1.11', locale: 'zhCN', styles: {}, sheets: { RSfWjJFv4opmE1JaiRj80: { name: 'Worksheet1', id: 'RSfWjJFv4opmE1JaiRj80', tabColor: '', hidden: 0, rowCount: 1000, columnCount: 20, zoomRatio: 1, freeze: { xSplit: 0, ySplit: 0, startRow: -1, startColumn: -1, }, scrollTop: 0, scrollLeft: 0, defaultColumnWidth: 88, defaultRowHeight: 24, mergeData: [], cellData: { '0': { '0': { p: { id: '__INTERNAL_EDITOR__DOCS_NORMAL', documentStyle: { pageSize: { width: 270.44940185546875, height: null, }, marginTop: 0, marginBottom: 1, marginRight: 2, marginLeft: 2, renderConfig: { horizontalAlign: 0, verticalAlign: 0, centerAngle: 0, vertexAngle: 0, wrapStrategy: 0, }, }, body: { dataStream: '\u001fhttps://univer-preview.vercel.app/sheets/\u001e\r12323\r\u001fA100\u001e\r\n', textRuns: [], paragraphs: [ { startIndex: 43, paragraphStyle: { horizontalAlign: 0, }, }, { startIndex: 49, paragraphStyle: { horizontalAlign: 0, }, }, { startIndex: 93, paragraphStyle: { horizontalAlign: 0, }, }, ], sectionBreaks: [ { startIndex: 94, }, ], customRanges: [ { startIndex: 0, endIndex: 42, rangeId: 'tnxxGNtWAuHrpz4fBGAYh', rangeType: 0, properties: { url: 'https://univer-preview.vercel.app/sheets/', }, }, { startIndex: 50, endIndex: 54, rangeId: 'j4NsUHxjolNihMoYdZ-oj', rangeType: 0, properties: { url: '#gid=RSfWjJFv4opmE1JaiRj80&range=A100', }, }, ], customDecorations: [], }, drawings: {}, drawingsOrder: [], settings: { zoomRatio: 1, }, }, }, '5': { p: { id: 'd', documentStyle: { pageSize: { width: 111.55900573730469, height: null, }, marginTop: 0, marginBottom: 1, marginRight: 2, marginLeft: 2, renderConfig: { horizontalAlign: 0, verticalAlign: 0, centerAngle: 0, vertexAngle: 0, wrapStrategy: 0, }, }, body: { dataStream: '\u001fhttps://univer.ai/\u001e\r\n', customRanges: [ { startIndex: 0, endIndex: 19, rangeId: 'QY6zbQrxGw8IaLGXDgVVj', rangeType: 0, properties: { url: 'https://univer.ai/', }, }, ], }, drawings: {}, drawingsOrder: [], }, }, }, '1': { '1': { p: { id: 'd', documentStyle: { pageSize: { width: 63.48457336425781, height: null, }, marginTop: 0, marginBottom: 1, marginRight: 2, marginLeft: 2, renderConfig: { horizontalAlign: 0, verticalAlign: 0, centerAngle: 0, vertexAngle: 0, wrapStrategy: 0, }, }, body: { dataStream: '\u001fA1:C10\u001e\r\n', customRanges: [ { rangeId: '-iBTs-HYMzJzRu-mJkena', rangeType: 0, startIndex: 0, endIndex: 7, properties: { url: '#gid=RSfWjJFv4opmE1JaiRj80&range=A1:C10', }, }, ], customDecorations: [], }, drawings: {}, drawingsOrder: [], }, }, }, '7': { '0': { p: { id: 'd', documentStyle: { pageSize: { width: 63.48457336425781, height: null, }, marginTop: 0, marginBottom: 1, marginRight: 2, marginLeft: 2, renderConfig: { horizontalAlign: 0, verticalAlign: 0, centerAngle: 0, vertexAngle: 0, wrapStrategy: 0, }, }, body: { dataStream: '\u001fworksheet2\u001e\r\n', customRanges: [ { rangeId: '-iBTs-HYMzJzRu-mJkena', rangeType: 0, startIndex: 0, endIndex: 11, properties: { url: '#gid=test', }, }, ], customDecorations: [], }, drawings: {}, drawingsOrder: [], }, }, '1': { p: { id: 'd', documentStyle: { pageSize: { width: 63.48457336425781, height: null, }, marginTop: 0, marginBottom: 1, marginRight: 2, marginLeft: 2, renderConfig: { horizontalAlign: 0, verticalAlign: 0, centerAngle: 0, vertexAngle: 0, wrapStrategy: 0, }, }, body: { dataStream: '\u001fworksheet2-A100\u001e\r\n', customRanges: [ { rangeId: '-iBTs-HYMzJzRu-mJkena', rangeType: 0, startIndex: 0, endIndex: 16, properties: { url: '#gid=test&range=A100', }, }, ], customDecorations: [], }, drawings: {}, drawingsOrder: [], }, }, '3': { p: { id: 'd', documentStyle: { pageSize: { width: 63.48457336425781, height: null, }, marginTop: 0, marginBottom: 1, marginRight: 2, marginLeft: 2, renderConfig: { horizontalAlign: 0, verticalAlign: 0, centerAngle: 0, vertexAngle: 0, wrapStrategy: 0, }, }, body: { dataStream: '\u001funiver.ai\u001e\r\n', customRanges: [ { rangeId: '-iBTs-HYMzJzRu-mJkena', rangeType: 0, startIndex: 0, endIndex: 10, properties: { url: 'https://univer.ai/', }, }, ], customDecorations: [], }, drawings: {}, drawingsOrder: [], }, }, }, '99': { '0': { p: { id: 'd', documentStyle: { pageSize: { width: 63.48457336425781, height: null, }, marginTop: 0, marginBottom: 1, marginRight: 2, marginLeft: 2, renderConfig: { horizontalAlign: 0, verticalAlign: 0, centerAngle: 0, vertexAngle: 0, wrapStrategy: 0, }, }, body: { dataStream: '\u001fA1:C10\u001e\r\n', customRanges: [ { rangeId: '-iBTs-HYMzJzRu-mJkena', rangeType: 0, startIndex: 0, endIndex: 7, properties: { url: '#gid=RSfWjJFv4opmE1JaiRj80&range=A1:C10', }, }, ], customDecorations: [], }, drawings: {}, drawingsOrder: [], }, }, }, }, rowData: { '0': { hd: 0, h: 24, ah: 49, }, }, columnData: { '0': { w: 111.109375, hd: 0, }, }, showGridlines: 1, rowHeader: { width: 46, hidden: 0, }, columnHeader: { height: 20, hidden: 0, }, rightToLeft: 0, }, test: { name: 'Worksheet2', id: 'test', tabColor: '', hidden: 0, rowCount: 1000, columnCount: 20, zoomRatio: 1, freeze: { xSplit: 0, ySplit: 0, startRow: -1, startColumn: -1, }, scrollTop: 0, scrollLeft: 0, defaultColumnWidth: 88, defaultRowHeight: 24, mergeData: [], cellData: { '0': { '0': { v: 'This is worksheet2', }, }, }, rowData: { '0': { hd: 0, h: 24, ah: 49, }, }, columnData: { '0': { w: 111.109375, hd: 0, }, }, showGridlines: 1, rowHeader: { width: 46, hidden: 0, }, columnHeader: { height: 20, hidden: 0, }, rightToLeft: 0, }, }, resources: [ { name: 'SHEET_DEFINED_NAME_PLUGIN', data: '', }, ], });
- The hyperlink feature allows jumping to worksheets and cells, supporting adding, updating, parsing, and removing links.
- Supports inserting hyperlinks within rich text.
- Hyperlinks support sub-sheets, ranges/cells, defined names, and standard links (http, mailto, etc.).
Installation
pnpm add @univerjs/sheets-hyper-link @univerjs/sheets-hyper-link-ui
Import
import '@univerjs/sheets-hyper-link-ui/lib/index.css';
import { UniverSheetsHyperLinkPlugin } from '@univerjs/sheets-hyper-link';
import { UniverSheetsHyperLinkUIPlugin } from '@univerjs/sheets-hyper-link-ui';
Internationalization
import { LocaleType, Tools } from '@univerjs/core';
import SheetsHyperLinkUIEnUS from '@univerjs/sheets-hyper-link-ui/locale/en-US';
const univer = new Univer({
theme: defaultTheme,
locale: LocaleType.EN_US,
locales: {
[LocaleType.EN_US]: Tools.deepMerge(
SheetsHyperLinkUIEnUS
),
},
});
Register
univer.registerPlugin(UniverSheetsHyperLinkPlugin);
univer.registerPlugin(UniverSheetsHyperLinkUIPlugin);