javascript导入excel文件

        导入文件用到一个 xlsx.core.js 的包。

<!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="./xlsx.core.min.js"></script>
    <title>Document</title>
</head>

<body>
    <input type="file" id="file" style="display:none;" />
    <button onclick="importFile()">导入</button>
</body>
<script type="text/javascript" src="./index.js"></script>
</html>

        隐藏 input 框,加一个 button 按钮可以方便的调节按钮的样式。

function importFile() {
    console.log('导入');
    document.getElementById('file').click();
}

document.getElementById('file').addEventListener('change', function (e) {
    let files = e.target.files;
    if (files.length == 0) return;
    let f = files[0];

    if (!/\.xlsx$/g.test(f.name)) {
        alert('仅支持读取xlsx格式!');
        return;
    }
    readWorkbookFromLocalFile(f, function (workbook) {
        readWorkbook(workbook);
    });
});

function readWorkbookFromLocalFile(file, callback) {
    let reader = new FileReader();
    reader.onload = function (e) {
        let data = e.target.result;
        let workbook = XLSX.read(data, { type: 'binary' });
        if (callback) callback(workbook);
    };
    reader.readAsBinaryString(file);
}

function readWorkbook(workbook) {
    let sheetNames = workbook.SheetNames; // 工作表名称集合
    console.log(sheetNames, 'sheetNames');
    let worksheet = workbook.Sheets[sheetNames[0]]; // 读取第一张sheet
    console.log(worksheet, 'worksheet');
    let json = XLSX.utils.sheet_to_json(worksheet);
    console.log(json, 'json');
}   

        文件信息。

        页面上取值。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/676621.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

vfrom二开给左边添加字段或者容器

例如&#xff0c;我在左侧加入一个 我的公司 字段 修改三个文件&#xff0c;这是文件目录 这个文件是当界面选择 简体中文 的时候&#xff0c;显示的 字段组件 或者 容器组件的中文名 这个文件是当界面选择 English 的时候&#xff0c;显示的 字段组件 或者 容器组件的英文名 把…

Java集合基础知识点系统性总结篇

目录 集合一、图解集合的继承体系&#xff1f;&#xff08;[图片来源](https://www.cnblogs.com/mrhgw/p/9728065.html)&#xff09;点击查看大图二、List,Set,Map三者的区别&#xff1f;三、List接口的实现3.1、Arraylist 、 LinkedList、Vector3.2、Arraylist 、 LinkedList、…

Java如何实现pdf转base64以及怎么反转?

问题需求 今天在做发送邮件功能的时候&#xff0c;发现邮件的附件部分&#xff0c;比如pdf文档&#xff0c;要求先把pdf转为base64&#xff0c;邮件才会发送。那接下来就先看看Java 如何把 pdf文档转为base64。 两种方式&#xff0c;一种是通过插件 jar 包的方式引入&#xf…

pyside6安装

目录 1. 安装2. 配置PyCharm环境3. 测试 1. 安装 打开Anaconda Prompt&#xff0c;执行以下命令创建虚拟环境并激活 # 创建名为 myEnv, python版本为3.9 的虚拟环境 conda create -n myEnv python3.9 # 激活创建的虚拟环境 conda avtivate myEnv使用pip安装Pyside6&#xff0…

git拉去代码报错“Failed to connect to 127.0.0.1 port 31181: Connection refused“

最近参与了一个新项目&#xff0c;在使用git clone 克隆代码时遇到了一个报错"fatal: unable to access ‘https://example.git/’: Failed to connect to 127.0.0.1 port 31181: Connection refused",今天就和大家分享下解决过程。 报错详情 在使用git clone 克隆…

回溯算法题模板与实战详解

文章目录 回溯算法模板实战详解全排列问题N皇后问题 组合总和问题子集问题括号生成问题单词搜索问题 回溯算法是一种通过试错的方式来寻找问题解决方案的算法&#xff0c;常用于解决约束满足问题、组合优化问题和排列组合问题。其核心思想是深度优先搜索(DFS)与剪枝策略的结合&…

Apipost IDEA 插件使用说明

Apipost Helper作为IDEA插件&#xff0c;可以快速生成和查询API文档&#xff0c;直观友好地在IDE中调试接口。它简化了开发流程并提升效率&#xff0c;即使新手也能够迅速掌握。Apipost Helper提供了诸多便捷功能&#xff0c;如通过代码查找接口或者通过接口查找代码等&#xf…

第十五届蓝桥杯物联网试题(国赛)

好&#xff0c;很好&#xff0c;国赛直接来个阅读理解&#xff0c;我猛做4个小时40分钟&#xff0c;cpu都干冒烟了&#xff0c;也算是勉强做完吧&#xff0c;做的很仓促&#xff0c;没多检查就交了&#xff0c;方波不会&#xff0c;A板有个指示灯没做&#xff0c;其他应该都还凑…

师彼长技以助己(3)逻辑思维

师彼长技以助己&#xff08;3&#xff09;逻辑思维 前言 上一篇文章进行了工程思维和产品思维的测试&#xff0c;并介绍了几个比较重要的产品思维模型。接下来本篇介绍工程思维。&#xff08;注意产品思维并不代表产品经理思维&#xff0c;工程思维也并不代表工程师思维&…

学习小心意——python的构造方法和析构方法

构造方法和析构方法分别用于初始化对象的属性和释放类占有的资源 构造方法_init_() 语法格式如下&#xff1a; class 类名:def __init__(self, 参数1, 参数2, ...):# 初始化代码self.属性1 参数1self.属性2 参数2# ... 示例代码如下 class Student:def __init__(self):s…

期权的权利金怎么算的

期权权利金的计算涉及多个因素&#xff0c;包括敲定价格、到期时间以及整个期权合约的具体情况。期权的权利金具体的计算公式和因素可能因不同的期权合约和市场条件而有所不同&#xff0c;下文为大家介绍期权的权利金怎么算的 &#xff1f;本文来自&#xff1a;期权酱 一、期权…

实战:Zig 编写高性能 Web 服务(1)

1.1 认识 std.http std.http 是 Zig 标准库中用于处理 HTTP 相关操作的类库。以我学习新的编程语言的经历来看&#xff0c;编写web程序是最常见的技术场景&#xff0c;所以熟练掌握 HTTP server/client 服务相关的编程知识是比较重要的。 std.http 主要包含以下API: Client…

19、matlab信号预处理中的中值滤波(medfilt1()函数)和萨维茨基-戈雷滤波滤(sgolayfilt()函数)

1、中值滤波&#xff1a;medfilt1()函数 说明&#xff1a;一维中值滤波 1&#xff09;语法 语法1&#xff1a;y medfilt1(x) 将输入向量x应用3阶一维中值滤波器。 语法2&#xff1a;y medfilt1(x,n) 将一个n阶一维中值滤波器应用于x。 语法3&#xff1a;y medfilt1(x,n…

Django中使用ModelForm保存数据

相对来说&#xff0c;使用ModelForm保存数据在Django中算是比较简单的。主要原因是ModelForm是建立在Django的模型&#xff08;Model&#xff09;之上的&#xff0c;它可以自动根据模型的定义生成表单&#xff0c;包括字段和验证规则。这样可以大大简化开发人员处理表单数据的工…

低空经济发展报告

低空经济是指利用低空空间进行商业开发和经济活动的概念。随着航空技术的发展和无人机的普及&#xff0c;低空经济逐渐成为一个新兴的经济领域。 低空经济可以涵盖的领域非常广泛&#xff0c;包括但不限于物流配送、农业植保、城市交通、旅游观光等。利用无人机等飞行器进行物…

C\C++内存管理(未完结)

文章目录 一.C\C内存分布二.C语言中动态内存管理方式&#xff1a;malloc/calloc/realloc/free三.C内存管理方式3.1.new/delete操作内置类型3.2.new和delete操作自定义类型 四.operator new与operator delete函数&#xff08;重要点进行讲解&#xff09;4.1. operator new与oper…

MySQL—约束—演示(基础)

一、引言 这篇博客主要演示&#xff1a;前面博客在约束概念与分类中讲到的&#xff1a;非空约束、唯一约束、检查约束、默认约束、主键约束、外键约束等等操作。 二、需求 根据下列需求&#xff0c;去完成表结构的创建。 注意&#xff1a;&#xff08;对于一个字段我们可以添…

语言模型解构——Tokenizer

1. 认识Tokenizer 1.1 为什么要有tokenizer&#xff1f; 计算机是无法理解人类语言的&#xff0c;它只会进行0和1的二进制计算。但是呢&#xff0c;大语言模型就是通过二进制计算&#xff0c;让你感觉计算机理解了人类语言。 举个例子&#xff1a;单1&#xff0c;双2&#x…

新农大杏之所向,心之所往团队实地调研与行动

南疆实地调研背景 近期&#xff0c;我团队前往南疆的喀什、和田地区&#xff0c;深入英吉沙县调研“赛买提”杏农民采摘后的收益情况。调研中发现&#xff0c;由于“赛买提”杏属于呼吸跃变型水果&#xff0c;采摘后呼吸作用加剧&#xff0c;加之收获季节易受链格孢侵染引起的…