【Web】xlsx 库使用教程(实现 Excel 的导入和导出)
vue 和 react 实现 Excel 数据的导入和导出
·
一、安装配置:
- 安装依赖:推荐安装
0.17.0
版本的,之前安装的0.18.5
跑不起来
npm install xlsx@0.17.0
- 如果跑不起来,可以查看下node 和 npm 版本,我用的是:
➜ node -v
v14.17.0
➜ npm -v
6.14.16
二、基本使用
2.1、导出 Excel
import * as XLSX from 'xlsx';
/** 导出表格信息 */
export function exportExcel(data, filename) {
const ws = XLSX.utils.json_to_sheet(data, { sheetStubs: true });
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
XLSX.writeFile(wb, `${filename}.xlsx`);
}
const data = [
{
a: 1,
b: 2,
},
{
a: 1,
b: 2,
},
{
a: 1,
b: 2,
},
{
a: 1,
b: 2,
},
];
exportExcel(data, '导出');
- 效果如图:
2.2、导入 Excel
utils.js
文件
import * as XLSX from 'xlsx';
/**
* 命令式触发系统文件选择器,并返回所选文件数据
*/
export async function selectFile({ accept = '.*', multiple = false }) {
return new Promise((resolve) => {
const id = 'liuxing-select-file';
let el = document.querySelector(`#${id}`);
if (el) {
document.body.removeChild(el);
}
el = document.createElement('input');
el.setAttribute('id', id);
el.setAttribute('type', 'file');
el.setAttribute('accept', accept);
if (multiple) {
el.setAttribute('multiple', 'multiple');
}
el.style.display = 'none';
el.addEventListener('change', (event) => {
const { files } = (event.target);
if (files) {
resolve(multiple ? files : files[0]);
} else {
resolve(null);
}
});
document.body.append(el);
el.click();
});
}
// 命令时选择并读取文件,返回 ArrayBuffer
export function selectFileAsArrayBuffer(options) {
return new Promise((resolve) => {
selectFile(options).then((files) => {
if (!files || files.length === 0) return resolve(null);
const fileReader = new FileReader();
fileReader.addEventListener('load', async (e) => resolve(e.target?.result));
fileReader.readAsArrayBuffer((options.multiple === true ? files[0] : files));
});
});
}
/**
* 将 Excel 中指定 Sheet 转换为记录列表,配合 {@link selectFileAsArrayBuffer} 一起使用更佳
*/
export function excel2Records({
data,
sheetName,
header,
debug = false,
}){
const workbook = XLSX.read(new Uint8Array(data), { type: 'array' });
debug && console.debug('workbook', workbook);
// sheetName 缺省时取第一个 sheet
if (!sheetName) {
if (workbook.SheetNames.length > 0) {
sheetName = workbook.SheetNames[0];
} else {
throw new Error('Excel 没有 Sheet 可供导入');
}
}
debug && console.debug('sheetName', sheetName);
const sheet = workbook.Sheets[sheetName];
debug && console.debug('sheet', sheet);
const rows = XLSX.utils
.sheet_to_json(sheet, {
// 将 excel 的列头按元素索引顺序映射
header,
})
// 过滤掉表头
.filter((v, index) => index !== 0);
debug && console.log('rows', rows);
console.log(rows);
return rows;
}
- 导入文件
import { selectFileAsArrayBuffer, excel2Records } from '@/utils';
// 导入
async handleImportExcel() {
const arrayBuffer = await selectFileAsArrayBuffer({ accept: '.xlsx', multiple: false });
if (!arrayBuffer) return;
const columns = excel2Records({
data: arrayBuffer,
// 按顺序设置表头
header: [
'a',
'b',
],
});
console.log('导入:', columns);
},
- 获取到的数据:
更多推荐
已为社区贡献8条内容
所有评论(0)