Angular Hipervínculos de hojas de cálculo
El componente Angular hoja de cálculo permite la visualización de hipervínculos preexistentes en el libro de Excel, así como la inserción de otros nuevos que pueden vincularse a sitios web, directorios de archivos e incluso otras hojas de cálculo en el libro.
Angular Spreadsheet Hyperlinks Example
EXAMPLE
DATA
MODULES
TS
HTML
SCSS
import { saveAs } from "file-saver" ;
import { Workbook } from "igniteui-angular-excel" ;
import { WorkbookFormat } from "igniteui-angular-excel" ;
import { WorkbookSaveOptions } from "igniteui-angular-excel" ;
export class ExcelUtility {
public static getExtension (format: WorkbookFormat ) {
switch (format) {
case WorkbookFormat.StrictOpenXml:
case WorkbookFormat.Excel2007:
return ".xlsx" ;
case WorkbookFormat.Excel2007MacroEnabled:
return ".xlsm" ;
case WorkbookFormat.Excel2007MacroEnabledTemplate:
return ".xltm" ;
case WorkbookFormat.Excel2007Template:
return ".xltx" ;
case WorkbookFormat.Excel97To2003:
return ".xls" ;
case WorkbookFormat.Excel97To2003Template:
return ".xlt" ;
}
}
public static load(file: File): Promise <Workbook> {
return new Promise <Workbook>((resolve, reject ) => {
ExcelUtility.readFileAsUint8Array(file).then((a ) => {
Workbook.load(a, null , (w ) => {
resolve(w);
}, (e ) => {
reject(e);
});
}, (e ) => {
reject(e);
});
});
}
public static loadFromUrl(url: string ): Promise <Workbook> {
return new Promise <Workbook>((resolve, reject ) => {
const req = new XMLHttpRequest();
req.open("GET" , url, true );
req.responseType = "arraybuffer" ;
req.onload = (d ) => {
const data = new Uint8Array (req.response);
Workbook.load(data, null , (w ) => {
resolve(w);
}, (e ) => {
reject(e);
});
};
req.send();
});
}
public static save(workbook: Workbook, fileNameWithoutExtension : string ): Promise <string > {
return new Promise <string >((resolve, reject ) => {
const opt = new WorkbookSaveOptions();
opt.type = "blob" ;
workbook.save(opt, (d ) => {
const fileExt = ExcelUtility.getExtension(workbook.currentFormat);
const fileName = fileNameWithoutExtension + fileExt;
saveAs(d as Blob, fileName);
resolve(fileName);
}, (e ) => {
reject(e);
});
});
}
private static readFileAsUint8Array(file: File): Promise <Uint8Array > {
return new Promise <Uint8Array >((resolve, reject ) => {
const fr = new FileReader();
fr.onerror = (e ) => {
reject(fr.error);
};
if (fr.readAsBinaryString) {
fr.onload = (e ) => {
const rs = (fr as any ).resultString;
const str: string = rs != null ? rs : fr.result;
const result = new Uint8Array (str.length);
for (let i = 0 ; i < str.length; i++) {
result[i] = str.charCodeAt(i);
}
resolve(result);
};
fr.readAsBinaryString(file);
} else {
fr.onload = (e ) => {
resolve(new Uint8Array (fr.result as ArrayBuffer ));
};
fr.readAsArrayBuffer(file);
}
});
}
}
ts コピー import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { CommonModule } from "@angular/common" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { ExcelUtility } from "./ExcelUtility" ;
import { IgxExcelModule } from "igniteui-angular-excel" ;
import { IgxSpreadsheetModule } from "igniteui-angular-spreadsheet" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
],
imports : [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxExcelModule,
IgxSpreadsheetModule
],
providers : [ExcelUtility],
schemas : []
})
export class AppModule {}
ts コピー import { Component, OnInit, ViewChild } from "@angular/core" ;
import { IgxSpreadsheetComponent } from "igniteui-angular-spreadsheet" ;
import { ExcelUtility } from "./ExcelUtility" ;
@Component ({
standalone : false ,
selector : "app-root" ,
styleUrls : ["./app.component.scss" ],
templateUrl : "./app.component.html"
})
export class AppComponent implements OnInit {
@ViewChild ("spreadsheet" , { static : true })
public spreadsheet: IgxSpreadsheetComponent;
constructor ( ) { }
public ngOnInit ( ) {
const excelFile = "https://static.infragistics.com/xplatform/excel/Hyperlinks.xlsx" ;
ExcelUtility.loadFromUrl(excelFile).then((w ) => {
this .spreadsheet.workbook = w;
});
}
}
ts コピー <div class ="container vertical" >
<igx-spreadsheet #spreadsheet height ="100%" width ="100%" > </igx-spreadsheet >
</div >
html コピー
Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.
Hyperlinks Overview
Los hipervínculos se agregan al control IgxSpreadsheetComponent
accediendo a la colección Hyperlinks
en la hoja de trabajo en la que desea colocar el hipervínculo. Esta colección tiene un método Add
que toma un objeto WorksheetHyperlink
, donde puede definir la dirección de la celda, la URL del hipervínculo a la que se navegará, el texto para mostrar y una información sobre herramientas que se mostrará opcionalmente al pasar el mouse.
Dependencies
Al configurar el control de hoja de cálculo Angular para usar hipervínculos, deberá importar la clase de la WorksheetHyperlink
siguiente manera:
import { WorksheetHyperlink } from 'igniteui-angular-excel' ;
ts
Code Snippet
En el siguiente fragmento de código se muestra cómo agregar un hipervínculo a la hoja de cálculo que se está viendo actualmente en el control Angular IgxSpreadsheetComponent
:
this .spreadsheet.activeWorksheet.hyperlinks().add(new WorksheetHyperlink("A1" , "http://es.infragistics.com" , "Infragistics" , "Infragistics Home Page" ));
ts
API References