技术文章

基于 Angular 14.1.x 版本的 Ignite UI 的信息。

这是读取模板的 Excel 文件，写出必要数据并将其保存在 Excel 文件中的示例。

模板的Excel文件

写入数据后的图像

代码片段

1.app.module.ts

导入 IgxExcel 模块。

应用程序。模组。TS

...

从'igniteui-angular-excel'导入{ IgxExcelModule } ；

@NgModule ( { _

...

进口：[

浏览器模块，

浏览器动画模块，

IgxExcel模块，

] ,

...

} )

...

2.app.component.html

用于选择文件的对话框带有输入（类型=“文件”）。

<!-- app.component.html -->

<输入

类型= “文件” #fileInput

accept = "application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"

( change) = "changeFile($event, fileInput.files)" />

3. 应用程序组件.ts

加载 Excel 文件，写入数据，并保存在输入更改事件（type=”file”）的事件处理程序 changeFile() 中。

// app.component.ts

从“./ExcelUtility”导入{ ExcelUtility } ；

@组件（{

选择器：'app-root' ，

templateUrl: './app.component.html' ,

styleUrls: [ './app.component.scss' ]

} )

导出类AppComponent { 

title = 'kb3886-app1' ;

公共网格数据：任何[ ] ；

构造函数（）{ 

}

ngOnInit ( ) : void { 

这个。网格数据= [ ] ;

for (让i = 0 ; i < 5 ; i++ ) { 

这个。网格数据。push ( { ID: i, TaskName: "任务" + i, 受让人: "担当者" + i, Progress : Math.floor ( Math.random ( ) * 11 ) * 10 } ) ; 

}

}

public async changeFile ( event, files: any ) : Promise < void > { 

// 读取工作簿

让工作簿 =等待ExcelUtility。加载（文件[ 0 ] ）；

// 填写网格数据

让rowOffset = 5 ;

让cellOffset = 1 ;

让钥匙=对象。钥匙（这。gridData [ 0 ] ）；_

for ( let i = 0 ; i < this . gridData . length ; i++ ) { 

for ( let j = 0 ; j < keys.length ; j ++ ) { 

工作簿。工作表( 0 ) 。行( i + rowOffset ) 。细胞（j + cellOffset ）。价值=这个。gridData [ i ] [ keys [ j ] ] ;

}

}

// 保存工作簿

Excel实用程序。保存（工作簿，“任务进度” ）；

}

}

4.ExcelUtility.ts

收集用于处理 Excel 文件的有用方法的实用程序类。从Excel实用程序复制。

// ExcelUtility.ts

import { saveAs } from "file-saver" ; // npm 包：“文件保护程序”：“^1.3.8” 

从'igniteui-angular-excel'导入{工作簿} ；

从'igniteui-angular-excel'导入{ WorkbookFormat } ；

从'igniteui-angular-excel'导入{ WorkbookSaveOptions } ；

导出类ExcelUtility { 

公共静态getExtension （格式：WorkbookFormat ）{ 

切换（格式）{ 

案例工作簿格式。严格打开 Xml ：

案例工作簿格式。Excel2007 ：

返回“.xlsx” ；

案例工作簿格式。Excel2007 启用宏：

返回“.xlsm” ；

案例工作簿格式。Excel2007宏启用模板：

返回“.xltm” ；

案例工作簿格式。Excel2007模板：

返回“.xltx” ；

案例工作簿格式。Excel97To2003 ：

返回“.xls” ；

案例工作簿格式。Excel97To2003 模板：

返回“.xlt” ；

}

}

public static load ( file: File ) : Promise <工作簿> { 

return new Promise <工作簿> ( ( resolve, reject ) => { 

Excel实用程序。readFileAsUint8Array （文件）。然后( ( a ) => { 

工作簿。加载（a，（w ）=> { 

解决（w ）；

} , ( e ) => { 

拒绝（e ）；

} ) ;

} , ( e ) => { 

拒绝（e ）；

} ) ;

} ) ;

}

public static loadFromUrl ( url: string ) : Promise <工作簿> { 

return new Promise <工作簿> ( ( resolve, reject ) => { 

const req = new XMLHttpRequest ( ) ;

要求。打开（“获取” ，网址，真）；

要求。responseType = "arraybuffer" ;

要求。onload = ( d ) => { 

const data = new Uint8Array （请求响应）；

工作簿。加载（数据，（w ）=> { 

解决（w ）；

} , ( e ) => { 

拒绝（e ）；

} ) ;

} ;

要求。发送( ) ;

} ) ;

}

public static save ( workbook: Workbook, fileNameWithoutExtension: string ) : Promise < string > { 

return new Promise < string > ( ( resolve, reject ) => { 

const opt = new WorkbookSaveOptions ( ) ;

选择。类型= "blob" ;

工作簿。保存（选择，（d ）=> { 

const fileExt = ExcelUtility. getExtension ( workbook.currentFormat ) ; _

const fileName = fileNameWithoutExtension + fileExt;

另存为（d为Blob，文件名）；

解析（文件名）；

} , ( e ) => { 

拒绝（e ）；

} ) ;

} ) ;

}

private static readFileAsUint8Array ( file: File ) : Promise < Uint8Array > { 

返回新的Promise < Uint8Array > ( ( resolve, reject ) => { 

const fr = new FileReader ( ) ;

神父 onerror = ( e ) => { 

拒绝（fr.错误）；

} ;

如果（fr.readAsBinaryString ）{ _

神父 onload = ( e ) => { 

const rs = （fr为任何）。结果字符串；

const str: string = rs != null ？RS：FR。结果；

const result = new Uint8Array ( str.length ) ; 

for ( let i = 0 ; i < str.length ; i ++ ) { 

结果[ i ] = 海峡。字符代码（一世）;

}

解决（结果）；

} ;

神父 readAsBinaryString （文件）；

}否则{ 

神父 onload = ( e ) => { 

resolve ( new Uint8Array ( fr. result as ArrayBuffer ) ) ;

} ;

神父 readAsArrayBuffer （文件）；

}

} ) ;

}

}