angular中使用xlsx/file-saver组件 导入导出excel文件

(1)首先要导入组件,npm安装依赖指令如下:

 npm install xlsx --save 

 npm install file-saver --save

(2)component.ts导入组件库

import { saveAs } from 'file-saver';
 import * as XLSX from 'xlsx';

(3)html 页面如下

<button (click)="btnExport_Click()" class="btn btn-primary">导出</button>
<input type="file" (change)="onFileChange($event)"> 

(4)ts func脚本如下

public btnExport_Click(): void {

        let arr = this.gridDataAll.data.map((item) => {
            return {
                序号: item.Id,
                客服中心: item.CallCenter,
                客服座席号: item.SoftphoneAccount,
                客服姓名: item.AgentName,
                域账号: item.DomainAccount,
            };
        });
        // 将你的数据转换为工作表  
        const worksheet = XLSX.utils.json_to_sheet(arr);//(this.gridDataAll.data);  

        // 创建一个新的工作簿并添加工作表  
        const workbook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

        // 将工作簿写入一个 Blob 对象  
        const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
        const data = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' });

        // 使用 file-saver 保存文件  
        saveAs(data, `AgentAccountList${new Date().getTime()}.xlsx`);
        //XLSX.writeFile(workbook, `AgentAccountList${new Date().getTime()}.xlsx`);

    }
 onFileChange(event) {
        const file = event.target.files[0];
        this.readExcelFile(file);
    }

    readExcelFile(file: File) {
        const reader = new FileReader();
        reader.onload = (e: any) => {
            const data = new Uint8Array(e.target.result);
            const workbook = XLSX.read(data, { type: 'array' });

            // 假设第一个工作表包含所需的数据  
            const worksheetName = workbook.SheetNames[0];
            const worksheet = workbook.Sheets[worksheetName];

            // 将工作表数据转换为 JSON 对象数组  
            const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
            console.log("importData:", jsonData);

            var filteredArray = jsonData.slice(1);
            console.log("filteredArray:" + JSON.stringify(filteredArray));

            this.service.importData("ImportData", filteredArray) // 后台API业务处理

            // 更新网格数据  
            //this.gridData = jsonData;  
        };
        reader.readAsArrayBuffer(file);
    }

 

 
posted @ 2024-04-24 16:23  HI_Hub_MI  阅读(132)  评论(0编辑  收藏  举报