本篇文章给大家带来的内容是关于前端如何实现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.绑定事件
<Button onClick={this.downloadExl}>导出Excel</Button>
这样就能轻松实现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.绑定事件
<Button className={Styles.upload_wrap}> 导入Excel <input className={Styles.file_uploader} type='file' accept='.xlsx, .xls' onChange={this.onImportExcel} /> //这里对原有的input样式进行了修改,accept 属性定义了上传文件支持的类型,onChange 操作中的 importExcel 方法定义了上传文件时执行的操作。 </Button>
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导入和导出的功能(代码示例)的详细内容,更多请关注php中文网其它相关文章!
已抢65414个
抢已抢29660个
抢已抢16267个
抢已抢8236个
抢已抢10686个
抢已抢21441个
抢