当前位置:编程学习 > > 正文

react 查看word文件(React实现导入导出Excel文件)

时间:2021-10-13 00:03:10类别:编程学习

react 查看word文件

React实现导入导出Excel文件

表示层

这里我是使用的是antd的Upload上传组件

引用antd部分代码

  • import { Button,Table,Upload } from 'antd';
    
    <Upload {...props} fileList={state.fileList}>
        <Button type="primary" >Excel导入</Button>
    </Upload>
    
    <Button type="primary" onClick={handleExport}>Excel导出</Button>
    
    
    
  • 业务层

    首先分析一下工作:

    下面就是技术层面的细节

    核心插件xlsx

    安装xlsx:npm install xlsx --save-dev

    主要介绍用到的核心api:

  • // workbook 理解:
    {
        SheetNames: ['sheet1', 'sheet2'],
        Sheets: {
            // worksheet
            'sheet1': {
                // cell
                'A1': { ... },
                // cell
                'A2': { ... },
                ...
            },
            // worksheet
            'sheet2': {
                // cell
                'A1': { ... },
                // cell
                'A2': { ... },
                ...
            }
        }
    }
    
    
  • excel 导入

    核心代码 :

  • const f = file;
    const reader = new FileReader();
    reader.onload = function (e) {
        try{
            const datas = e.target.result;
            const workbook = XLSX.read(datas, {type: "binary",}); //解析datas
            const first_worksheet = workbook.Sheets[workbook.SheetNames[0]]; //是工作簿中的工作表的第一个sheet
            const jsonArr = XLSX.utils.sheet_to_json(first_worksheet, {header: 1,defval:''}); //将工作簿对象转换为JSON对象数组
            handleImpotedJson(jsonArr)// 数组处理
            message.success('Excel上传解析成功!')
        }catch(e){
          message.error('文件类型不正确!或文件解析错误')
        } 
    };
    reader.readAsBinaryString(f);
    
    
  • 理解:

    excel 导出

    核心代码:

  • const downloadExcel = () =>{
        const json = handleExportedJson(data)
        const sheet = XLSX.utils.json_to_sheet(json);
        openDownloadDialog(sheet2blob(sheet,"Sheet1"), "下载文件.xls")
    }
    const handleExportedJson = (array) =>{...}  // 处理Json数据
    const openDownloadDialog = (url, saveName) =>{...} // 打开下载
    const sheet2blob = (sheet, sheetName) =>{...} // 转成blob类型
    
    
  • 理解:

    excel 导出插件(js-export-excel)

    之前为啥没放自实现的代码,那不是因为发现有好用的插件嘛,代码很简单。

    核心代码:

  • // 直接导出文件
    let dataTable = [];  //excel文件中的数据内容
    let option = {};  //option代表的就是excel文件
    dataTable  = data;  //数据源
    option.fileName = "下载文件";  //excel文件名称
    console.log("data===",dataTable)
    option.datas = [
        {
            sheetData: dataTable,  //excel文件中的数据源
            sheetName: 'Sheet1',  //excel文件中sheet页名称
            sheetFilter: ['id', 'name', 'belong', 'step','tag'],  //excel文件中需显示的列数据
            sheetHeader: ['项目id', '项目名称', '所属公司', '项目阶段','项目标签'],  //excel文件中每列的表头名称
        }
    ]
    let toExcel = new ExportJsonExcel(option);  //生成excel文件
    toExcel.saveExcel();  //下载excel文件
    
    
  • 上为这个插件的基本用法,还支持导出Blob,支持压缩等,详细见官网
    解释核心 option:

  • /*多个sheet*/
    /*每个sheet为一个object */
    [{
        sheetData:[], // 数据
        sheetName:'', // (非必需)sheet名字,默认为sheet1
        sheetFilter:[], //(非必需)列过滤(只有在 data 为 object 下起作用)
        sheetHeader:[] // 第一行,标题
        columnWidths: [] //(非必需)列宽,需与列顺序对应
    }]
    
    
    
  • 浏览器支持:ie 10+ 我测试下来demo在chrom、Safari、IE下都是能用的。

    实现效果

    react 查看word文件(React实现导入导出Excel文件)

    还有不懂得可以看GitHub demo源码

    结语

    到此这篇关于React实现导入导出Excel文件的文章就介绍到这了,更多相关React 导入导出Excel 内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!

    上一篇下一篇

    猜您喜欢

    热门推荐