React(五):XLS、XLSX文件在线预览

效果

依赖

bash 复制代码
$ yarn add xlsx

源码

css 复制代码
.xlsx-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fafafa;

  .ant-tabs {
    width: 100%;
    height: 100%;

    .ant-tabs-nav {
      height: 50px;
      padding: 0 10px;
      margin-bottom: 0;
    }

    .ant-tabs-content-holder {
      border-top: 1px solid #000000;
      height: calc(100% - 50px);

      .ant-tabs-content {
        height: 100%;

        .ant-tabs-tabpane {
          height: 100%;

          .table-container {
            width: 100%;
            height: 100%;
            padding: 10px;
            overflow: auto;

            table {
              border-top: 1px solid red;
              border-left: 1px solid red;
              border-collapse: collapse;

              td {
                border-bottom: 1px solid red;
                border-right: 1px solid red;
                padding: 5px 10px;
              }
            }
          }
        }
      }
    }
  }
}
js 复制代码
import './index.scss';
import {useCallback, useMemo, useRef, useState} from 'react';
import type {UploadRequestOption} from 'rc-upload/lib/interface';
import {Button, Flex, Tabs, Upload} from 'antd';
import {read, utils, WorkBook, writeFileXLSX} from 'xlsx';

function PreviewXLSX() {
    const tableContainerRef = useRef<HTMLDivElement>(null);

    const [workBook, setWorkBook] = useState<WorkBook>({
        SheetNames: [],
        Sheets: {},
    });

    const items = workBook.SheetNames
        .map((d, i) => ({
            key: `${i}`,
            label: d,
            children: <div className="table-container" ref={tableContainerRef} dangerouslySetInnerHTML={{__html: utils.sheet_to_html(workBook.Sheets[d])}}/>
        }));

    const fileUpload = async (options: UploadRequestOption) => {
        const fileReader = new FileReader();
        fileReader.readAsArrayBuffer(options.file as File);
        fileReader.onload = e => {
            const buffer = e.target!.result;
            console.log(read(buffer));
            setWorkBook({...workBook, ...read(buffer)});
        };
    };

    const exportFile = useCallback(() => {
        const table = tableContainerRef.current!.getElementsByTagName('TABLE')[0];
        const wb = utils.table_to_book(table);
        writeFileXLSX(wb, 'table_to_xlsx.xlsx');
    }, [tableContainerRef]);

    return (<>
        <div className="xlsx-wrap">
            <Tabs tabBarExtraContent={
                <Flex justify="flex-end" align="center" gap={10}>
                    <Button onClick={exportFile}>导出</Button>
                    <Upload action="#" customRequest={fileUpload} showUploadList={false}>
                        <Button type="primary">点击上传</Button>
                    </Upload>
                </Flex>
            } items={useMemo(() => items, [items])}/>
        </div>
    </>);
}

export default PreviewXLSX;
相关推荐
过期的H2O23 分钟前
【H2O2|全栈】JS进阶知识(四)Ajax
开发语言·javascript·ajax
MarcoPage3 分钟前
第十九课 Vue组件中的方法
前端·javascript·vue.js
你好龙卷风!!!29 分钟前
vue3 怎么判断数据列是否包某一列名
前端·javascript·vue.js
shenweihong2 小时前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序
巧克力小猫猿2 小时前
基于ant组件库挑选框组件-封装滚动刷新的分页挑选框
前端·javascript·vue.js
FinGet3 小时前
那总结下来,react就是落后了
前端·react.js
迃-幵3 小时前
力扣:225 用队列实现栈
android·javascript·leetcode
s甜甜的学习之旅4 小时前
前端js处理list(数组)
开发语言·前端·javascript
aPurpleBerry4 小时前
Vue3+axios+Vite配置Proxy代理解决跨域
前端·javascript·vue.js
星月前端5 小时前
【vue-pdf】简单封装pdf预览组件
javascript·vue.js·pdf