La biblioteca de Excel Infragistics React le permite trabajar con datos de hojas de cálculo utilizando objetos familiares de hojas de cálculo de Microsoft® Excel® como workbook, Worksheet, Cell, Formula y muchos más. La biblioteca de Excel Infragistics React facilita la representación de los datos de su aplicación en una hoja de cálculo de Excel, así como la transferencia de datos de Excel a su aplicación.
importReactfrom'react';
importReactDOMfrom'react-dom/client';
import'./index.css';
import { ExcelUtility } from'./ExcelUtility';
// import { ExcelSharedData } from './ExcelSharedData';import { IgrExcelModule } from"@infragistics/igniteui-react-excel";
import { Workbook } from"@infragistics/igniteui-react-excel";
import { Worksheet } from"@infragistics/igniteui-react-excel";
import { WorkbookFormat } from"@infragistics/igniteui-react-excel";
IgrExcelModule.register();
exportdefaultclass ExcelLibraryOverview extendsReact.Component<any, any> {
public canSave = false;
public wb: Workbook;
public ws: Worksheet;
public worksheetRegion: string[] | null;
public selectedRegion: string | null;
constructor(props: any) {
super(props);
this.init();
}
public workbookSave(): void {
if (this.canSave) {
ExcelUtility.save(this.wb, "ExcelWorkbook").then((f: any) => {
console.log("Saved:" + f);
}, (e: any) => {
console.error("ExcelUtility.Save Error:" + e);
});
}
}
public workbookParse(wb: Workbook): void {
if (wb === undefined) {
this.worksheetRegion = null;
this.selectedRegion = null;
} else {
constnames = new Array<string>();
constworksheets = wb.worksheets();
constwsCount = worksheets.count;
for (leti = 0; i < wsCount; i ++) {
const tables = worksheets.item(i).tables();
const tCount = tables.count;
for (let j = 0; j < tCount; j++) {
names.push(worksheets.item(i).name + " - " + tables.item(j).name);
}
}
this.worksheetRegion = names;
this.selectedRegion = names.length > 0 ? names[0] : null;
}
this.wb = wb;
this.canSave = wb != null;
}
public workbookCreate(): void {
const wb = new Workbook(WorkbookFormat.Excel2007);
const employeeSheet = wb.worksheets().add("Employees");
const employeeHeader = employeeSheet.rows(0);
const companies = ["Amazon", "Ford", "Jaguar", "Tesla", "IBM", "Microsoft" ];
const firstNames = ["Andrew", "Mike", "Martin", "Ann", "Victoria", "John", "Brian", "Jason", "David" ];
const lastNames = ["Smith", "Jordan", "Johnson", "Anderson", "Louis", "Phillips", "Williams" ];
const countries = ["UK", "France", "USA", "Germany", "Poland", "Brazil" ];
const titles = ["Sales Rep.", "Engineer", "Administrator", "Manager" ];
const employeeColumns = ["Name", "Company", "Title", "Age", "Country"];
for (let col = 0; col < employeeColumns.length; col++) {
employeeSheet.columns(col).width = 5000;
employeeHeader.setCellValue(col, employeeColumns[col]);
}
for (let i = 1; i < 20; i++) {
const company = this.getItem(companies);
const title = this.getItem(titles);
const country = this.getItem(countries);
const name = this.getItem(firstNames) + " " + this.getItem(lastNames);
const salary = this.getRandom(45000, 95000);
const age = this.getRandom(20, 65);
const wr = employeeSheet.rows(i);
wr.setCellValue(0, name);
wr.setCellValue(1, company);
wr.setCellValue(2, title);
wr.setCellValue(3, age);
wr.setCellValue(4, country);
wr.setCellValue(5, salary);
}
const expanseSheet = wb.worksheets().add("Expanses");
const expanseHeader = expanseSheet.rows(0);
const expanseNames = ["Year", "Computers", "Research", "Travel", "Salary", "Software" ];
let expanseCol = 0;
for (const key of expanseNames) {
expanseSheet.columns(expanseCol).width = 5000;
expanseHeader.setCellValue(expanseCol, key);
for (let i = 1; i < 20; i++) {
const wr = expanseSheet.rows(i);
if (key === "Year") {
wr.setCellValue(expanseCol, 2010 + i);
} else if (key === "Computers") {
wr.setCellValue(expanseCol, this.getAmount(50000, 65000));
} else if (key === "Research") {
wr.setCellValue(expanseCol, this.getAmount(150000, 165000));
} else if (key === "Travel") {
wr.setCellValue(expanseCol, this.getAmount(20000, 25000));
} else if (key === "Salary") {
wr.setCellValue(expanseCol, this.getAmount(4000000, 450000));
} else if (key === "Software") {
wr.setCellValue(expanseCol, this.getAmount(100000, 150000));
}
}
expanseCol++;
}
const incomeSheet = wb.worksheets().add("Income");
const incomeHeader = incomeSheet.rows(0);
const incomeNames = ["Year", "Phones", "Computers", "Software", "Services", "Royalties" ];
let incomeCol = 0;
for (const key of incomeNames) {
incomeSheet.columns(incomeCol).width = 5000;
incomeHeader.setCellValue(incomeCol, key);
for (let i = 1; i < 20; i++) {
const wr = incomeSheet.rows(i);
if (key === "Year") {
wr.setCellValue(incomeCol, 2010 + i);
} else if (key === "Software") {
wr.setCellValue(incomeCol, this.getAmount(700000, 850000));
} else if (key === "Computers") {
wr.setCellValue(incomeCol, this.getAmount(250000, 265000));
} else if (key === "Royalties") {
wr.setCellValue(incomeCol, this.getAmount(400000, 450000));
} else if (key === "Phones") {
wr.setCellValue(incomeCol, this.getAmount(6000000, 650000));
} else if (key === "Services") {
wr.setCellValue(incomeCol, this.getAmount(700000, 750000));
}
}
incomeCol++;
}
this.workbookParse(wb);
}
public getRandom(min: number, max: number): number {
return Math.floor(Math.random() * (max - min + 1) + min);
}
public getItem(array: string[]): string {
const i = this.getRandom(0, array.length - 1);
return array[i];
}
public getAmount(min: number, max: number) {
const n = this.getRandom(min, max);
const s = n.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, "$&,");
return s;
}
public onClick = () => {
this.workbookSave();
}
public render(): JSX.Element {
return (
<divclassName="container sample"><divclassName="options horizontal"><buttononClick={this.onClick}>Save Workbook</button></div></div>
);
}
public init() {
this.workbookCreate();
}
}
// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ExcelLibraryOverview/>);
tsx
¿Te gusta esta muestra? Obtenga acceso a nuestro completo kit de herramientas Ignite UI for React y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
dependencias
Al instalar el paquete de Excel, también se debe instalar el paquete principal.
La biblioteca de Excel contiene 5 módulos que puede usar para limitar el tamaño del paquete de su aplicación:
IgxExcelCoreModule: contiene el modelo de objetos y gran parte de la infraestructura de Excel.
IgxExcelFunctionsModule: contiene la mayoría de las funciones para evaluaciones de fórmulas, como suma, promedio, mínimo, máximo, etc. La ausencia de este módulo no causará ningún problema con el análisis de fórmulas si se va a calcular la fórmula. Por ejemplo, si aplica una fórmula como “=SUM(A1:A5)” y solicita el valor de la celda, obtendrá un #NOMBRE. error devuelto. Este no es un lanzamiento de excepción: es un objeto que representa un error particular, ya que las fórmulas pueden generar errores.
IgxExcelXlsModule: contiene la lógica de carga y guardado para archivos de tipo xls (y relacionados), es decir, los WorkbookFormats relacionados con Excel97to2003.
IgxExcelXlsxModule: contiene la lógica de carga y guardado para archivos de tipo xlsx (y relacionados), es decir, los WorkbookFormats relacionados con Excel2007 y StrictOpenXml.
IgxExcelModule: esto hace referencia a los otros 4 módulos y, por lo tanto, básicamente garantiza que toda la funcionalidad esté cargada/disponible.
Versiones compatibles de Microsoft Excel
La siguiente es una lista de las versiones compatibles de Excel.**
MicrosoftExcel 97
MicrosoftExcel 2000
MicrosoftExcel 2002
MicrosoftExcel 2003
MicrosoftExcel 2007
MicrosoftExcel 2010
MicrosoftExcel 2013
Excel 2016
Cargar y guardar libros de trabajo
Ahora que se importa el módulo de la Biblioteca de Excel, el siguiente paso es cargar un libro.
En el siguiente fragmento de código, se utiliza una clase ExcelUtility externa para guardar y cargar un workbook.
Para cargar y guardar objetos workbook, puede utilizar el método de guardar del objeto workbook real, así como su método Load estático.