焦作做网站最专业的公司,台州市建站公司,app软件大全,建设交易平台网站多少钱查了很多资料#xff0c;很多插件#xff0c;有很多也用不了#xff0c;最后试了xlsx这个插件#xff0c;可以使用。
话不多少了#xff0c;直接放代码吧#xff1a;
1.代码实现
fetch(API).then((res: any) {res?.blob().then((r: any) {const reader ne…查了很多资料很多插件有很多也用不了最后试了xlsx这个插件可以使用。
话不多少了直接放代码吧
1.代码实现
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数据变成Uint8Arraylet 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); //JSONlet 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优化
这种方法预览的数据没有边框我们自己写一下样式即可
.xlsxClass {table {border: 1px solid #c9c9c9c9;td {border-left: 1px solid #c9c9c9c9;border-bottom: 1px solid #c9c9c9c9;padding: 10px;min-width: 120px;}}} 然后还有一个问题如果是多个表的话需要将workbook存下来首先把拿到的工作簿列表进行页面显示然后点击的时候切换时再次执行获取当前点击的工作簿以及转为html并显示的操作替换掉名字就行了。
