说明
1.react项目 要求前端将页面数据导出excle以及前端生成表格模板导出excle
2.使用js开发,vue同样可以使用
npm i xlsx
import * as XLSX from 'xlsx'
导出
<Button type="primary" size="small" onClick={outPutModel}>模板下载</Button>
const outPutModel = ()=>{
const rainList = [
[ '时间','站点1','站点2' ],
[ '20240812','200',‘300’ ]
]
const worksheet = XLSX.utils.aoa_to_sheet(rainList);
worksheet['!rows'] = worksheet['!rows'] || [];
if (!worksheet['!rows'][1]) {
worksheet['!rows'][1] = {};
}
// worksheet['!rows'][1].hidden = true; // 隐藏第一行
worksheet['!cols'] = [{width: 20}] // 第一列导出宽度
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "rain"); // sheet名
// XLSX.utils.book_append_sheet(workbook, worksheet2, "rain2"); // 放多个sheet页
// 输出excle
XLSX.writeFile(workbook, "历史降雨录入.xlsx"); // 文件名
}
导入 antd上传组件
const { Upload } = antd;
const [uploadState, setUploadState] = useState(uploadProps);
<Upload {...uploadState}>
<Button type="primary" size="small" onClick={enterData}>导入</Button>
</Upload>
const uploadProps = {
name: 'file',
action: '',
headers: {
authorization: 'authorization-text',
},
accept:'.xls,.xlsx',
showUploadList:false,
disabled:false,
onChange(info) { },
beforeUpload(file,fileList ){ // 在上传前拦住拿到文件
// 处理文件
handleUpload(file)
return false // 自己拿文件处理去了 停了上传功能
}
};
// 拿到文件后处理
const handleUpload = (file) =>{
const reader = new FileReader()
reader.readAsArrayBuffer(file)
reader.onload = (e) =>{
const data = new Uint8Array(e.target.result)
const workbook = XLSX.read(data, {type: 'array'})
const rainsheet = workbook.Sheets['rain']
// const rainsheet2 = workbook.Sheets['rain2'] //sheet页2
const rainData = XLSX.utils.sheet_to_json(rainsheet, {header: 1})
// const waterData = XLSX.utils.sheet_to_json(rainsheet2 , {header: 1})
const newSheetNames = workbook.SheetNames.map(item => ({label: item,value: item}))
后面就自己处理拿到的数据了
}
}
ps:做的时候遇到一个和这关系不大的问题 由于项目比较老 导致npm i xlsx的时候 antd版本跟着偷偷变了 页面样式就变了 后面单独uninstall antd ,换成以前的版本就好了