🎉 v0.5.0 版本已发布。查看详情 →
指南Univer Sheets功能超链接

超链接

Facade API付费版本需要 Univer 服务端Univer on Node.jsPreset
✅--✅UniverSheetsHyperLinkPreset
  1. 超链接功能可跳转工作表、单元格，支持添加、更新、解析和删除链接。
  2. 支持富文本内插入超链接。
  3. 超链接支持 子表、range/cell、defined-name、标准链接(http,mailto等)。

该功能包含以下插件包：

Presets 安装

import { createUniver, defaultTheme, LocaleType, Tools } from '@univerjs/presets';
import { UniverSheetsCorePreset } from '@univerjs/presets/preset-sheets-core';
import UniverPresetSheetsCoreZhCN from '@univerjs/presets/preset-sheets-core/locales/zh-CN';
import { UniverSheetsHyperLinkPreset } from '@univerjs/presets/preset-sheets-hyper-link';
import UniverPresetSheetsHyperLinkZhCN from '@univerjs/presets/preset-sheets-hyper-link/locale/zh-CN';
 
const { univerAPI } = createUniver({
  locale: LocaleType.ZH_CN,
  locales: {
    zhCN: Tools.deepMerge(
      {},
      UniverPresetSheetsCoreZhCN,
      UniverPresetSheetsHyperLinkZhCN 
    ),
  },
  theme: defaultTheme,
  presets: [
    UniverSheetsCorePreset(),
    UniverSheetsHyperLinkPreset()
  ]
});

高级安装

npm install @univerjs/sheets-hyper-link @univerjs/sheets-hyper-link-ui
import { LocaleType, Tools } from '@univerjs/core';
import { UniverSheetsHyperLinkPlugin } from '@univerjs/sheets-hyper-link';
import { UniverSheetsHyperLinkUIPlugin } from '@univerjs/sheets-hyper-link-ui';
import SheetsHyperLinkUIZhCN from '@univerjs/sheets-hyper-link-ui/locale/zh-CN';
 
import '@univerjs/sheets-hyper-link-ui/lib/index.css';
 
import '@univerjs/sheets-hyper-link/facade';
 
const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.ZH_CN,
  locales: {
    [LocaleType.ZH_CN]: Tools.deepMerge(
      SheetsHyperLinkUIZhCN
    ),
  },
});
 
univer.registerPlugin(UniverSheetsHyperLinkPlugin);
univer.registerPlugin(UniverSheetsHyperLinkUIPlugin);

Univer on Node.js 高级安装

npm install @univerjs/sheets-hyper-link
import { LocaleType, Tools } from '@univerjs/core';
import { UniverSheetsHyperLinkPlugin } from '@univerjs/sheets-hyper-link';
 
import '@univerjs/sheets-hyper-link/facade';
 
const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.ZH_CN,
});
 
univer.registerPlugin(UniverSheetsHyperLinkPlugin);

Facade API

构建/解析/跳转

const workbook = univerAPI.getActiveWorkbook();
const sheet = workbook.getActiveSheet();
const range = sheet.getRange(0, 0, 1, 1);
 
// 创建一个链接，跳转到子表
// 返回的链接: `#gid=sheetId`
const sheetLink = workbook.createSheetHyperlink(sheet.getSheetId());
 
// 创建一个链接，跳转到range或者cell
// 返回的链接: `#gid=sheetId&range=A1`
const rangeLink = workbook.createSheetHyperlink(sheet.getSheetId(), range.getRange());
// 或者
const rangeLink = workbook.createSheetHyperlink(
  sheet.getSheetId(),
  {
    startRow: 0,
    endRow: 0,
    startColumn: 0,
    endColumn: 0
  }
);
 
// 解析链接，返回的信息包括link的name、hanlder、type
const linkInfo = workbook.parseSheetHyperlink('#gid=sheet&range=A1');
 
// 跳转到链接
linkInfo.handler();
 
// 或者
workbook.navigateToSheetHyperlink('#gid=sheet&range=A1');

在单元格上操作超链接

const workbook = univerAPI.getActiveWorkbook();
const sheet = workbook.getActiveSheet();
const range = sheet.getRange(0, 0, 1, 1);
 
// 添加一个链接
const url = workbook.createSheetHyperlink(sheet.getSheetId());
const label = '123';
// 如果当前cell不为空，label也可以不传
await range.setHyperLink(url, label);
 
// 查询当前cell的超链接
const links = range.getHyperLinks();
 
// 更新超链接
range.updateHyperLink(linkId, url, label);
 
// 取消超链接
range.cancelHyperLink(linkId);
条件格式浮动图片