网站备案本人承诺,网页设计规范文档,北京时事新闻,做网站需要去工商备案吗前记#xff1a;最近真的挺忙的#xff0c;一件事接着一件#xff0c;都忘了我的React项目#xff0c;尽管这是一个没写概率没写离散的夜晚#xff0c;我决定还是先做做我的React好了#xff0c;进入正题项目需求#xff0c;需要导入和导出表单#xff0c;发现前端已经…前记最近真的挺忙的一件事接着一件都忘了我的React项目尽管这是一个没写概率没写离散的夜晚我决定还是先做做我的React好了进入正题项目需求需要导入和导出表单发现前端已经强大到无所不能(可惜我有点懒学的并不勤快)因此使用到js-xlsx附上github地址:https://github.com/SheetJS/js-xlsx导入表单1.控制台安装$ npm install xlsx2.在js文件中引入import XLSX from xlsx;import ExcelUtil from ../../utils/excelUtil; //注excelUtil.js是我自定义的关于表单的操作模块3.函数声明function importExcel(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) {if (workbook.Sheets.hasOwnProperty(sheet)) {// 利用 sheet_to_json 方法将 excel 转成 json 数据data data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));// break; // 如果只取第一张表就取消注释这行}}console.log(data);} catch (e) {// 这里可以抛出文件类型错误不正确的相关提示console.log(文件类型不正确);return;}};// 以二进制方式打开文件fileReader.readAsBinaryString(files[0]);}4.使用{ExcelUtil.importExcel(e)} }/5.结果控制台打印出结果导出表单第一第二步同上3.函数声明function exportExcel(headers, data, fileName 请假记录表.xlsx) {const _headers headers.map((item, i) Object.assign({}, { key: item.key, title: item.title, position: String.fromCharCode(65 i) 1 })).reduce((prev, next) Object.assign({}, prev, { [next.position]: { key: next.key, v: next.title } }), {});const _data data.map((item, i) headers.map((key, j) Object.assign({}, { content: item[key.key], position: String.fromCharCode(65 j) (i 2) })))// 对刚才的结果进行降维处理(二维数组变成一维数组).reduce((prev, next) prev.concat(next))// 转换成 worksheet 需要的结构.reduce((prev, next) Object.assign({}, prev, { [next.position]: { v: next.content } }), {});// 合并 headers 和 dataconst output Object.assign({}, _headers, _data);// 获取所有单元格的位置const outputPos Object.keys(output);// 计算出范围 ,[A1,..., H2]const ref ${outputPos[0]}:${outputPos[outputPos.length - 1]};// 构建 workbook 对象const wb {SheetNames: [mySheet],Sheets: {mySheet: Object.assign({},output,{!ref: ref,!cols: [{ wpx: 45 }, { wpx: 100 }, { wpx: 200 }, { wpx: 80 }, { wpx: 150 }, { wpx: 100 }, { wpx: 300 }, { wpx: 300 }],},),},};// 导出 ExcelXLSX.writeFile(wb, fileName);}4.定义表头和数据项const initColumn [{title: 姓名,dataIndex: name,key: name,className: text-monospace,}, {title: 年级,dataIndex: grade,key: grade,}, {title: 部门,dataIndex: department,key: department,}];let attendanceInfoList [{name:张三,grade:2017级,department:前端部门},{name:李四,grade:2017级,department:程序部门}];5.使用 {ExcelUtil.exportExcel(initColumn, attendanceInfoList,人员名单.xlsx)}}导出6.结果完整代码//excelUtil.jsimport XLSX from xlsx;import React,{useState,useEffect} from react;function importExcel(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) {if (workbook.Sheets.hasOwnProperty(sheet)) {// 利用 sheet_to_json 方法将 excel 转成 json 数据data data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));// break; // 如果只取第一张表就取消注释这行}}console.log(data);} catch (e) {// 这里可以抛出文件类型错误不正确的相关提示console.log(文件类型不正确);return;}};// 以二进制方式打开文件fileReader.readAsBinaryString(files[0]);}function exportExcel(headers, data, fileName 请假记录表.xlsx) {const _headers headers.map((item, i) Object.assign({}, { key: item.key, title: item.title, position: String.fromCharCode(65 i) 1 })).reduce((prev, next) Object.assign({}, prev, { [next.position]: { key: next.key, v: next.title } }), {});const _data data.map((item, i) headers.map((key, j) Object.assign({}, { content: item[key.key], position: String.fromCharCode(65 j) (i 2) })))// 对刚才的结果进行降维处理(二维数组变成一维数组).reduce((prev, next) prev.concat(next))// 转换成 worksheet 需要的结构.reduce((prev, next) Object.assign({}, prev, { [next.position]: { v: next.content } }), {});// 合并 headers 和 dataconst output Object.assign({}, _headers, _data);// 获取所有单元格的位置const outputPos Object.keys(output);// 计算出范围 ,[A1,..., H2]const ref ${outputPos[0]}:${outputPos[outputPos.length - 1]};// 构建 workbook 对象const wb {SheetNames: [mySheet],Sheets: {mySheet: Object.assign({},output,{!ref: ref,!cols: [{ wpx: 45 }, { wpx: 100 }, { wpx: 200 }, { wpx: 80 }, { wpx: 150 }, { wpx: 100 }, { wpx: 300 }, { wpx: 300 }],},),},};// 导出 ExcelXLSX.writeFile(wb, fileName);}export default {importExcel,exportExcel};
