移动端excel导出_前端实现Excel导入和导出功能
介绍
最近项目中让实现一个导入导出Excel的功能,查找了一些插件后发现js-xlsx这个插件,所以就尝试使用了一下,这里将使用方法和遇到的问题简单记录一下。
SheetJS js-xlsx 是一款能够读写多种格式表格的插件,浏览器支持良好,并且能在多个语言平台上使用,目前在 github 上有 14k 个 star。
插件地址:https://github.com/SheetJS/js...
使用
1.安装依赖
进入项目文件夹,安装 xlsx
yarn add xlsx
2.在项目中引入
import * as XLSX from 'xlsx'
导出Excel功能实现
1.定义导出时需要使用的方法
export default function download(json,fileName){
const type = 'xlsx'//定义导出文件的格式
var tmpDown;//导出的内容
var tmpdata = json[0];
json.unshift({});
var keyMap = []; //获取keys
for (var k in tmpdata) {
keyMap.push(k);
json[0][k] = k;
}
var tmpdata = [];//用来保存转换好的json
json.map((v, i) => keyMap.map((k, j) => Object.assign({}, {
v: v[k],
position: (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)
}))).reduce((prev, next) => prev.concat(next)).forEach((v, i) => tmpdata[v.position] = {
v: v.v
});
var outputPos = Object.keys(tmpdata); //设置区域,比如表格从A1到D10
var tmpWB = {
SheetNames: ['mySheet'], //保存的表标题
Sheets: {
'mySheet': Object.assign({},
tmpdata, //内容
{
'!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] //设置填充区域
})
}
};
tmpDown = new Blob([s2ab(XLSX.write(tmpWB,
{bookType: (type == undefined ? 'xlsx':type),bookSST: false, type: 'binary'}//这里的数据是用来定义导出的格式类型
))], {
type: ""
}); //创建二进制对象写入转换好的字节流
saveAs(tmpDown,fileName);
}
function saveAs(obj, fileName){//导出功能实现
var tmpa = document.createElement("a");
tmpa.download = fileName || "下载";
tmpa.href = URL.createObjectURL(obj); //绑定a标签
tmpa.click(); //模拟点击实现下载
setTimeout(function () { //延时释放
URL.revokeObjectURL(obj); //用URL.revokeObjectURL()来释放这个object URL
}, 100);
}
function s2ab(s){ //字符串转字符流
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
function getCharCol(n){
let temCol = '',
s = '',
m = 0
while (n > 0) {
m = n % 26 + 1
s = String.fromCharCode(m + 64) + s
n = (n - m) / 26
}
return s
}
2.项目中使用导出方法
//导出excel
//导出excel
downloadExl = () => {
const { results } = this.props //需要导出的json数据
let datas = _.clone(results)//这里为了不影响项目的数据的使用 采用了lodash中的深克隆方法
let json = datas.map(item=> { //将json数据的键名更换成导出时需要的键名
return {
'人员ID' :item.id,
'姓名' : item.name,
'证件类型': this.findIdType(item.idType),//将类型代号转为汉字
'证件号码': item.credentialsId,
'固定电话': item.tel,
'移动电话': item.mobile
}
})
download(json,'人员信息.xlsx')//导出的文件名
}
3.绑定事件
导出Excel
这样就能轻松实现Excel的导出功能了
导入Excel功能实现
1.定义导入时需要使用的方法
//导入excel
onImportExcel = file => {
// 获取上传的文件对象
const { files } = file.target;
// 通过FileReader对象读取文件
const fileReader = new FileReader();
fileReader.onload = event => {
try {
const { result } = event.target;
// 以二进制流方式读取得到整份excel表格对象
const workbook = XLSX.read(result, { type: 'binary' });
// 存储获取到的数据
let data = [];
// 遍历每张工作表进行读取(这里默认只读取第一张表)
for (const sheet in workbook.Sheets) {
// esline-disable-next-line
if (workbook.Sheets.hasOwnProperty(sheet)) {
// 利用 sheet_to_json 方法将 excel 转成 json 数据
data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
// break; // 如果只取第一张表,就取消注释这行
}
}
// 最终获取到并且格式化后的 json 数据
const uploadData = data.map(item=> {
return {
id : Number(item['人员ID']),
name : item['姓名'],
idType: this.findIdType(item['证件类型'],'string'),
credentialsId: item['证件号码'],
tel: item['固定电话'],
mobile: item['移动电话']
}
})
console.log(uploadData)//这里得到了后端需要的json数据,调用接口传给后端就行了
message.success('上传成功!') //这里用了antd中的message组件
} catch (e) {
// 这里可以抛出文件类型错误不正确的相关提示
message.error('文件类型不正确!');
}
};
// 以二进制方式打开文件
fileReader.readAsBinaryString(files[0]);
}
2.绑定事件
导入Excel
//这里对原有的input样式进行了修改,accept 属性定义了上传文件支持的类型,onChange 操作中的 importExcel 方法定义了上传文件时执行的操作。
3.修改样式
.upload_wrap {
display: inline-block;
position: relative;
width: 94px;
padding: 3px 5px;
overflow: hidden;
}
.file_uploader {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
outline: none;
opacity: 0;
background-color: transparent;
}
.upload_text {
display: inline-block;
margin-left: 5px;
}
.upload_tip {
display: inline-block;
margin-left: 10px;
color: #999;
}
4.针对文件上传和读取结果分别做了对应的提示(这里使用 ant design 中的 message 组件)
5.得到的json数据
导入导出功能就这样实现了,是不是很简单。
移动端excel导出_前端实现Excel导入和导出功能相关推荐
- js导出excel单元格内换行符代码_前端和excel的那些事
前端和 excel 的那点事 在开发需求中,经常会遇到需要和excel相关的需求,毕竟不是所有人都是程序员,很多的业务都是通过excel去进行数据的整理归类计算的,excel中提供的一系列快捷功能,统 ...
- 当前页面excel导出_系统地学习Excel第03课,Excel的工作界面
上一篇:02-Excel的基础知识 本篇内容结构如下: 本篇在章节中的位置 3. 工作界面 从 Excel 2007 版开始,Excel 的工作界面风格就一直延续至今,其中设置了一些便捷的工具栏和按钮 ...
- html5生成excel,H5纯前端生成Excel表格
H5纯前端生成Excel表格方法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 var arr = [ 14 { 15 "姓名":"喵喵喵" ...
- java excel打印_技巧(excel,excel使用java打印输出)
1.=TEXT(A2,"emmdd")&TEXT(COUNTIF(A$2:A2,A2),"000") 去掉日历中的"-" 2.使用视 ...
- excel数据库_最新技术让excel秒变web数据库
Excel是微软产品线中深受人们喜爱的产品,对很多精明的企业管理者而言,更是如此. <硅谷钢铁侠>中多次提到埃隆马斯克,常常使用Excel来评估商业计划是否靠谱,不论是评估购买苏联人的火箭 ...
- 入门级excel 考题_入门级的Excel书籍
入门级excel 考题 Stephan emailed me recently, and asked what books I'd recommend for an advanced beginner ...
- 火狐怎么导入收藏夹_火狐浏览器怎么导入及导出书签?导入及导出书签的方法说明...
IE问题解决办法文章由小编整理发出,内容真实有效,欢迎提出您的意见IE系列文章由小编在互联网中整理并且发出,内容保障真实健康. 火狐浏览器是目前非常流行的网页浏览器,使用人数非常多,尤其是从事IT行业 ...
- 金算盘导出oracle,金算盘软件数据导入和导出操作方法.doc
金算盘软件数据导入和导出操作方法 金算盘软件维护集锦 此为201003版本,本期讲一下"导入导出"的一些注意事项,以"往来期初"导入导出为例. 导入导出这个功能 ...
- oracle数据的导入和导出,Oracle入门教学--数据导入和导出
数据导入和导出 一.数据导入工具 1.利用PLSQL直接进行数据表的粘贴 (1)下载测试表 (2)打开准备导入的文件并进行创建数据库表的SQL语句编辑 A.复制表头到新的sheet B.选择粘贴 C. ...
最新文章
- Lesson 7 (3) 深入理解PyTorch与PyTorch库架构
- java double 小数点后两位小数_Java中double类型的数据精确到小数点后两位
- 后端学习 - Java基础
- 模糊推理机制 matlab,基于模糊综合评判推理机制的学生素质评价系统设计与实现...
- hana 表空间_oracle currentval
- 阿里云大数据利器Maxcompute学习之-假如你使用过hive
- 线程中如何使用对象_在 Flink 算子中使用多线程如何保证不丢数据?
- xp系统mysql安装教程视频教程_Windows XP操作系统下的MYSQL安装过程_PHP教程
- undo log mysql_MySQL的redo log与undo log
- jquery实现html表格隔行变色
- ANSYS18的简略安装教程
- Java使用数组学习心得
- HTML+CSS实现登陆界面
- AD9833产生DDS调试总结
- nodpad 设置护眼_最详细的保护眼睛的方法,总有一个适合你。
- 开发实用Linux命令
- 微分方程数值解法(实际应用)
- 二项分布的期望值 E(n)=np 推导
- netty-读半包处理--ByteToMessageDecoder
- java图片文字自动识别
热门文章
- 未来教育计算机二级学生文档,未来教育计算机二级MS-office题库答案(解题步骤).docx...
- 携手共赢 决胜2021——芯讯通全球合作伙伴大会
- well-posed problem and ill-posed problem
- MobileNetV3论文翻译
- 通过社交媒体针对安全研究人员的社会工程学攻击活动
- MAC苹果下制作U盘启动安装WINDOWS系统盘
- 山东大学操作系统课程设计源码分析 filesys(2)
- 水上交通AIS常见问题解决方案
- Web H5 接入海康录像机 (rtsp转flv)
- 机器学习——算法常用评价指标