需要引入：

<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. 日期选择器date、week、time、datetime、datetime-local类型

    下面只写两个类型的代码案例,其他都大同小异 date类型: <!DOCTYPE html> <html> <head> <meta charset=" ...

  2. 设计模式之原型模式（c++）

    问题描述 看到这个模式,很容易想到小时候看的<西游记>,齐天大圣孙悟空发飙的时候可以通过自己头上的 3 根毛立马复制出来成千上万的孙悟空, 对付小妖怪很管用(数量最重要). Prototy ...

  3. MyBatis映射文件6

    之前说了由Employee找Department,这一节讲一讲由Department找Employee,显然前者是多对一的关系,而后者是一对多的关系. Department的JavaBean: pri ...

  4. java学习之—递归实现变位字

    /** * 递归实现变位字 * Create by Administrator * 2018/6/20 0020 * 上午 10:23 **/ public class AnagramApp { st ...

  5. react & youtube

    react & youtube https://www.npmjs.com/package/react-youtube https://developers.google.com/youtub ...

  6. vue自定义组件及传值

    1.使用 Vue.component() 方法注册组件 2.使用 props 属性传递参数 v-for="item in items": 遍历 Vue 实例中定义的名为 items ...

  7. Lodop打印较大的超出纸张的图片

    ADD_PRINT_IMAGE打印图片时,如果一个图片过大,超出纸张,默认超出部分是不显示的,也不会分页.最近遇到有人利用ADD_PRINT_URL打印图片,说图片自动分了多页,因为这个方法一般是用来 ...

  8. sun.misc.BASE64Encoder----》找不到jar包的解决方法

    1.右键项目->属性->java bulid path->jre System Library->access rules->resolution选择accessible ...

  9. 只要访问url地址 那么容器就会根据地址进行对象的创建

    只要访问url地址 那么容器就会根据地址进行对象的创建

  10. 使用js主函数的原因是等文档加载完了才给里面的元素添加东西 如果不使用主函数则文档加载时候无法找到元素则不能成功给元素添加事件

    使用js主函数的原因是等文档加载完了才给里面的元素添加东西 如果不使用主函数则文档加载时候无法找到元素则不能成功给元素添加事件