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); }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 零经验选手,Compose 一天开发一款小游戏!
· 通过 API 将Deepseek响应流式内容输出到前端
· AI Agent开发,如何调用三方的API Function,是通过提示词来发起调用的吗