共计 3700 个字符，预计需要花费 10 分钟才能阅读完成。
介绍
最近项目中让实现一个导入导出 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 的导出功能了
导入 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 数据
导入导出功能就这样实现了，是不是很简单。
