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

超链接

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

该功能包含以下插件包：

Presets 安装

import { createUniver, defaultTheme, LocaleType, merge } 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/locales/zh-CN';
 
import '@univerjs/presets/lib/styles/preset-sheets-core.css'
import '@univerjs/presets/lib/styles/preset-sheets-hyper-link.css'
 
const { univerAPI } = createUniver({
  locale: LocaleType.ZH_CN,
  locales: {
    [LocaleType.ZH_CN]: merge(
      {},
      UniverPresetSheetsCoreZhCN,
      UniverPresetSheetsHyperLinkZhCN 
    ),
  },
  theme: defaultTheme,
  presets: [
    UniverSheetsCorePreset(),
    UniverSheetsHyperLinkPreset()
  ]
});

手动组合安装

npm install @univerjs/sheets-hyper-link @univerjs/sheets-hyper-link-ui
import { LocaleType, merge, Univer } from '@univerjs/core';
import { defaultTheme } from "@univerjs/design";
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';
import '@univerjs/sheets-hyper-link-ui/facade';
 
const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.ZH_CN,
  locales: {
    [LocaleType.ZH_CN]: merge(
      SheetsHyperLinkUIZhCN
    ),
  },
});
 
univer.registerPlugin(UniverSheetsHyperLinkPlugin);
univer.registerPlugin(UniverSheetsHyperLinkUIPlugin);

Univer on Node.js 手动组合安装

npm install @univerjs/sheets-hyper-link
import { LocaleType, Univer } from '@univerjs/core';
import { defaultTheme } from "@univerjs/design";
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

完整 facade api 类型定义，请查看 @univerjs/sheets-hyper-link/facade 和 @univerjs/sheets-hyper-link-ui/facade

构建/解析/跳转

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、url、type
const linkInfo = workbook.parseSheetHyperlink('#gid=sheet&range=A1');
console.log(linkInfo);
 
// 0.5.2+支持 跳转到链接
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());
let label = '123';
// 如果当前cell不为空，label也可以不传
await range.setHyperLink(url, label);
 
// 查询当前cell的超链接
let links = range.getHyperLinks();
console.log(links);
let linkId = links[0].id;
label = '456';
 
// 0.5.2+支持 更新超链接，注意这里更新成功后linkId会变成新的id
await range.updateHyperLink(linkId, url, label);
 
// 0.5.2+支持 取消超链接
links = range.getHyperLinks();
linkId = links[0].id;
await range.cancelHyperLink(linkId);
条件格式图片
这个页面对您有帮助吗？