前端react使用XLSX导入导出excle

最新推荐文章于 2024-08-26 16:38:21 发布

枫原七七

最新推荐文章于 2024-08-26 16:38:21 发布

阅读量137

点赞数 1

文章标签：前端 react.js 前端框架

本文链接：https://blog.csdn.net/yanzhe6789/article/details/141133670

版权

说明

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}))
    后面就自己处理拿到的数据了
    }
  }