JavaScript导入导出excel

在JavaScript的浏览器环境下导入和导出Excel文件,主要可以通过一些库来帮助我们简化操作,比如SheetJS(也称为xlsx库)和FileSaver.js。以下是如何使用这些库来实现Excel的导入和导出的基本步骤:

导入Excel

导入Excel文件通常涉及到HTML的<input type="file">元素,以及使用FileReader来读取用户选择的文件,然后使用SheetJS解析这个文件。

  1. HTML 部分

     

    html复制代码

    <input type="file" id="file-input" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.full.min.js"></script>
  2. JavaScript 部分

    javascript复制代码

    document.getElementById('file-input').addEventListener('change', function(e) {
    var file = e.target.files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
    var data = new Uint8Array(e.target.result);
    var workbook = XLSX.read(data, {type: 'array'});
    // 假设我们处理第一个工作表
    var firstSheetName = workbook.SheetNames[0];
    var worksheet = workbook.Sheets[firstSheetName];
    var json = XLSX.utils.sheet_to_json(worksheet, {header: 1});
    console.log(json); // 这里json变量包含了Excel数据
    };
    reader.readAsArrayBuffer(file);
    });

导出Excel

导出Excel文件通常涉及到使用SheetJS来创建或修改一个工作簿(workbook),然后使用FileSaver.js库来触发下载。

  1. HTML 部分(假设你已经有一个按钮用于触发导出)

    html复制代码

    <button id="export-button">导出Excel</button>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.full.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
  2. JavaScript 部分

    javascript复制代码

    document.getElementById('export-button').addEventListener('click', function() {
    // 创建一个新的工作簿
    var wb = XLSX.utils.book_new();
    // 假设我们有以下数据
    var data = [
    ["姓名", "年龄", "城市"],
    ["张三", 28, "北京"],
    ["李四", 22, "上海"]
    ];
    // 将数据添加到工作簿中
    var ws = XLSX.utils.aoa_to_sheet(data);
    XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
    // 导出工作簿
    XLSX.writeFile(wb, "example.xlsx");
    });

注意:在导出Excel时,SheetJSFileSaver.js一起工作,在客户端直接生成并下载Excel文件。这不需要服务器端的支持,但请注意,由于浏览器的安全限制,某些配置(如HTTPS环境)可能需要特别注意。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

万字长文之分库分表里无分库分表键如何查询【后端面试题 | 中间件 | 数据库 | MySQL | 分库分表 | 其他查询】

在很多业务里&#xff0c;分库分表键都是根据主要查询筛选出来的&#xff0c;那么不怎么重要的查询怎么解决呢&#xff1f; 比如电商场景下&#xff0c;订单都是按照买家ID来分库分表的&#xff0c;那么商家该怎么查找订单呢&#xff1f;或是买家找客服&#xff0c;客服要找到对…

【黄啊码】GPT的相关名词解释

GPT是一种基于互联网的、可用数据来训练的、文本生成的深度学习模型 GPT的核心技术是‌变换器&#xff08;Transformer&#xff09;&#xff0c;这是一种神经网络结构&#xff0c;可以有效地处理序列数据&#xff0c;比如文本、语音、图像等。GPT使用了大量的预训练数据&#…

vue中预览视频,word,pdf,xlsx

前提&#xff0c;下载依赖 #docx文档预览 npm install vue-office/docx#excel文档预览 npm install vue-office/excel#pdf文档预览 npm install vue-office/pdf 如果vue版本是vue2.6版本或者以下版本还需要安装vue/composition-api npm install vue/composition-api 1、预览…

vue keep-alive用法

<keep-alive> 是 Vue.js 中的一个内置组件&#xff0c;用于缓存不活动的组件实例&#xff0c;而不是销毁它们。当一个组件被切换出来时&#xff0c;它的 beforeDestroy 和 destroyed 生命周期钩子不会被调用&#xff0c;而是会被暂停&#xff0c;并在重新激活时恢复。 使…

深入浅出WebRTC—ULPFEC

FEC 通过在发送端添加额外的冗余信息&#xff0c;使接收端即使在部分数据包丢失的情况下也能恢复原始数据&#xff0c;从而减轻网络丢包的影响。在 WebRTC 中&#xff0c;FEC 主要有两种实现方式&#xff1a;ULPFEC 和 FlexFEC&#xff0c;FlexFEC 是 ULPFEC 的扩展和升级&…

websocket实现进度条

websocket实现进度条 做一个简易的websocket实现进度条的练习&#xff0c;效果如下&#xff1a; 前端vue3 <template><el-progress type"circle" :percentage"this.progressValue" :status"this.perstatus" /><el-button cli…

docker tomcat 404

HTTP 404状态码表示“Not Found”&#xff0c;即服务器无法找到请求的页面。 当用户尝试访问一个不存在的网页时&#xff0c;服务器会返回这个状态码。这个状态码是HTTP协议的一部分&#xff0c;用于告知客户端&#xff08;通常是浏览器&#xff09;服务器无法完成请求。404状…

黑马JavaWeb企业级开发(知识清单)02——HTML实现标题:样式(CSS引入、CSS选择器、span标签)和超链接

文章目录 前言一、标题样式1&#xff1a;新闻标题颜色1. CSS三种引入方式2. 颜色表示3. javacode实现 二、标题样式2&#xff1a;发布时间颜色1. < span >标签2. CSS选择器1&#xff09;元素&#xff08;标签&#xff09;选择器&#xff08;优先级最低&#xff09;2&…

IC秋招RTL代码合集

一 全加器和半加器 全加器 module full_adder1(input Ai, Bi, Ci,output So, Co);assign So Ai ^ Bi ^ Ci ;assign Co (Ai & Bi) | (Ci & (Ai | Bi)); endmodule module full_adder1(input Ai, Bi, Cioutput So, Co);assign {Co, So} Ai Bi Ci ; endm…

wireshark过滤器,如何使用wireshark捕获指定域名的流量

过滤器比较高级&#xff0c;但是也很重要&#xff0c;我决定通过一个案例来学习过滤器的知识点。 比如&#xff0c;我现在访问 zhangdapeng.com 我希望能够捕获关于这个域名下的流量&#xff0c;该如何实现呢&#xff1f; 我选择了捕获以太网的流量&#xff0c;但是目前捕获到…

python-爬虫实例(4):获取b站的章若楠的视频

目录 前言 道路千万条&#xff0c;安全第一条 爬虫不谨慎&#xff0c;亲人两行泪 获取b站的章若楠的视频 一、话不多说&#xff0c;先上代码 二、爬虫四步走 1.UA伪装 2.获取url 3.发送请求 4.获取响应数据进行解析并保存 总结 前言 道路千万条&#xff0c;安全第一条 爬…

Redis和mysql如何保持数据一致?

1.先更新Mysql&#xff0c;再更新Redis&#xff0c;如果更新Redis失败&#xff0c;可能仍然不一致 2. 先删除Redis缓存数据&#xff0c;再更新Mysql&#xff0c;再次查询的时候在将数据添加到缓存中&#xff0c;这种方案能解决1方案的问题&#xff0c;但是在高并发 下性能较低…

技术速递|C# 13:探索最新的预览功能

作者&#xff1a;Kathleen Dollard 排版&#xff1a;Alan Wang C# 13 已初具雏形&#xff0c;其新特性侧重于灵活性、性能以及使您最喜欢的功能在日常中变得更容易使用。我们以公开的方式构建 C#&#xff0c;在今年的 Microsoft Build 大会上&#xff0c;我们会让您一睹 C# 13 …

基于vite + pnpm monorepo 实现一个UI组件库

基于vite pnpm monorepo的vue组件库 仓库地址 思路 好多文章都是直接咔咔咔的上代码。跟着做也没问题&#xff0c;但总觉得少了些什么。下次做的时候还要找文章参考。。 需求有三个模块&#xff0c;那么就需要三个包。使用monorepo进行分包管理。 a. 组件库 b. 组件库文档…

Linux C语言 54-目录操作

Linux C语言 54-目录操作 本节关键字&#xff1a;Linux、C语言、目录操作、遍历目录 相关C库函数&#xff1a;opendir、readdir、closedir 遍历目录 #include <stdio.h> #include <stdlib.h> #include <unistd.h> #include <dirent.h> #include <…

如何在Linux上部署Django Web应用

在Linux上部署Django Web应用需要遵循以下步骤&#xff1a; 安装Python和虚拟环境&#xff1a; 首先&#xff0c;确保你的Linux系统已经安装了Python。可以使用以下命令检查Python版本&#xff1a; python --version如果没有安装Python&#xff0c;则可以使用包管理工具安装它&…

Java:114-Spring Boot的底层原理(上篇)

Spring Boot的底层原理 之前学习过了Spring Boot&#xff08;在88章博客&#xff09;&#xff0c;但是并没有很深入的了解&#xff0c;这里致力于在原来的基础上学习更多Spring Boot知识 回顾&#xff08;注意&#xff1a;只是回顾&#xff0c;所以更多细节在88章博客&#x…

MySQL零散拾遗(五)---- 对 GROUP BY 要点进行详细介绍

在GROUP BY的使用过程中&#xff0c;SELECT 中出现的非组函数的字段必须声明在 GROUP BY 中。 还记得 MySQL零散拾遗&#xff08;四&#xff09; 中&#xff0c;提到的 GROUP BY 的使用要点嘛&#xff1f; SELECT 中出现的非组函数的字段必须声明在 GROUP BY 中。反而&#x…

array.some() ==> 查找数组list中,是否有包含与当前currKey的值不一样的misId

需求&#xff1a; const list [ {misId: e, name: 小白}, {misId: e, name: 小白白}, {misId: r, name: 小王}, {misId: r, name: 小小王} ] let currKey r 查找数组list中&#xff0c;是否有包含与当前currKey的值不一样的misId 解决&#xff1a; 要查找数组lis…

【2】Spring Cloud 工程搭建

&#x1f3a5; 个人主页&#xff1a;Dikz12&#x1f525;个人专栏&#xff1a;Spring Cloud实战&#x1f4d5;格言&#xff1a;吾愚多不敏&#xff0c;而愿加学欢迎大家&#x1f44d;点赞✍评论⭐收藏 目录 1.声明项目依赖和项目构建插件 2.完善子项目订单服务 2.1完善启动…