介绍纱添加xlsx 进口*从& # 39;XLSX xlsx& # 39; 出口默认功能下载(json,文件名){
const type=& # 39; xlsx& # 39;//定义导出文件的格式
var tmpDown;//导出的内容
var tmpdata=https://www.yisu.com/zixun/json [0];
json.unshift ({});
var keyMap=[];//获取钥匙
(var k tmpdata) {
keyMap.push (k);
json [0] [k]=k;
}
var tmpdata=[];//用来保存转换好的json
json。地图((v, i)=> keyMap。地图((k, j)=>对象。分配({},{
v: [k],
位置:(j> 25 ?getCharCol (j): String.fromCharCode (65 + j)) + (i + 1)
})))。减少((上一页,下一页)=> prev.concat(下))。forEach ((v, i)=> tmpdata [v。位置]={
v: v.v
});
var outputPos=种(tmpdata);//设置区域,比如表格从A1到D10
var tmpWB={
SheetNames: [' mySheet ']//保存的表标题
表:{
“mySheet”: Object.assign ({},
tmpdata,//内容
{
＇！ref”: outputPos [0] + ': ' + outputPos [outputPos。长度- 1)//设置填充区域
})
}
};
tmpDown=new Blob ([s2ab (XLSX.write (tmpWB,
{bookType:(类型==定义?“xlsx”:类型),bookSST:假的,类型:“二进制”}//这里的数据是用来定义导出的格式类型
))){
类型:"
});//创建二进制对象写入转换好的字节流
saveAs (tmpDown文件名);
}
函数saveAs (obj,文件名){//导出功能实现
var tmpa=document.createElement (“a”);
tmpa。下载文件名=| |”下载”;
tmpa。href=URL.createObjectURL (obj);//绑定的标签
tmpa.click ();//模拟点击实现下载
setTimeout(函数(){//延时释放
URL.revokeObjectURL (obj);//用URL.revokeObjectURL()来释放这个对象URL
},100);
}
函数s2ab (s){//字符串转字符流
var buf=new ArrayBuffer (s.length);
var=new Uint8Array视图(buf);
(var=0;我!=s.length;[我]=+ + i)视图s.charCodeAt(我)& 0 xff;
返回缓冲区;
}
函数getCharCol (n) {
让temCol=",
s=",
m=0
而(n> 0) {
m=n % 26 + 1
s=String.fromCharCode (m + 64) + s
n=(n - m)/26
}
返回年代
} //导出excel//导出excel
downloadExl=()=比;{
const{结果}=５谰?/需要导出的json数据
让数据=_.clone(结果)//这里为了不影响项目的数据的使用采用了lodash中的深克隆方法
让json=datas.map(项=比;{//将json数据的键名更换成导出时需要的键名
返回{
& # 39;人员id # 39;:item.id,
& # 39;姓名& # 39;:item.name,
& # 39;证件类型& # 39;:this.findIdType (item.idType)//将类型代号转为汉字
& # 39;证件号码& # 39;:item.credentialsId,
& # 39;固定电话& # 39;:item.tel,
& # 39;移动电话& # 39;:item.mobile
}
})
下载(json, & # 39;人员信息.xlsx& # 39;)//导出的文件名
} & lt;按钮>//导入excel
onImportExcel=文件=比;{//获取上传的文件对象
const{文件}=file.target;//通过FileReader对象读取文件
const fileReader=new fileReader ();
fileReader。onload=事件=比;{
尝试{
const{结果}=event.target;//以二进制流方式读取得到整份excel表格对象
const工作簿=XLSX。读(因此,{类型:& # 39;二进制# 39;});//存储获取到的数据
让数据=https://www.yisu.com/zixun/[];//遍历每张工作表进行读取(这里默认只读取第一张表)
(const表workbook.Sheets) {//esline-disable-next-line
如果(workbook.Sheets.hasOwnProperty(表)){//利用sheet_to_json方法将excel转成json数据
data=data.concat (XLSX.utils.sheet_to_json (workbook.Sheets(表)));//中断;//如果只取第一张表,就取消注释这行
}
}//最终获取到并且格式化后的json数据
const uploadData=数据。地图(项=> {
返回{
id:数量(项['人员id ']),
名称:项目['姓名”),
idType: this.findIdType(项目['证件类型的),“字符串”),
credentialsId:条目['证件号码”),
电话:项目['固定电话”),
移动:条目['移动电话”)
}
})
console.log (uploadData)//这里得到了后端需要的json数据,调用接口传给后端就行了
message.success(“上传成功!”)//这里用了antd中的消息组件
}捕捉(e) {//这里可以抛出文件类型错误不正确的相关提示
message.error(“文件类型不正确!”);
}
};//以二进制方式打开文件
fileReader.readAsBinaryString(文件[0]);
}
这篇文章将为大家详细讲解有关前端实现Excel导入和导出功能的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
最近项目中让实现一个导入导出Excel的功能,查找了一些插件后发现js-xlsx这个插件,所以就尝试使用了一下,这里将使用方法和遇到的问题简单记录一下。
SheetJS js-xlsx是一款能够读写多种格式表格的插件,浏览器支持良好,并且能在多个语言平台上使用,目前在github上有14 k个明星。
插件地址:https://github.com/SheetJS/js..。
<强>使用
1。安装依赖
进入项目文件夹,安装xlsx
2。在项目中引入
<>强导出Excel功能实现
1。定义导出时需要使用的方法
<强> 2。项目中使用导出方法
<强> 3。绑定事件
