如何利用JavaScript读取excel文件并绘制echarts图形
作者:SilentLove 发布时间:2023-08-27 07:51:16
标签:js,excel,echarts
1、场景描述
通常来说,前端要拿到excel数据,都是先上传存储数据库,然后再请求后端接口,获取数据。
但有100个产品经理,就会有101个不同的需求。
本文以自己的vue项目为例。
2、需求描述
现有一张excel财务报表,需要根据这张excel表绘制成各种echarts图形,用于年度汇报。
不经过后端,前端独立完成。
3、功能实现
首先,为了将excel数据绘制成echarts图表,前端得拿到excel数据。
这里我们借助js-xlsx.js库,安装xlsx:
cnpm i -S xlsx
你也可以cdn的方式直接引用:
<script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>
首先你需要读取excel文件:
<input type="file" id="excel-file">
添加响应事件change获取excel数据:
<input type="file" id="excel-file" @change="updateFile">
通过updateFile接受数据
updateFile(e) {
let files = e.target.files;
console.log(files)
}
得到files,说明我们已经获取到上传的excel文件。现在我们需要将files转化成我们熟悉的数组类型。 我们使用fileReader方法。
FileReader共有4种读取方法:
1.readAsArrayBuffer(file):将文件读取为ArrayBuffer。
2.readAsBinaryString(file):将文件读取为二进制字符串
3.readAsDataURL(file):将文件读取为Data URL
4.readAsText(file, [encoding]):将文件读取为文本,encoding缺省值为'UTF-8'
updateFile(e) {
let _this = this;
let files = e.target.files;
let fileReader = new FileReader();
fileReader.onload = function(ev) {
try {
let data = ev.target.result;
let workbook = XLSX.read(data, { type: "binary" }); // 以二进制流方式读取得到整份excel表格对象
let sheetName = workbook.Sheets[workbook.SheetNames[0]]; // 这里我们只读取第一张表,获取表名(如Sheet1)
_this.excelData = XLSX.utils.sheet_to_json(sheetName, {
header: "A",
raw: true,
defval: " " // 意思是从头开始匹配,如遇到空格,将跳过执行,并替换为" "字符串。
});
console.log(_this.excelData) // excelData在data()中声明的变量, _this.excelData就是我们熟悉的数组数据了。
} catch (e) {
return _this.$message.error("文件类型不正确!");
}
};
// fileReader.readAsBinaryString(files[0]); // 将文件读取为二进制字符串展示在页面
}
excel多张表格的处理:
var fromTo = '' // 表格范围,可用于判断表头数量是否正确
// 遍历每张表读取
for (var sheet in workbook.Sheets) {
if (workbook.Sheets.hasOwnProperty(sheet)) {
fromTo = workbook.Sheets[sheet]['!ref'] // 表头数量
_this.excelData = _this.excelData.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]), {
header: 'A',
raw: true,
defval: ' '
})
}
}
将得到的数据渲染在echarts中,效果如下:
4、尾言
本文中主要讲解excel数据获取部分。
对于将获取的数组数据如何处理将会在后面的文章中详细讲解。
来源:https://juejin.cn/post/6844903740936290312
0
投稿
猜你喜欢
- asp判断网址格式是否合法代码 具体实现办法见下列代码:<% function checki
- 在默认情况下,MySQL搜索不区分大小写(但某些字符集始终区分大小写,如czech)。这意味着,如果你使用col_name LIKE
- ---- Oracle是关系型数据库管理系统,它功能强大、性能卓越,在当今大型数据库管理系统中占有重要地位。在我们开发的一MIS
- 内容摘要:本文介绍了使用asp来JMail v4.3发信的大部分常用方法,包括邮件基本信息、身份验证、附件等。无需很多的修改就可以
- 当使用MySQL做站点的时候,肯定会有不知道的错误发生,怎么记录呢?以下是具体解决方法:class.method //建立错误日志 func
- 前言:项目的成就感来源于大家~~必须先感谢一切该感谢的人!(旁白:写了很多次设计实录分享,这次是最百感交集的一次,话多这习惯还大家海涵~嘻嘻
- ASP是目前一种广为应用的用来快速构建动态WEB站点的编程语言,默认的内置开发语言是VBScript,由于ASP和微软Windows系列操作
- 首先我很不喜欢验证码这东西。但现在越来越多的网站使用验证码来抵御spam的冲击。太揪心了。背景介绍验证码的技术叫CAPTCHA验证,CAPT
- String Types(字符串类型)字符串类型Mysql支持多种字符串类型的变体。 这些数据类型在4.1和5.0版本中有较大的变化, 这使
- 设计师在抱怨开发人员不尊重Web标准,后台开发人员在抱怨为什么不可以增加一个空格。PM在抱怨为什么项目总是因为那些看似简单的问题而延期……如
- 有时候我们需要判断某一个IP地址是否属于一个网段,以决定该用户能否访问系统.比如用户登录的IP是218.6.7.7,而我们的程序必须判断他是
- MySQL使用环境变量TMPDIR的值作为保存临时文件的目录的路径名。如果未设置TMPDIR,MySQL将使用系统的默认值,通常为/tmp、
- 简介Tornado龙卷风是一个开源的网络服务器框架,它是基于社交聚合网站FriendFeed的实时信息服务开发而来的。2007年由4名Goo
- matplotlib中的字体文件被封装在font_manager这个子模块中,fontManager.ttflist这个列表涵盖了所有Mat
- 很常见的一个图片轮播Flash,使用之后发现在IE下按F5刷新之后Flash区域就变成一大块背景色,内容轮播出不来了。有趣的是右键点击Fla
- 还是一个关于checkbox的一个普通的效果,就是根据你勾选的checkbox,列出你选择了哪些值演示代码:<!DOCTYPE htm
- 查看表空间的名称及大小代码如下:SQL>select t.tablespace_name, round(sum(bytes/(1024
- 进入:直接输入python即可,如图所示退出:1:输入exit(),回车2:输入quit(),回车3:输入ctrl+z,回车来源:https
- 由于 window.onload 事件需要在页面所有内容(包括图片等)加载完后,才执行,但往往我们更希望在 DOM 一加载完就执行脚本。其实
- 一:文字加粗 倾斜的代码文字加粗的代码是: <b>你好</b>文字倾斜的代码是: <i>你好!</