纯js读取excel文件内容，支持所有刘浏览器

最新推荐文章于 2024-06-15 09:17:48 发布
置顶 最新推荐文章于 2024-06-15 09:17:48 发布
阅读量8.1w 收藏 83
点赞数 17
文章标签： excel javascript 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29845153/article/details/72869281
版权


js如何将读取excel文件内容


template.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JS-XLSX Live Demo</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<style>
#drop{
  border:2px dashed #bbb;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  padding:25px;
  text-align:center;
  font:20pt bold,"Vollkorn";color:#bbb
}
#b64data{
  width:100%;
}
a { text-decoration: none }
button{}
</style>
</head>
<body>
<pre>
<input type="file" name="xlfile" id="xlf">
<button type="button" class="btn btn-danger"><a href="Techrecord.html">返回</a></button>
<input type="checkbox" name="useworker" checked="" style="display: none;">
<input type="checkbox" name="xferable" checked="" style="display: none;">
<input type="checkbox" name="userabs" checked="" style="display: none;">
</pre>
<button class="submit_all">提交</button>
<pre id="out"></pre>
<br>

<script src="../js/jquery.js"></script>
<script src="../js/common.js"></script>//这里主要封装了一下方法，可以忽略，主要使用到以下几个js
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script>
<script src="../js/shim.js"></script>
<script src="../js/xlsx.full.min.js"></script>
<script src='../js/myexcel.js'></script>
</body>
</html>

myexcel.js 

/*jshint browser:true */
/*global XLSX */
var X = XLSX;
var XW = {
  /* worker message */
  msg: 'xlsx',
  /* worker scripts */
  rABS: '../js/xlsxworker2.js',
  norABS: '../js/xlsxworker1.js',
  noxfer: '../js/xlsxworker.js'
};

function ab2str(data) {
  var o = "", l = 0, w = 10240;
  for(; l<data.byteLength/w; ++l) o+=String.fromCharCode.apply(null,new Uint16Array(data.slice(l*w,l*w+w)));
  o+=String.fromCharCode.apply(null, new Uint16Array(data.slice(l*w)));
  return o;
}

function s2ab(s) {
  var b = new ArrayBuffer(s.length*2), v = new Uint16Array(b);
  for (var i=0; i != s.length; ++i) v[i] = s.charCodeAt(i);
  return [v, b];
}

function xw_xfer(data, cb) {
  var worker = new Worker(rABS ? XW.rABS : XW.norABS);
  worker.onmessage = function(e) {
    switch(e.data.t) {
      case 'ready': break;
      case 'e': console.error(e.data.d); break;
      default: xx=ab2str(e.data).replace(/\n/g,"\\n").replace(/\r/g,"\\r");cb(JSON.parse(xx)); break;
    }
  };
  if(rABS) {
    var val = s2ab(data);
    worker.postMessage(val[1], [val[1]]);
  } else {
    worker.postMessage(data, [data]);
  }
}

function xw(data, cb) {
  transferable = document.getElementsByName("xferable")[0].checked;
  if(transferable) xw_xfer(data, cb);
  else xw_noxfer(data, cb);
}

function get_radio_value( radioName ) {
  var radios = document.getElementsByName( radioName );
  for( var i = 0; i < radios.length; i++ ) {
    if( radios[i].checked || radios.length === 1 ) {
      return radios[i].value;
    }
  }
}

function to_json(workbook) {
  var result = {};
  workbook.SheetNames.forEach(function(sheetName) {
    var roa = X.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
    if(roa.length > 0){
      result[sheetName] = roa;
    }
  });
  return result;
}




var tarea = document.getElementById('b64data');
function b64it() {
  if(typeof console !== 'undefined') console.log("onload", new Date());
  var wb = X.read(tarea.value, {type: 'base64',WTF:wtf_mode});
  process_wb(wb);
}
 var token=Cookies.get("token");
  console.log(token);
  if(token==null){
    // alert("你是怎么进来的？请先登录");
    // window.location.href="../login.html";
  }
var global_wb;
function process_wb(wb) {
  global_wb = wb;
  var output = "";
//这里是成绩批量录入代码，可以忽略不计
  $(".submit_all").on("click",function(){
    var array=Object.values(to_json(wb))[0];
    var len=array.length;
    var array1="",array2="",array3="",array4="",array5="";
    for(var i=0;i<len;i++){
      array1+=array[i].学号+",";
      array2+=array[i].成绩+",";
      array3+=array[i].总分+",";
      array4+=array[i].时间+",";
      array5+=array[i].评语+",";
    }
    array1=array1.substring(0,array1.length-1);
    array2=array2.substring(0,array2.length-1);
    array3=array3.substring(0,array3.length-1);
    array4=array4.substring(0,array4.length-1);
    array5=array5.substring(0,array5.length-1);
    console.log(array1);
    var url='grade/addall';
    var params={
      "token":token,
      "gradeUserId":array1,
      "gradeCourse":array2,
      "gradeRank":array3,
      "gradeRemark":array5,
      "gradeTime":array4
    };
    pullData(url,params,function(res){
      if(res.state==0){
        alert("成绩录入成功！");
        window.location.href="Techrecord.html";
      }
      else if(res.state==1){
        alert("您输入的学号不存在");
      }
    });
  })
  

  output = JSON.stringify(to_json(wb), 2, 2);
  if(out.innerText === undefined) out.textContent = output;
  else out.innerText = output;
  if(typeof console !== 'undefined') console.log(output);
}
function setfmt() {if(global_wb) process_wb(global_wb);}

var xlf = document.getElementById('xlf');
function handleFile(e) {
  rABS = document.getElementsByName("userabs")[0].checked;
  use_worker = document.getElementsByName("useworker")[0].checked;
  var files = e.target.files;
  var f = files[0];
  {
    var reader = new FileReader();
    var name = f.name;
    reader.onload = function(e) {
      if(typeof console !== 'undefined')
      var data = e.target.result;
      if(use_worker) {
        xw(data, process_wb);
      } else {
        var wb;
        if(rABS) {
          wb = X.read(data, {type: 'binary'});
        } else {
          var arr = fixdata(data);
          wb = X.read(btoa(arr), {type: 'base64'});
        }

        process_wb(wb);
      }
    };
    if(rABS) reader.readAsBinaryString(f);
    else reader.readAsArrayBuffer(f);
  }
}

if(xlf.addEventListener) xlf.addEventListener('change', handleFile, false);


导入一个新建的excel


查看读取到的值，以json格式显示


给大家一个下载这个插件包的地址 点我

大头菜小白菜
关注
  • 17
    点赞
  • 踩
  • 83
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript读取本地Excel文件
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-31 2049
JavaScript读取本地Excel文件
vue-cli3X读取EXCEL数据
_高飞_的博客
11-26 866
项目下引入：npm install xlsx --save 需要调用组件处：import xlsx from 'xlsx' 页面添加：<input type="file" @change="changeFile" /> methods中添加函数： changeFile(e) { var files = e.target.files; var fileReader = n...
如何使用JavaScript实现纯前端读取和导出excel文件
时清云的博客
11-18 4848
由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。本文全部都是以xlsx格式为例。普通版本不支持定义字体、颜色、背景色等，有这个功能需要的可以使用pro版，好像是要收费的，因为官网没看到下载地址。
exceljs使用文档
weixin_59246157的博客
06-15 1650
目录 导入 接口 创建工作簿 设置工作簿属性 工作簿视图 添加工作表 删除工作表 访问工作表 工作表状态 工作表属性 页面设置 页眉和页脚 工作表视图 冻结视图 拆分视图 自动筛选器 列 行
JS方法读取excel表格并显示在页面上
11-26
JS方法读取excel表格并显示在页面上，单HTML网页代码事例
js读取本地Excel内容
热门推荐
CodingNoob
04-24 1万+
我们在做项目的时候可能会遇到一些需要导入导出excel数据的功能，网上看到一个开源的插件可以实现相关的功能，于是今天就花了点时间看了下这个插件的一些使用。 插件github地址：https://github.com/SheetJS/js-xlsx/ 参考文章：https://www.cnblogs.com/liuxianan/p/js-excel.html 代码如下： <!DOCT...
JavaScript怎样读取本地Excel文件
07-16 1万+
在浏览器的项目管理器中，创建自定义变量步骤，并依次添加姓名、手机、性别和产品变量，分别来自excel表中的对应字段。在浏览器中，使用js读取本地文件内容，支持Excel表格(.xls、.xlsx)和文本文件(.txt)两种格式。只需再添加一个循环步骤，JavaScript代码第一次执行时读取第一行数据，第二次执行时就读取第二行数据。代码中的大括号表示浏览器变量，运行时会自动替换其值，也就是从Excel读取到的内容。再添加一个脚本代码步骤，输入JavaScript脚本代码。...
js读取excel单元格中的值,js读取excel内容并展示
chatgpt002的博客
11-28 2536
在介绍这个库之前，我们先来介绍 Excel 的一些相关概念。workbook 对象：整个 Excel 文档，使用 js-xlsx 读取 Excel 文档之后就会获得 workbook 对象。worksheet 对象：Excel 文档中的表，一份 Excel 文档中可以包含很多表，而每张表对应的就是 worksheet 对象。cell 对象：worksheet 中的单元格，一个单元格就是一个 cell 对象。它们之间的关系如下：1234567891011121314。
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
10-18
在本文中，我们将探讨如何使用纯JavaScript来读取Excel文件的内容，这在处理用户上传的Excel数据时非常有用。为了实现这一目标，我们将利用一个名为`XLSX`的JavaScript库，它允许我们在浏览器环境中处理Excel文件。...
前端js解析/读取excel文件
12-22
本文将深入探讨如何使用JavaScript在浏览器端解析和读取Excel文件，主要基于开源库`js-xlsx`。 `js-xlsx`是一个强大的JavaScript库，专门用于解析和操作Excel文件（.xlsx和.xls格式）。它支持读取二进制文件、Base...
js前端读取EXCEL文件
12-01
在本文中，我们将深入探讨如何使用js-xlsx来读取Excel文件，以及相关的技术细节。 首先，我们需要理解Excel文件的基本结构。Excel文件通常是基于XML的结构化格式，如`.xlsx`文件实际上是基于ZIP打包的一系列XML文档...
javascript读取excel文件实现简单的药品临期和过期提醒
最新发布
06-23
本项目涉及的主题是“使用JavaScript读取Excel文件来实现药品临期和过期提醒”，这涉及到JavaScript与Excel数据交互的技术，以及前端界面的构建。我们将详细探讨以下几个关键知识点： 1. **JQuery库**：JQuery是...
js读取excel文件
Chooser.or.Choosen
05-31 7885
在做项目的时候，需要上传一些excel文件内容到服务器。但是，用户没有点击提交的时候，或者刷新到其他页面的时候，需要放弃本次操作。本来是想着用redis来做缓存，暂时存储。但由于用户未点击提交的情况比较负责，不太适合此场景。SO，推荐一个比较成熟的解决方案：js-xlsx。 话不多说，直接上代码： 1. 定义一个文件上传项： &lt;input type="file" id="excel-f...
JS 读取excel文件内容 和 将json数据导出excel文件
weixin_44646763的博客
11-16 2389
JS 读取excel文件内容 和 将json数据导出excel文件
js操作excel常用方法,js处理表格数据
阿发狗伪原创
11-28 2396
大家好，小编为大家解答js操作excel常用方法的问题。JavaScript 读取 Excel 文档里的内容实例演示。④ 将读取的 Excel 内容转化为 json 字符串。④ 将读取的 Excel 内容转化为 json 字符串。① 下载 xlsx.full.min.js 支持包。① 下载 xlsx.full.min.js 支持包。看下控制台，这是返回的第一个。可以获取指定单元格里的内容。第二章：功能实现与使用演示。第二章：功能实现与使用演示。③ 获取指定单元格的内容。③ 获取指定单元格的内容。
js实现读取excel文件
HGX-DJK
03-22 868
1、引入js文件，如下。
JavaScript 技术篇 - js读取Excel文档里的内容实例演示，js如何读取excel指定单元格的内容，js将excel的内容转化为json字符串方法
小蓝枣的博客
07-12 6594
JavaScript 读取 Excel 文档里的内容实例演示 第一章：准备 ① 下载 xlsx.full.min.js 支持包 第二章：功能实现与使用演示 ① 实现代码 ② 使用效果演示 ③ 获取指定单元格的内容 ④ 将读取的 Excel 内容转化为 json 字符串
js-xlsx 读取Excel解析
【设计改变世界】github地址：https://github.com/guochunyang2004
09-28 6707
近期公司开始做绩效，某一天上午 HR 妹纸发了份 Excel 模板过来，让我下发给小组内成员填写。当天下午下班前，组内的绩效表就收齐了，接下来我就开始进入下一个环节，逐一打开每个 Excel 表为每个人打分。由于只有十几份绩效表，所以很快就打完分了。 不过问题来了，虽然已经打完分了，但我对小组内成员的每个考核项得分和总分的情况却还是一片空白。想要一目了然，当然得简单做个统计报表咯。那么如何收集每个人的数据呢？当然最简单的方式就一个个打开组内成员的绩效表，然后一个个统计，不过对于这种方式，我是拒绝的。作为一个
在浏览器环境下,用Excel.js读取excel文件
天字第零号的博客
05-19 2856
首先,推荐你使用Sheet.js(js-xlsx), 如果不是因为特殊原因,我需要读取样式,而sheet.js读取样式的那一部分是收费的(具体原因是因为有人花钱找他们开发的,再免费对花钱的人不公平),所以无法读取样式,sheet.js的变种(style-xlsx)也没有解决我的问题,所以找到了Excel.js 如果你想要在node中运行,建议去百度,关于node中运行的文章已经有很多了 本文只说明在浏览器环境中如何找到导出的Excel对象,以及读取excel文件,其他请查阅exceljs中文文档 首先 np
js读取Excel文件
07-27
要使用JavaScript读取Excel文件，您可以使用一些库或API来帮助解析和提取Excel数据。以下是两种常用的方法： 1. 使用第三方库：通过使用像`SheetJS`或`xlsx`这样的JavaScript库，您可以在浏览器中解析和读取Excel文件。这些库提供了一组API，可以将Excel文件转换为JavaScript对象或数组，以便进一步处理和使用。您可以通过在HTML页面中引入相关库的脚本文件，并使用其提供的API来读取Excel文件。例如，使用SheetJS库的示例代码如下： ```javascript // 引入SheetJS库 <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script> // 选择文件和读取Excel数据 var fileInput = document.getElementById('fileInput'); fileInput.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 sheetName = workbook.SheetNames[0]; var worksheet = workbook.Sheets[sheetName]; var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }); console.log(jsonData); }; reader.readAsArrayBuffer(file); }); ``` 请注意，上述示例代码假设您已经在HTML页面中定义了一个文件输入框，并具有ID为`fileInput`。 2. 使用HTML5 File API：HTML5 File API提供了一些功能，可以直接在浏览器中读取文件。您可以使用`FileReader`对象读取Excel文件，并按照需要解析和处理数据。以下是一个简单的示例： ```javascript var fileInput = document.getElementById('fileInput'); fileInput.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); // 在这里对data进行解析和处理 console.log(data); }; reader.readAsArrayBuffer(file); }); ``` 上述示例代码假设您已经在HTML页面中定义了一个文件输入框，并具有ID为`fileInput`。 请注意，这两种方法都依赖于浏览器的支持，并且可能有一些限制或兼容性问题。仔细阅读相关库或API的文档，并在使用之前进行适当的测试和兼容性检查。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值