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

最新推荐文章于 2024-12-11 15:19:12 发布
最新推荐文章于 2024-12-11 15:19:12 发布
阅读量2.7k 收藏 5
点赞数 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元/天 解锁文章
Vue - 详细安装使用 SheetJS 表格解析插件，纯前端本地上传及解析 excel(xls) 表格文件数据，并在界面上进行预览、表格绘制等功能（支持组件库table表格搭配，可导出下载表格）
王佳斌
11-29 6188
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导入
Vue - 本地上传 Excel 文件页面表格预览，使用 ant design vue 表格 table 组件配合预览 xls 电子表格读取与显示功能（配合 Ant Design Vue / 带分页）
王佳斌
01-25 3288
效果图 如果您需要急用，请 点击此处 克隆 Gitee 仓库直接运行，这和文章最终配置的效果一样。 前言 如果您需要 Vue + Element 实现，请访问 这篇文章。 当前端通过接口成功上传一个 Excel 表格文件后，页面表格需要显示并预览内容，以便用户查看。 在开始之前，您需要提前准备好 Vue + Ant Design Vue 环境。 一、安装插件 首先在项目根目录打开终端，执行如下安装命令： # 无需顶部 import 引入 npm install xlsx 二、完整代码 如果您有
js实现Excel导入数据并显示在页面，兼容IE
qq_41942913的博客
04-02 1893
要引入xlsx.full.min.js插件 html部分：按钮，用来上传文件；还有用来存放数据的table <input type="file" id="import_Excel" onchange="importf(this)" /> <table id="list"> <thead> <tr> &l...
详细js读取execl内容并展示
Z_W_H_的博客
04-23 643
作者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
前端实现在线预览excel文件
最新发布
m0_74823336的博客
12-11 1823
微软Office服务的优缺点利用微软的强大服务，稳定性和兼容性较高。提供丰富的功能，如编辑、批注等。需要用户具有微软 Office 订阅或者在特定环境下使用，限制了其适用性。可能存在性能问题，特别是对于大型文件。LuckyExcel、Luckysheet的优缺点、开源免费，无需用户具有特定的订阅。可以自定义显示和功能，灵活性较高。缺点可能需要一些额外的配置和调试。功能可能不如微软 Office 服务丰富。
纯前端 vue js 预览 Excel 表格 导入导出
qq_43657524的博客
07-23 1691
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 365
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 2104
低版本 Office 用户一样可以实现导入 JSON 数据到 Excel 中。
前端开发-基于js+vue的excel表格上传下载前端实现.zip
04-02
这个压缩包文件"前端开发-基于js+vue的excel表格上传下载前端实现.zip"显然提供了使用这两种技术来实现在Web应用中处理Excel表格上传和下载功能的示例代码。以下是关于这个主题的详细知识点： 1. JavaScript（JS）...
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 5055
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代码/
读取excel数据转换成为json数据，和把json数据生成到excel文件中
03-24
NULL 博文链接：https://mzllyl.iteye.com/blog/1021091
json可视化编辑工具（页面js实现）
09-10
通过本工具，可以对json字符串进行可视化编辑，并加编辑后的结果生成字符串。一个小工具
js在线预览excel
weixin_45377314的博客
12-25 1393
url=”+encodeURIComponent(“文档地址”);src=” + 文档url;window.open（url） //新建窗口打开链接预览。window.open（url） //新建窗口打开链接预览。不支持局域网文件预览。
利用 js-xlsx 实现选择 Excel 文件在页面显示
20180115的博客
05-06 6235
如何将选择的文件转为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 286
首先的问题是生成table的工具只在ie9和以上才能用, 而我们的系统是ie5的. 解决见之前文章. 然后是生成excel的 blob 是ie9以下才能用. 找到了方法 window.navigator.msSaveOrOpenBlob(blob, fileName); 然后生成的excle是不含边框的, 发现了设置table的样式是ok的, table width="100%" border...
【js】读取Excel文件（xlsx格式），并用表格（table）展示数据
冰冷的希望的博客
05-19 9120
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
js读取解析本地Excel文件并分类展示
热门推荐
xjun0812的博客
08-17 2万+
需求描述 在移动端需要做一个汽车品牌和型号的选择页面。考虑到数据比较多，又基本不会变化，决定把车辆信息数据放在一个Excel表格中作为一个静态资源，需要用时通过js读取并展示。下图是Excel的部分内容： 最终效果 左侧是选择车辆品牌，右侧是选择好车辆品牌之后继续选择车辆型号。 关键代码(读取本地Excel数据) 1、需要提前引入 xlsx.full.min.js 文件。 2、...
前端使用xlsx.js导入导出excel并展示
m0_62762847的博客
05-05 3247
因为项目中有需求要展示excel（内容只有一些简单的地址/地区等信息，没有复杂的样式，只是包含了一些合并的表格），所以利用XLSX的读写功能，对读取后的数据进行二次处理并展示。
vue前端如何实现导入excel表格并在线预览
10-26
在Vue前端实现导入Excel表格并在线预览，通常需要借助一些JavaScript库，如`xlsx`（处理Excel文件）、`vue-excel-importer`（用于上传和解析）以及`vue-xlsx-viewer`（展示预览）。以下是简单的步骤： 1. 安装依赖：首先，在项目中安装所需库，可以使用npm或yarn： ```bash npm install axios xlsx vue-excel-importer vue-xlsx-viewer # 或者 yarn add axios xlsx vue-excel-importer vue-xlsx-viewer ``` 2. 导入组件：在Vue组件中引入相关的JSX视图： ```javascript import { ExcelUploader, XLSXViewer } from 'vue-excel-importer'; import XLSX from 'xlsx'; ``` 3. 组件配置：创建一个Vue组件，并配置Excel上传和预览功能： ```html <template> <div> <ExcelUploader ref="excelUploader" @upload="handleUpload"/> <XLSXViewer :sheetData="sheetData" @open="openSheet" /> </div> </template> <script> export default { components: { ExcelUploader, XLSXViewer, }, data() { return { sheetData: null, }; }, methods: { handleUpload(file) { const workbook = XLSX.read(file.content, { type: 'binary' }); this.sheetData = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]); }, openSheet(sheetName) { // 这里可以根据sheetName显示对应的json数据 }, }, }; </script> ``` 4. 用户交互：允许用户选择文件并触发上传事件： ```html <input type="file" @change="uploadFile($event)" accept=".xls,.xlsx"> ``` 5. 文件读取错误处理：为了更健壮地处理可能出现的问题，添加适当的错误处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值