Excel表格js读取数据（json）并进行前端页面表格预览展示

最新推荐文章于 2024-05-23 20:00:00 发布
最新推荐文章于 2024-05-23 20:00:00 发布
阅读量2.6k 收藏 4
点赞数 1
分类专栏： js vue 文章标签： 前端 javascript json excel
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38355349/article/details/122068796
版权
项目环境：Vue+Ant Design使用到的依赖库: xlsx ( yarn add xlsx) npm链接：xlsx - npm使用的Web API :FileReader MDN链接：FileReader - Web API 接口参考 | MDN使用到的关键方法：readAsBinaryString会读取指定的Blob或File对象，当读取完成的时候，readyState会变成DONE（已完成），并触发loadend (en-US)事件，同时result属性将...
摘要由CSDN通过智能技术生成

项目环境：Vue+Ant Design 

使用到的依赖库: xlsx ( yarn add  xlsx) npm链接：xlsx - npm

使用的Web API : FileReader  MDN链接：FileReader - Web API 接口参考 | MDN

使用到的关键方法：

1.readAsBinaryString会读取指定的 Blob 或 File 对象，当读取完成的时候，readyState  会变成DONE（已完成），并触发 loadend (en-US) 事件，同时 result 属性将包含所读取文件原始二进制格式。用于方法一

2.readAsArrayBuffer() 方法用于启动读取指定的 Blob 或 File 内容。当读取操作完成时，readyState 变成 DONE（已完成），并触发 loadend

最低0.47元/天 解锁文章
小时_sqe
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现Excel导入数据并显示在页面，兼容IE
qq_41942913的博客
04-02 1843
要引入xlsx.full.min.js插件 html部分：按钮，用来上传文件；还有用来存放数据的table <input type="file" id="import_Excel" onchange="importf(this)" /> <table id="list"> <thead> <tr> &l...
前端开发-基于js+vue的excel表格上传下载前端实现.zip
04-02
这个压缩包文件"前端开发-基于js+vue的excel表格上传下载前端实现.zip"显然提供了使用这两种技术来实现在Web应用中处理Excel表格上传和下载功能的示例代码。以下是关于这个主题的详细知识点： 1. JavaScript（JS）...
如何使用JavaScript实现纯前端读取和导出excel文件
lgd1917的博客
01-12 1万+
js-xlsx 介绍 由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。本文全部都是以xlsx格式为例。 官方github：GitHub - SheetJS/sheetjs: SheetJS Community Edition -- Spreadsheet Data Toolkit 本文配套demo在线演示地址：JS读取和导出excel示例 本
【最全的excel转json！！！】使用Python脚本提取excel文本中的数据到json中
最新发布
&1=1的博客
05-23 629
【最全的excel转json！！！】使用Python脚本提取excel文本中的数据到json中
详细js读取execl内容并展示
Z_W_H_的博客
04-23 544
作者execl内容展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- <script type="text/javascript" src="http://api.map.ba
纯前端 vue js 预览 Excel 表格 导入导出
qq_43657524的博客
07-23 1615
1、安装插件 npm i xlsx 2、示例 <template> <div class="home"> <div v-html="tableau"></div> </div> </template> <script> import axios from 'axios' import XLSX from "xlsx"; export default { data(){ return {
js导入excel数据显示html界面,js import excel显示数据在页面
weixin_31885875的博客
06-04 333
Untitled Pagefunction importXLS(fileName){objCon = new ActiveXObject("ADODB.Connection");alert(123123);objCon.Provider = "Microsoft.Jet.OLEDB.4.0";objCon.ConnectionString = "Data Source=" + fileName +...
js读excel到网页表格预览
热门推荐
ByteX的博客
11-18 1万+
xlsx.js读取xls，xlsx文件到网页表格预览（bootstrap table） 以下描述仅展示主要功能，具体代码实现在gtihub上，链接在文章最后。 1.js准备 读取文件的xlsx.js+bootstrap-table 等js 文件。 2.编写读取函数 主要包括读取excel文件内容，根据表头放入表格（bootstrap table），在此基础上实现增加，更改，删除等操作。 ...
在页面中导入excel文件并以表格显示
04-03
在网页中实现“导入Excel文件并以表格显示”的功能，是一项常见的需求，尤其在数据分析、报表展示和数据交互的应用场景中。以下将详细介绍这个过程涉及的关键技术和步骤。 首先，我们需要理解的是，网页不能直接...
excel预览需要引入的前端文件
04-21
总结来说，实现Excel预览功能，前端需要引入SheetJS库来解析Excel文件，使用`FileReader API`读取文件，通过CSS和JavaScript来呈现和美化数据。整个过程涉及文件选择、数据解析、表格渲染等多个步骤，这些都需要合理...
基于SheetJS以及XLSXStyle的纯前端带样式导出表格为Excel的工具包
08-12
"基于SheetJS以及XLSX-Style的纯前端带样式导出表格为Excel的工具包"是解决这一问题的一种高效方案，特别适合JavaScript开发者。下面将详细介绍这个工具包的核心技术、用途及其工作原理。 首先，SheetJS是一个流行...
读取excel数据转换成为json数据，和把json数据生成到excel文件中
03-24
NULL 博文链接：https://mzllyl.iteye.com/blog/1021091
json可视化编辑工具（页面js实现）
09-10
通过本工具，可以对json字符串进行可视化编辑，并加编辑后的结果生成字符串。一个小工具
纯前端：luckysheet在线编辑Excel导出，Excel文件导入
10-09
Luckysheet是一款基于JavaScript的开源项目，它提供了一个类似Excel的在线编辑界面，使得用户可以在浏览器中进行表格编辑、公式计算、数据处理等一系列操作，而无需依赖任何后端服务。这极大地简化了开发流程，提高...
利用 js-xlsx 实现 Excel 文件导入并解析Excel数据成json格式的数据并且获取其中某列数据
rockllee的博客
11-30 4945
1、首先需要导入js <script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>2、导入文件框 这里importExcel(this)是方法，名字可以自己定义。<input type="file"onchange="importExcel(this)" /> <div id="demo"></div>3、js代码/
js在线预览excel
weixin_45377314的博客
12-25 713
url=”+encodeURIComponent(“文档地址”);src=” + 文档url;window.open（url） //新建窗口打开链接预览。window.open（url） //新建窗口打开链接预览。不支持局域网文件预览。
利用 js-xlsx 实现选择 Excel 文件在页面显示
20180115的博客
05-06 6137
如何将选择的文件转为json数据1.将 xlsx.full.min.js 导入到页面中；2.然后通过 FileReader 对象读取文件利用 js-xlsx 转成 json 数据将得到的json数据渲染到页面上1.由于选择的Excel文件属于表格，渲染时选用 table tr td 等标签；2.获取表头数据，得到表格列数和列名；3.通过 for 循环创建...
json转为excel. json的可视化 (二)
wangduqiang747的博客
12-19 262
首先的问题是生成table的工具只在ie9和以上才能用, 而我们的系统是ie5的. 解决见之前文章. 然后是生成excel的 blob 是ie9以下才能用. 找到了方法 window.navigator.msSaveOrOpenBlob(blob, fileName); 然后生成的excle是不含边框的, 发现了设置table的样式是ok的, table width="100%" border...
【js】读取Excel文件（xlsx格式），并用表格（table）展示数据
冰冷的希望的博客
05-19 8894
1、效果 2、下载xlsx.mini.js GitHub上有一个读取Excel文件的项目 https://github.com/SheetJS/sheetjs 因为我只是想要读取xlsx文件，故只下载了项目里的一个xlsx.mini.js文件 3、主要代码 <script type="text/javascript" src="js/xlsx.mini.js" ></script> <script> var excelFile; // 读取文件的内容 fun
java读取excel表格转为JSON数据
04-11
好的，我可以回答这个问题。您可以使用第三方库，如Apache POI，读取Excel表格并将其转化为JSON数据。以下是Java代码示例： ```java // 导入依赖 import org.apache.poi.ss.usermodel.*; import org.json.*; import java.io.*; import java.util.*; public class ExcelToJsonConverter { public static void main(String[] args) throws Exception { // 读取Excel文件 Workbook workbook = WorkbookFactory.create(new File("data.xlsx")); // 读取第一个工作表 Sheet sheet = workbook.getSheetAt(0); // 获取表头行 Row headerRow = sheet.getRow(0); // 遍历每一行 JSONArray rows = new JSONArray(); for (int i = 1; i < sheet.getLastRowNum() + 1; i++) { Row row = sheet.getRow(i); JSONObject obj = new JSONObject(); // 遍历每一列 for (int j = 0; j < row.getLastCellNum(); j++) { Cell cell = row.getCell(j); String columnName = headerRow.getCell(j).getStringCellValue(); obj.put(columnName, getCellValue(cell)); } rows.put(obj); } // 输出JSON数据 System.out.println(rows.toString()); } // 获取单元格的值 private static Object getCellValue(Cell cell) { switch (cell.getCellType()) { case BLANK: return null; case BOOLEAN: return cell.getBooleanCellValue(); case ERROR: throw new RuntimeException("Cell contains an error"); case NUMERIC: return cell.getNumericCellValue(); case STRING: return cell.getStringCellValue(); case FORMULA: return getCellValue(cell.getCachedFormulaResultType() == CellType.NUMERIC ? cell : cell.getSheet().getRow(cell.getRowIndex()).getCell(cell.getColumnIndex())); default: throw new RuntimeException("Cell type not supported"); } } } ``` 请注意，此代码示例仅适用于Excel表格中的简单数据类型，如字符串、数字和布尔值。对于复杂数据类型，如日期和时间，您需要编写自定义的转换逻辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值