需要引入:

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.0/xlsx.core.min.js"></script>

html:

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head> <body>
<input type="file" onchange="importXlsx(this)">
</body>

JS:

  function importXlsx(e) {
let files = e.files;
for (let i = 0; i < files.length; i++) {
let reader = new FileReader();
let name = files[i].name;
reader.onload = function (e) {
let data = e.target.result;
let workbook = XLSX.read(data, {
type: typeof FileReader !== "undefined" && (FileReader.prototype || {}).readAsBinaryString ?
'binary' : 'array'
});
let workbookSheets = workbook.Sheets;
for (let sheet in workbookSheets) {
if (workbookSheets.hasOwnProperty(sheet)) {
fromTo = workbookSheets[sheet]['!ref'];
let xlsxData = XLSX.utils.sheet_to_json(workbookSheets[sheet]);
// 结果数组
console.log(sheet)
console.log(xlsxData);
}
}
};
reader.readAsBinaryString(files[i]);
}
}

前端JS Excel解析导入的更多相关文章

  1. 前端JS实现一键导入excel表格

    前面的文章中已经讲过关于js表格的导出,此文章主要说到的是excel文件如何导入到网页中,并在网页端显示. 代码部分: <!DOCTYPE html> <html> <h ...

  2. 前端JS Excel导出

    本文转载自:https://blog.csdn.net/plmzaqokn11/article/details/73604705 下载table2Excel插件 <input type=&quo ...

  3. nodejs:导出Excel和解析导入的Excel

    用的是koa2框架,但好好处理一下,用express框架也是可以的.导出的Excel是xlsx的格式,解析导入Excel的有xlsx和csv格式.通常导入Excel是要上传的,然后获取文件的路径,这里 ...

  4. 导入数据任务(id:373985)异常, 错误信息:解析导入文件错误,请检查导入文件内容,仅支持导入json格式数据及excel文件

    小程序导入,别人导出的数据库json文件,错误信息如下: 导入数据库失败, Error: Poll error, 导入数据任务(id:373985)异常,错误信息:解析导入文件错误,请检查导入文件内容 ...

  5. js前端导出excel

    此例子是利用html特性,纯前端导出excel,样式不好看,兼容主流浏览器. var tableid = jQuery(this).closest("div.tab-label-wrap&q ...

  6. 导入Excel——解析Excel

    读取Excel 思路:先读取整个Excel,即工作簿,再依次读取其中的每个工作表Sheet,最后读取工作表内的表格. 一.读取工作簿利用流读取指定目录中的工作簿,并写入内存. /** * Constr ...

  7. js 每日一更(数组转换成前端更容易解析的树状结构)

    <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...

  8. NodeJs之EXCEL文件导入导出MongoDB数据库数据

    NodeJs之EXCEL文件导入导出MongoDB数据库数据 一,介绍与需求 1.1,介绍 (1),node-xlsx : 基于Node.js解析excel文件数据及生成excel文件. (2),ex ...

  9. java 中Excel的导入导出

    部分转发原作者https://www.cnblogs.com/qdhxhz/p/8137282.html雨点的名字  的内容 java代码中的导入导出 首先在d盘创建一个xlsx文件,然后再进行一系列 ...

随机推荐

  1. vue嵌套路由

    父组件  (注:to="/Flow/moban_a"这里不是文件加路径,是父组件路由+子组件路由) 路由配置

  2. springmvc配置文件

    1 springMVC的配置文件路径问题 https://www.cnblogs.com/ysloong/p/6071450.html

  3. 对数log

    a的x次方等于N(a>0,且a不等于1),那么数x叫做以a为底N的对数(logarithm),记作x=logaN.其中,a叫做对数的底数,N叫做真数.

  4. windows 10 multi virtual desktop keyboard shortcut

    windows 10 multi virtual desktop keyboard shortcut windows 10 multi desktop keyboard shortcut https: ...

  5. DAY01、计算机组成及操作系统

    一.编程与编程的目的: 1.什么是语言?什么是编程语言? 语言是一事物与另一事物之间沟通的介质 编程语言就是程序员与计算机之间沟通的介质 2.什么是编程? 程序员把自己想要让计算机做的事用编程语言表达 ...

  6. 微信小程序flex佈局

    聲明:display:flex 換行flex-wrap:flex-wrap:nowrap(不換行).wrap(換行).wrap-reserve(第一行在下面): 主軸對齊(橫向對齊)justify-c ...

  7. vscode git設置

    1.git官网https://git-scm.com/download/win 链接下载:64-bit Git for Windows Setup,不要下载Portable,体积太大了: 如果git官 ...

  8. JAVA 变量 数据类型 运算符 知识小结

    ---------------------------------------------------> JAVA 变量 数据类型 运算符 知识小结 <------------------ ...

  9. 一、.NET Core MVC 项目结构模板

    一.图文描述,开口干 二.文件结构:  wwwroot 首先,Razor Pages项目中多了一个wwwroot的文件夹,这个文件夹中,主要存放网站的静态资源,如css,网站图片资源文件,js文件,三 ...

  10. Jsoup的使用

    http://caidongrong.blog.163.com/blog/static/21424025220139292525874/