首页 > 其他分享 >前端读取excel文件

前端读取excel文件

时间:2024-06-08 11:35:03浏览次数:12  
标签:文件 读取 前端 excel file var data wb

<!DOCTYPE html>
<html>
  <head>
    <title>js读取Excel文件</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </head>
  <body class="Body noover">
    <input type="file" id="file" />
    <div id="demo"></div>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="https://blog-static.cnblogs.com/files/xieyongbin/xlsx.full.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      /*
        FileReader共有4种读取方法:
        1.readAsArrayBuffer(file):将文件读取为ArrayBuffer。
        2.readAsBinaryString(file):将文件读取为二进制字符串
        3.readAsDataURL(file):将文件读取为Data URL
        4.readAsText(file, [encoding]):将文件读取为文本,encoding缺省值为'UTF-8'
                     */
      var wb; //读取完成的数据
      var rABS = false; //是否将文件读取为二进制字符串

      function fixdata(data) {
        //文件流转BinaryString
        var o = "",
          l = 0,
          w = 10240;
        for (; l < data.byteLength / w; ++l)
          o += String.fromCharCode.apply(
            null,
            new Uint8Array(data.slice(l * w, l * w + w))
          );
        o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
        return o;
      }

      $("#file").change(function () {
        if (!this.files) {
          return;
        }
        var f = this.files[0];
        var reader = new FileReader();
        reader.onload = function (e) {
          var data = e.target.result;
          if (rABS) {
            wb = XLSX.read(btoa(fixdata(data)), {
              type: "base64",
            });
          } else {
            wb = XLSX.read(data, {
              type: "binary",
            });
          }
          document.getElementById("demo").innerHTML = JSON.stringify(
            XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
          );
        };
        if (rABS) {
          reader.readAsArrayBuffer(f);
        } else {
          reader.readAsBinaryString(f);
        }
      });
    });
  </script>
</html>

  

标签:文件,读取,前端,excel,file,var,data,wb
From: https://www.cnblogs.com/guxingzhe/p/18238455

相关文章

  • 「漏洞复现」锐捷校园网自助服务系统 login_judge.jsf 任意文件读取漏洞(XVE-2024-211
    0x01 免责声明请勿利用文章内的相关技术从事非法测试,由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失,均由使用者本人负责,作者不为此承担任何责任。工具来自网络,安全性自测,如有侵权请联系删除。本次测试仅供学习使用,如若非法他用,与平台和本文作者无关,需......
  • 前端性能优化:提升网站加载速度的终极指南
     ✨✨谢谢大家捧场,祝屏幕前的小伙伴们每天都有好运相伴左右,一定要天天开心哦!✨✨                         ......
  • 从本地读取两个数组,计算一元线性回归
    #include<iostream>#include<fstream>#include<sstream>#include<string>#include<vector>#include<numeric>structLinearRegression{doubleslope;doubleintercept;LinearRegression(conststd::vecto......
  • Django获取 verbose_name 显示到前端
    在models.py文件里,创建各个数据表models#在models.py文件里classAssetSet(models.Model):"""资产表"""name=models.CharField(verbose_name="名称",max_length=32)price=models.IntegerField(verbose_name=&quo......
  • vue + springboot 实现Excel模板文件下载
    1、后端实现1.创建用于映射模板的实体类@DatapublicclassSysUserTo{@Pattern(regexp="^(\\w+([-.][A-Za-z0-9]+)*){3,18}@\\w+([-.][A-Za-z0-9]+)*\\.\\w+([-.][A-Za-z0-9]+)*$",message="邮箱格式有误")@Size(max=50,message="邮箱超出50长度&q......
  • 学习前端3DThreejs一篇就够了,从入门到实战
    vue安装three.jsnpminstall--savethree引入three.jsimport*asTHREEfrom'three'three.js结构### three.js坐标创建一个场景scene场景,camera相机,renderer渲染器创建一个场景this.scene=newTHREE.Scene()创建一个透视摄像机this.camera=newTHR......
  • Java使用poi导出excel折线图--以三温层车辆运输单据温度为例(含如何更改各标题大小)
    maven依赖引入<dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifactId> <version>4.1.2</version> </dependency> <dependency> <groupId>org.apache.poi</groupId> ......
  • 单个python文件代码的车牌检测系统 使用pyqt做界面进行车牌检测,可以保存结果到excel文
    融合了hyperlpr3和opencv来检测车牌通过图片检测车牌的系统,使用了pyqt和hyperlpr3结合来进行检测,可以保存检测的结果到excel文件 亲自测试修改代码,运行正常并且不依赖百度网络api,纯本地运行,融合了2个车牌检测模型,第一个模型使用opencv来模糊图像,然后进行边缘检测和......
  • 前端面试题日常练-day56 【面试题】
    题目希望这些选择题能够帮助您进行前端面试的准备,答案在文末1.PHP中的预定义变量$_SERVER用于存储什么类型的数据?a)用户的输入数据b)浏览器发送的请求信息c)服务器的配置信息d)PHP脚本中定义的变量2.在PHP中,以下哪个函数可以用于获取一个字符串的长度?a)str_l......
  • 前端的隐藏巨坑,遇到了就自认倒霉吧。。
    本文来分享一些前端JavaScript中离谱的设计,这些设计日常开发遇到的概率可能比较小,而且一旦在开发中遇到了,大概率只能自认倒霉了。所以建议朋友们认真阅读本篇文章,应该能涨不少知识~学前端的朋友们,看看以下设计你了解过几个呢?parseInt(0.0000005)答案:5parseInt(0.5); //......