하이퍼링크
하이퍼링크를 사용하면 스프레드시트 내부의 워크시트와 셀뿐 아니라 외부 웹페이지나 이메일 주소로 빠르게 이동하고 접근할 수 있습니다.
플러그인 모드
설치
Shell
pnpm add @univerjs/sheets-hyper-link @univerjs/sheets-hyper-link-uiShell
npm install @univerjs/sheets-hyper-link @univerjs/sheets-hyper-link-uiShell
yarn add @univerjs/sheets-hyper-link @univerjs/sheets-hyper-link-uiShell
bun add @univerjs/sheets-hyper-link @univerjs/sheets-hyper-link-ui사용법
TypeScript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import { UniverSheetsHyperLinkPlugin } from '@univerjs/sheets-hyper-link'import { UniverSheetsHyperLinkUIPlugin } from '@univerjs/sheets-hyper-link-ui'import SheetsHyperLinkUIEnUS from '@univerjs/sheets-hyper-link-ui/locale/en-US'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({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( SheetsHyperLinkUIEnUS, ), },})univer.registerPlugin(UniverSheetsHyperLinkPlugin)univer.registerPlugin(UniverSheetsHyperLinkUIPlugin)플러그인 및 구성
TypeScript
univer.registerPlugin(UniverSheetsHyperLinkUIPlugin, { // Customize the way external links are opened urlHandler: { navigateToOtherWebsite: url => window.open(`${url}?utm_source=univer`, '_blank'), },})전체 구성 옵션은 IUniverSheetsHyperLinkUIConfig에서 확인할 수 있습니다.
모바일 지원
먼저 모바일 에디터를 구성하세요. 이 페이지의 플러그인 모드 초기화 코드에서 아래 데스크톱 등록을 같은 패키지의 모바일 버전으로 바꾸고 문서를 열기 전에 완료하세요. 모델 플러그인, 스타일, 언어 파일과 Facade 가져오기는 유지하며 두 버전을 동시에 등록하지 마세요.
| 패키지 | 데스크톱 등록 | 모바일 등록 |
|---|---|---|
@univerjs/sheets-hyper-link-ui | UniverSheetsHyperLinkUIPlugin | UniverSheetsHyperLinkMobileUIPlugin |
프리셋 모드
설치
Shell
pnpm add @univerjs/preset-sheets-hyper-linkShell
npm install @univerjs/preset-sheets-hyper-linkShell
yarn add @univerjs/preset-sheets-hyper-linkShell
bun add @univerjs/preset-sheets-hyper-link사용법
TypeScript
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'import { UniverSheetsHyperLinkPreset } from '@univerjs/preset-sheets-hyper-link'import UniverPresetSheetsHyperLinkEnUS from '@univerjs/preset-sheets-hyper-link/locales/en-US'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-sheets-core/lib/index.css'import '@univerjs/preset-sheets-hyper-link/lib/index.css'const { univerAPI } = createUniver({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( UniverPresetSheetsCoreEnUS, UniverPresetSheetsHyperLinkEnUS, ), }, presets: [ UniverSheetsCorePreset(), UniverSheetsHyperLinkPreset(), ],})프리셋 및 구성
TypeScript
UniverSheetsHyperLinkPreset({ // Customize the way external links are opened urlHandler: { navigateToOtherWebsite: url => window.open(`${url}?utm_source=univer`, '_blank'), },})전체 구성 옵션은 IUniverSheetsHyperLinkPresetConfig에서 확인할 수 있습니다.
Facade API
전체 Facade API 타입 정의는 FacadeAPI에서 확인할 수 있습니다.
가져오기
Plugin mode note
플러그인 모드에서만 Facade 패키지를 직접 가져와야 합니다. 프리셋 모드에는 해당 Facade 패키지가 이미 포함되어 있으므로 별도로 가져올 필요가 없습니다.
TypeScript
import '@univerjs/sheets-hyper-link/facade'navigateToSheetHyperlink API는 UI 플러그인에서 제공하므로 다음 패키지를 가져옵니다.
TypeScript
import '@univerjs/sheets-hyper-link-ui/facade'하이퍼링크 만들기
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getSheetByName('Sheet1')if (!fWorksheet) return// Create a hyperlink to Univer on cell A1const fRange = fWorksheet.getRange('A1')await fRange.setHyperLink('//', 'Univer')// Create a hyperlink to active sheet range B2:D4 on cell A2const fRange2 = fWorksheet.getRange('A2')const rangeUrl = fWorksheet.getRange('B2:D4').getUrl()await fRange2.setHyperLink(rangeUrl, 'Link to B2:D4')// Create a hyperlink to another sheet range on cell A3const anotherSheet = fWorkbook.getSheetByName('Another Sheet')if (anotherSheet) { const fRange3 = fWorksheet.getRange('A3') const anotherSheetUrl = anotherSheet.getUrl() await fRange3.setHyperLink(anotherSheetUrl, 'Link to Another Sheet')}// Create a hyperlink to a defined name on cell A4const fRange4 = fWorksheet.getRange('A4')const definedNameHyperlinkUrl = fWorkbook.getUrlOfDefineName('MyDefinedName')await fRange4.setHyperLink(definedNameHyperlinkUrl, 'Link to MyDefinedName')하이퍼링크 가져오기, 업데이트 및 취소
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getSheetByName('Sheet1')if (!fWorksheet) return// Get all hyperlinks in the range A1:D10const fRange = fWorksheet.getRange('A1:D10')const hyperlinks = fRange.getHyperLinks()console.log(hyperlinks)// Update the hyperlink on cell A1const cellA1 = fWorksheet.getRange('A1')const rangeUrl = fWorksheet.getRange('B2:D4').getUrl()await cellA1.updateHyperLink(rangeUrl, 'Link to B2:D4')// Clear all hyperlinks in the range A1:D10fRange.cancelHyperLink()// Or clear a specific hyperlink in the range A1:D10if (hyperlinks.length > 1) { fRange.cancelHyperLink(hyperlinks[1])}하이퍼링크 생성, 파싱 및 이동
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const sheets = fWorkbook.getSheets()// Build a hyperlink url pointing to cell F6 of the first sheetconst hyperlinkUrl = sheets[0].getRange('F6').getUrl()// Parse the hyperlinkconst hyperlinkInfo = fWorkbook.parseSheetHyperlink(hyperlinkUrl)console.log(hyperlinkInfo)// Switch to the second sheetfWorkbook.setActiveSheet(sheets[1])console.log(fWorkbook.getActiveSheet().getSheetName())// Jump to the hyperlink after 3 secondsawait new Promise(resolve => setTimeout(resolve, 3000))fWorkbook.navigateToSheetHyperlink(hyperlinkUrl)console.log(fWorkbook.getActiveSheet().getSheetName())이벤트 리스너
전체 이벤트 타입 정의는 이벤트를 참고하세요.
univerAPI.addEvent()를 사용하여 하이퍼링크 관련 이벤트를 수신할 수 있습니다.
링크 추가 이벤트
univerAPI.Event.BeforeSheetLinkAdd: 링크를 추가하기 전에 발생합니다.
TypeScript
const disposable = univerAPI.addEvent(univerAPI.Event.BeforeSheetLinkAdd, (params) => { const { workbook, worksheet, row, col, link } = params // Cancel the sheet link add operation params.cancel = true})// Remove the event listener, use `disposable.dispose()`링크 업데이트 이벤트
univerAPI.Event.BeforeSheetLinkUpdate: 링크를 업데이트하기 전에 발생합니다.
TypeScript
const disposable = univerAPI.addEvent(univerAPI.Event.BeforeSheetLinkUpdate, (params) => { const { workbook, worksheet, row, column, id, payload } = params // Cancel the sheet link update operation params.cancel = true})// Remove the event listener, use `disposable.dispose()`링크 삭제 이벤트
univerAPI.Event.BeforeSheetLinkCancel: 링크를 취소하기 전에 발생합니다.
TypeScript
const disposable = univerAPI.addEvent(univerAPI.Event.BeforeSheetLinkCancel, (params) => { const { workbook, worksheet, row, column, id } = params // Cancel the sheet link cancel operation params.cancel = true})// Remove the event listener, use `disposable.dispose()`각 이벤트에는 다음과 같은 공통 매개변수가 포함됩니다.
workbook: 현재 워크북 인스턴스worksheet: 현재 워크시트 인스턴스row: 링크가 포함된 셀의 행 인덱스column: 링크가 포함된 셀의 열 인덱스(단,BeforeSheetLinkAdd는column대신col을 사용함)
특수 매개변수:
BeforeSheetLinkAdd이벤트에는 추가할 링크인link가 포함됩니다.BeforeSheetLinkUpdate이벤트에는 다음 항목이 포함됩니다.id: 링크 식별자payload: 새 링크 데이터
BeforeSheetLinkCancel이벤트에는 제거할 링크 식별자인id가 포함됩니다.
모든 이벤트 콜백에서 params.cancel = true를 사용해 해당 작업을 중단할 수 있습니다.
이 가이드는 어떠셨나요?