技术思绪摘录旅行笔记
一般做导出功能,都是后端语言直接把导出文件生成好,供客户端进行下载,如果当用户量特别大,这个生成的动作可能要加缓存或者cdn才能减少性能浪费,本篇文章记录一下,不利用后端语言,直接用前端实现导出,把性能压力放在客户端,服务器要轻松很多。

本文主要记录一下Electron如何实现前端的导出任务。

1、给你的项目安装依赖包

npm i --save

官方文档:https://docs.sheetjs.com/docs/

2、引入组件

let XLSX = require("xlsx");

3、弹出文件保存框,用户选择保存路径

const result = await electron.dialog.showSaveDialog({
	title: '保存文件至',
	defaultPath: "风险地区数据.xlsx",
	filters: [{
		name: "文件类型",
		extensions: ["xlsx", "xls"]
	}]
});
if (!result.filePath) {
	return
}

4、核心代码来了

var gaoCountData = ws_data.filter(x => x.风险等级 == '高风险'); //将第一个sheet数据筛选出来
var diCountData = ws_data.filter(x => x.风险等级 == '低风险'); //将第二个sheet数据筛选出来
const wb = XLSX.utils.book_new(); //创建工作簿
var g = XLSX.utils.json_to_sheet(gaoCountData); //生成sheet
var d = XLSX.utils.json_to_sheet(diCountData); //生成sheet
XLSX.utils.book_append_sheet(wb, g, "高风险地区"); //添加sheet到工作簿
XLSX.utils.book_append_sheet(wb, d, "低风险地区");//添加sheet到工作簿
XLSX.writeFile(wb, result.filePath); //保存文件

扩展:还可以加入loading,因为获取导出数据需要时间,还可以保存之后给一个提示,顺便打开文件所在文件夹

CarsonIT 微信扫码关注公众号 策略、创意、技术

留下您的脚步

 

最近评论

查看更多>>

站点统计

总文章数:275 总分类数:18 总评论数:88 总浏览数:156.41万

精选推荐

阅读排行

友情打赏

请打开您的微信,扫一扫