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

最新推荐文章于 2024-08-18 17:25:00 发布
最新推荐文章于 2024-08-18 17:25: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库和FileReader API实现Excel文件的前端预览。由于MDN建议弃用readAsBinaryString，文章主要介绍了方法二，通过readAsArrayBuffer读取文件内容，转化为ArrayBuffer对象。业务场景是业务员上传Excel数据进行前端预览，代码示例包括两种处理方法，可将Excel转换为JSON对象并展示。
摘要由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（已完成），并触发 

最低0.47元/天 解锁文章
小时_sqe
关注
专栏目录
Vue - 详细安装使用 SheetJS 表格解析插件，纯前端本地上传及解析 excel(xls) 表格文件数据，并在界面上进行预览、表格绘制等功能（支持组件库table表格搭配，可导出下载表格）
王佳斌
11-29 5826
vue，SheetJS，vue2+ts+js excel表格预览，vue读取excel数据，导入导出xls，vue2导入excel读取数据和预览详细教程，读取本地excel文件内容，vue2导入并读取Excel数据，vue2导入excel并获取表格数据，本地上传xls预览表格数据，vue实现预览本地上传的excel文件，vue2上传本地excel表格在页面中读取并显示出来，vue网站网页使用SheetJS插件实现excel表格导入解析预览详细教程，vue如何引入并使用SheetJS xlsx插件，vue导入
前端实现（excel）xlsx文件预览
m0_56212431的博客
08-07 6781
接到一个任务，是要前端实现文件预览效果，百度了一圈，发现也没有什么好的方法可以完美的将表格渲染出来。在前端中有sheetjs和exceljs可以对xlsx文件进行解析，本来一开始我用的是sheetjs，但是在样式获取上遇到了麻烦，所以我改用了exceljs，不过很难受，在样式获取时同样遇到了不小的麻烦，但是我懒得换回sheetjs了，那就直接使用exceljs吧。要实现xlsx文件预览效果，我的想法是使用一个库对xlsx文件进行解析，然后使用另一个库对解析出来的数据在页面上进行绘制，综上，exceljs。
js实现Excel导入数据并显示在页面，兼容IE
qq_41942913的博客
04-02 1860
要引入xlsx.full.min.js插件 html部分：按钮，用来上传文件；还有用来存放数据的table <input type="file" id="import_Excel" onchange="importf(this)" /> <table id="list"> <thead> <tr> &l...
从大量json文件中提取数据并比较
0.85度的博客
07-29 245
从大量json文件中提取内容并比较
详细js读取execl内容并展示
Z_W_H_的博客
04-23 579
作者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 1656
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 342
Untitled Pagefunction importXLS(fileName){objCon = new ActiveXObject("ADODB.Connection");alert(123123);objCon.Provider = "Microsoft.Jet.OLEDB.4.0";objCon.ConnectionString = "Data Source=" + fileName +...
关于 Excel 中导入 JSON 文件
最新发布
rangeon的专栏
08-18 627
低版本 Office 用户一样可以实现导入 JSON 数据到 Excel 中。
前端开发-基于js+vue的excel表格上传下载前端实现.zip
04-02
这个压缩包文件"前端开发-基于js+vue的excel表格上传下载前端实现.zip"显然提供了使用这两种技术来实现在Web应用中处理Excel表格上传和下载功能的示例代码。以下是关于这个主题的详细知识点： 1. JavaScript（JS）...
Vue - 本地上传 Excel 文件页面表格预览，使用 ant design vue 表格 table 组件配合预览 xls 电子表格读取与显示功能（配合 Ant Design Vue / 带分页）
王佳斌
01-25 3186
效果图 如果您需要急用，请 点击此处 克隆 Gitee 仓库直接运行，这和文章最终配置的效果一样。 前言 如果您需要 Vue + Element 实现，请访问 这篇文章。 当前端通过接口成功上传一个 Excel 表格文件后，页面表格需要显示并预览内容，以便用户查看。 在开始之前，您需要提前准备好 Vue + Ant Design Vue 环境。 一、安装插件 首先在项目根目录打开终端，执行如下安装命令： # 无需顶部 import 引入 npm install xlsx 二、完整代码 如果您有
读取excel数据转换成为json数据，和把json数据生成到excel文件中
03-24
NULL 博文链接：https://mzllyl.iteye.com/blog/1021091
json可视化编辑工具（页面js实现）
09-10
通过本工具，可以对json字符串进行可视化编辑，并加编辑后的结果生成字符串。一个小工具
js读excel到网页表格预览
热门推荐
ByteX的博客
11-18 1万+
xlsx.js读取xls，xlsx文件到网页表格预览（bootstrap table） 以下描述仅展示主要功能，具体代码实现在gtihub上，链接在文章最后。 1.js准备 读取文件的xlsx.js+bootstrap-table 等js 文件。 2.编写读取函数 主要包括读取excel文件内容，根据表头放入表格（bootstrap table），在此基础上实现增加，更改，删除等操作。 ...
利用 js-xlsx 实现 Excel 文件导入并解析Excel数据成json格式的数据并且获取其中某列数据
rockllee的博客
11-30 4971
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 850
url=”+encodeURIComponent(“文档地址”);src=” + 文档url;window.open（url） //新建窗口打开链接预览。window.open（url） //新建窗口打开链接预览。不支持局域网文件预览。
利用 js-xlsx 实现选择 Excel 文件在页面显示
20180115的博客
05-06 6179
如何将选择的文件转为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 270
首先的问题是生成table的工具只在ie9和以上才能用, 而我们的系统是ie5的. 解决见之前文章. 然后是生成excel的 blob 是ie9以下才能用. 找到了方法 window.navigator.msSaveOrOpenBlob(blob, fileName); 然后生成的excle是不含边框的, 发现了设置table的样式是ok的, table width="100%" border...
【js】读取Excel文件（xlsx格式），并用表格（table）展示数据
冰冷的希望的博客
05-19 8985
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、付费专栏及课程。

余额充值