操作excel文件

1. 读取excel文件

a. 安装依赖

npm i xlsx -D

b. 代码演示(react 版)

import { Button, message, Tag, Tooltip, Upload } from 'antd';
import { UploadChangeParam, UploadFile, UploadProps } from 'antd/lib/upload/interface';
import React, { useCallback, useState } from 'react';
import XLSX from 'xlsx';
import { UploadOutlined } from '@ant-design/icons';// 格式化内存
export function formatMemory(num: string | number) {if (/k|g|m|t/i.test(num.toString())) {return num.toString();}if (num == null) {return '';}const level = [ 'B', 'KB', 'MB', 'GB', 'TB' ];let cur = parseFloat(num.toString());let levelI = 0;while (cur >= 1024) {levelI++;cur /= 1024;}return `${Math.round(cur * 100) / 100} ${level[levelI]}`;
}export function parseConcatRegionFile(file?: File | null, cb?: (data: any[]) => void) {if (file == null) {return null;}const reader = new FileReader();/** 这里判断下是否为csv文档 */let isCsv = file.name.endsWith('.csv');reader.onload = e => {/* Parse data */let bstr = e.target?.result;if (bstr == null) {cb && cb([]);return;}if (isCsv) {const uni8Array = new Uint8Array(bstr as ArrayBuffer);/** 239,187,191 === \ufeff */const coding = uni8Array[0] === 239 && uni8Array[1] === 187 && uni8Array[2] === 191 ? 'utf8' : 'gbk';const t = new TextDecoder(coding);bstr = t.decode(uni8Array);}const wb = XLSX.read(bstr, { type: isCsv ? 'string' : 'array' });/* Get first worksheet */const wsname = wb.SheetNames[0];const ws = wb.Sheets[wsname];/* Convert array of arrays */const data = XLSX.utils.sheet_to_json<string[]>(ws, { header: 1 });if (data == null || data.length <= 1) {cb && cb([]);return;}cb && cb(data);};reader.readAsArrayBuffer(file as any);return () => {reader.abort();};
}interface UploadImgProps extends Omit<UploadProps, 'onChange'> {uploadNode?: React.ReactNode;maxSize?: number; // 最大上传size,单位为b, 默认2MvalueMaxlength?: number; // 文件名显示最大长度onChange?: (data: any[]) => void; // 输出识别到的数组，原样输出
}function ReadFile(props: UploadImgProps) {const { maxSize = 2 * 1024 * 1024, accept, valueMaxlength = 20, uploadNode, ...otherReset } = props;const [ value, setValue ] = useState('');const beforeUpload = useCallback(file => {console.log(accept, accept?.toLowerCase().split(','), file.type);if (accept != null &&!accept?.toLowerCase().split(',').includes(file.type) &&!accept.toLowerCase().split(',').some(name => file?.name.endsWith(name))) {message.error(`文件扩展名 ${file.type} 错误，需要 ${accept}`);return false;}if (maxSize && file.size > maxSize) {message.error('文件大小最大不能超过' + formatMemory(maxSize));return false;}return true;},[ accept, maxSize ]);const handleChange = useCallback((info: UploadChangeParam<UploadFile<any>>) => {const { file } = info;setValue(file?.name);parseConcatRegionFile(file?.originFileObj as File, data => {props?.onChange?.(data || []);});},[ props ]);const handleClose = useCallback(() => {setValue('');props?.onChange?.([]);}, [ props ]);return (<>{value ? (<Tooltip title={value}><Tag closable onClose={handleClose}>{value?.length > valueMaxlength ? value?.substring(0, valueMaxlength) + '...' : value}</Tag></Tooltip>) : (<Upload{...otherReset}accept={accept || 'application/vnd.ms-excel'}beforeUpload={beforeUpload}onChange={handleChange}>{uploadNode || <Button icon={<UploadOutlined />}>数据导入</Button>}</Upload>)}</>);
}
export default ReadFile;

2. excel 导出

a. 后端response返回文件流导出

export function createBlob(data: any, filename: string, blobOptions: BlobPropertyBag) {let blob = new Blob([ data ], blobOptions || { type: 'application/vnd.ms-excel' });let dom = document.createElement('a');dom.download = filename;dom.style.display = 'none';dom.href = URL.createObjectURL(blob);document.body.appendChild(dom);dom.click();setTimeout(() => {document.body.removeChild(dom);}, 1000);
}// 调用demo演示
axios.get(`/api/demo`, { params, responseType: 'blob' }).then(data => {createBlob(data, `xxxxx.csv`);
})

b. JSON 数据转文件导出

i. 使用浏览器自带的href属性导出文件

export function jsonToExcel(jsonData: any[], filename = 'export.xls') {if (!Array.isArray(jsonData) || !jsonData?.length) {return;}let str = '';// 列标题Object.keys(jsonData[0]).forEach(k => {str += k + '\t,';});str += '\n';// 增加\t为了不让表格显示科学计数法或者其他格式for (let i = 0; i < jsonData.length; i++) {// eslint-disable-next-line no-loop-funcObject.keys(jsonData[i]).forEach(key => {str += `${jsonData[i][key] + '\t'},`;});str += '\n';}// encodeURIComponent解决中文乱码const uri = `data:text/${filename.split('.').pop()};charset=utf-8,\ufeff${encodeURIComponent(str)}`;// 通过创建a标签实现let dom = document.createElement('a');dom.download = filename;dom.style.display = 'none';dom.href = uri;document.body.appendChild(dom);dom.click();setTimeout(() => {document.body.removeChild(dom);}, 1000);
}// demo调用演示
let sheet1data = [ // 注意数组中每列key的排序，因为导出列表时按照key的排序导出的{ 部门: '行政部', 姓名: 'zhangsan', age: 18 },{ 部门: 'IT', 姓名: 'lisi', age: 19 }
];
jsonToExcel(sheet1data,'demo.xls'
);

ii. 使用xlsx write导出

/** json转excel表格 */
export function jsonToExcel(data: any[], filename: string) {let wopts: any = {bookType: filename.split('.').pop(),bookSST: false,type: 'binary'};/* create a new blank workbook */let workbook = XLSX.utils.book_new();let sheet1 = XLSX.utils.json_to_sheet(data);XLSX.utils.book_append_sheet(workbook, sheet1, 'sheet1');let wbout = XLSX.write(workbook, wopts);createBlob([ string2u8buff(wbout) ], filename);
}function string2u8buff(s: string) {let buf = new ArrayBuffer(s.length);let view = new Uint8Array(buf);for (let i = 0; i !== s.length; ++i) {view[i] = s.charCodeAt(i) & 0xff;}return buf;
}// demo调用演示
let sheet1data = [ // 注意数组中每列key的排序，因为导出列表时按照key的排序导出的{ 部门: '行政部', 姓名: 'zhangsan', age: 18 },{ 部门: 'IT', 姓名: 'lisi', age: 19 }
];
jsonToExcel(sheet1data,'demo.xls'
);

JS操作excel文件相关推荐

JS操作Excel读取和写入（模板操作）
前一段时间一直在做报表,所以肯定会用到Excel的操作,但是在网上查阅资料有关JS操作excel较少,有的话,也都是老生常谈或很零碎的一些东西.本人是在实际项目中摸索出,JS读写Excel(模板)数据 ...
js node.js读取excel文件返回为json文本
node-xlsx: 基于Node.js解析excel文件数据及生成excel文件:只支持xlsx xlsx: 基于Node.js解析excel文件数据及生成excel文件:只支持xlsx excel ...
C#在客户端和服务端操作Excel文件
一.在客户端把数据导入到Excel文件步骤 1.创建Excel application对象,打开或生成Excel文件 //服务端创建StringBuilder对象 System.Text.St ...
python处理excel表格实例-使用Python操作excel文件的实例代码
使用的类库 pip install openpyxl 操作实现 •工作簿操作 # coding: utf-8 from openpyxl import Workbook # 创建一个excel工作簿 ...
C#操作Excel文件（转）
摘要:本文介绍了Excel对象.C#中的受管代码和非受管代码,并介绍了COM组件在.net环境中的使用. 关键词:受管代码:非受管代码:Excel对象:动态连接库引言 Excel是微软公司办公自动化 ...
php删除excel文件,php操作excel文件的方法小结
php操作excel文件的方法小结 php操作excel文件的方法有哪些?就跟随百分网小编一起去了解下吧,想了解更多相关信息请持续关注我们应届毕业生考试网! 一.php,不用COM,生成excel文件 ...
C#操作Excel文件暨C#实现在Excel中将连续多列相同数据项合并
C#操作Excel文件(读取Excel,写入Excel) 看到论坛里面不断有人提问关于读取excel和导入excel的相关问题.闲暇时间将我所知道的对excel的操作加以总结,现在共享大家,希望给大家 ...
详解Python操作Excel文件
前言本篇文章主要总结了一下利用python操作Excel文件的第三方库和方法. 常见库简介 1.xlrd xlrd是一个从Excel文件读取数据和格式化信息的库,支持.xls以及.xlsx文件. 地 ...
很大的.xls 文件导入sqlserver2005导入不全_python3 接口测试数据驱动之操作 excel 文件...
python3 接口测试数据驱动之操作 excel 文件 1.4 操作 excel 文件 Python 中一般使用 xlrd 库来读取 Excel 文件, xlrd 库是 Python 的第三方库. ...

JS操作excel文件

操作excel文件

1. 读取excel文件

a. 安装依赖

b. 代码演示(react 版)

2. excel 导出

a. 后端response返回文件流导出

b. JSON 数据转文件导出

i. 使用浏览器自带的href属性导出文件

ii. 使用xlsx write导出

JS操作excel文件相关推荐

最新文章

热门文章