操作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文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。