react中预览excel表格

查了很多资料,很多插件,有很多也用不了,最后试了xlsx这个插件,可以使用。

话不多少了,直接放代码吧:

1.代码实现

javascript 复制代码
fetch(API).then((res: any) => {
        res?.blob().then((r: any) => {
          const reader = new FileReader();
          //通过readAsArrayBuffer将blob转换为ArrayBuffer对
          reader.readAsArrayBuffer(r) // 这里的res.data是blob文件流
          reader.onload = (event: any) => {
            // 读取ArrayBuffer数据变成Uint8Array
            let data = new Uint8Array(event.target.result);
            // 这里的data里面的类型和后面的type类型要对应
            let workbook = XLSX.read(data, { type: "array" });
            set_work_book(workbook);
            let sheetNames = workbook.SheetNames; // 工作表名称
            set_sheet_names(sheetNames);
            set_select_sheet(sheetNames[0]);
            let worksheet = workbook.Sheets[sheetNames[0]];
            // var excelData = XLSX.utils.sheet_to_json(worksheet); //JSON
            let html = XLSX.utils.sheet_to_html(worksheet);
            document.getElementsByClassName('xlsxClass')[0].innerHTML = html
          };
        })
      })

简单说一下,我的excel文件是后台返回的,拿到res之后,先转为blob格式,然后经过一系列的转义,最终拿到Unit8Array格式数据,通过插件XLSX的read方法,读出excel的数据,worksheet就是excel文件中具体每一行的数据:

workbook.Sheets[sheetNames[0]]是用来访问工作簿中名为sheetNames[0](指的第一个)的工作表,XLSX.utils.sheet_to_html(worksheet)这个函数则是将工作表(worksheet)转换成HTML表格的形式,生成HTML代码,然后使用innerHTML将数据写到页面上即可。

2,优化

这种方法预览的数据没有边框,我们自己写一下样式即可:

css 复制代码
.xlsxClass {
      table {
        border: 1px solid #c9c9c9c9;
        td {
          border-left: 1px solid #c9c9c9c9;
          border-bottom: 1px solid #c9c9c9c9;
          padding: 10px;
          min-width: 120px;
        }
      }
    }

然后还有一个问题,如果是多个表的话,需要将workbook存下来,首先把拿到的工作簿列表进行页面显示,然后点击的时候切换时再次执行:获取当前点击的工作簿以及转为html并显示的操作,替换掉名字就行了。

相关推荐
excel3 分钟前
webpack 核心编译器 十六 节
前端
雪落满地香2 小时前
css:圆角边框渐变色
前端·css
风无雨4 小时前
react antd 项目报错Warning: Each child in a list should have a unique “key“prop
前端·react.js·前端框架
人无远虑必有近忧!4 小时前
video标签播放mp4格式视频只有声音没有图像的问题
前端·video
乘风!9 小时前
Java导出excel,表格插入pdf附件,以及实现过程中遇见的坑
java·pdf·excel
安分小尧9 小时前
React 文件上传新玩法:Aliyun OSS 加持的智能上传组件
前端·react.js·前端框架
编程社区管理员9 小时前
React安装使用教程
前端·react.js·前端框架
拉不动的猪9 小时前
vue自定义指令的几个注意点
前端·javascript·vue.js
yanyu-yaya9 小时前
react redux的学习,单个reducer
前端·javascript·react.js
skywalk81639 小时前
OpenRouter开源的AI大模型路由工具,统一API调用
服务器·前端·人工智能·openrouter