Hipervínculo
Los hipervínculos se utilizan para navegar y acceder rápidamente al contenido de las hojas de cálculo, como hojas de trabajo internas, celdas y páginas web o direcciones de correo electrónico externas.
Modo de complemento
Instalación
pnpm add @univerjs/sheets-hyper-link @univerjs/sheets-hyper-link-uinpm install @univerjs/sheets-hyper-link @univerjs/sheets-hyper-link-uiyarn add @univerjs/sheets-hyper-link @univerjs/sheets-hyper-link-uibun add @univerjs/sheets-hyper-link @univerjs/sheets-hyper-link-uiUso
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)Complementos y configuración
univer.registerPlugin(UniverSheetsHyperLinkUIPlugin, { // Customize the way external links are opened urlHandler: { navigateToOtherWebsite: url => window.open(`${url}?utm_source=univer`, '_blank'), },})Las opciones de configuración completas se pueden encontrar en IUniverSheetsHyperLinkUIConfig.
Compatibilidad móvil
Configure primero el editor móvil. En la inicialización en modo plugin de esta página, sustituya los registros de escritorio siguientes por las exportaciones móviles de los mismos paquetes antes de abrir un documento. Conserve modelos, estilos, traducciones e importaciones Facade; no registre ambas variantes.
| Paquete | Registro de escritorio | Registro móvil |
|---|---|---|
@univerjs/sheets-hyper-link-ui | UniverSheetsHyperLinkUIPlugin | UniverSheetsHyperLinkMobileUIPlugin |
Modo preestablecido
Instalación
pnpm add @univerjs/preset-sheets-hyper-linknpm install @univerjs/preset-sheets-hyper-linkyarn add @univerjs/preset-sheets-hyper-linkbun add @univerjs/preset-sheets-hyper-linkUso
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(), ],})Preajustes y configuración
UniverSheetsHyperLinkPreset({ // Customize the way external links are opened urlHandler: { navigateToOtherWebsite: url => window.open(`${url}?utm_source=univer`, '_blank'), },})Las opciones de configuración completas se pueden encontrar en IUniverSheetsHyperLinkPresetConfig.
API de Facade
Las definiciones completas del tipo de API de Facade se pueden encontrar en FacadeAPI.
Importación
Plugin mode note
Solo el modo complemento requiere importar manualmente el paquete Facade. El modo preestablecido ya incluye el paquete Facade correspondiente, por lo que no se necesita ninguna importación adicional.
import '@univerjs/sheets-hyper-link/facade'La API navigateToSheetHyperlink la proporciona el complemento UI, así que importe:
import '@univerjs/sheets-hyper-link-ui/facade'Crear hipervínculo
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')Obtener/Actualizar/Cancelar hipervínculo
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])}Crear/Analizar/Saltar hipervínculo
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())Escuchas de eventos
Definiciones completas de tipos de eventos; consulte las definiciones completas de tipos de eventos. Eventos.
Puedes escuchar eventos relacionados con hipervínculos usando univerAPI.addEvent():
Evento de adición de enlace
univerAPI.Event.BeforeSheetLinkAdd: Activado antes de agregar un enlace
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()`Evento de actualización de enlace
univerAPI.Event.BeforeSheetLinkUpdate: Activado antes de actualizar un link
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()`Evento de eliminación de enlace
univerAPI.Event.BeforeSheetLinkCancel: se activa antes de cancelar un enlace
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()`Cada evento incluye los siguientes parámetros comunes:
workbook: Instancia de libro de trabajo actualworksheet: Instancia de hoja de trabajo actualrow: Índice de fila de la celda que contiene el enlacecolumn: Índice de columna de la celda que contiene el enlace (nota:BeforeSheetLinkAddusacolen lugar decolumn)
Parámetros especiales:
- El evento
BeforeSheetLinkAddincluyelink: El enlace que se agregará - El evento
BeforeSheetLinkUpdateincluye:id: Enlace identificadorpayload: Nuevos datos del enlace
- El evento
BeforeSheetLinkCancelincluyeid: Identificador del enlace que se eliminará
Todas las devoluciones de llamada de eventos pueden usar params.cancel = true para evitar la operación correspondiente.
¿Cómo es esta guía?