js读取并解析excel文件，之后上传json到服务器

最新推荐文章于 2024-07-30 11:29:23 发布
最新推荐文章于 2024-07-30 11:29:23 发布
阅读量1.4w 收藏 3
点赞数 2
分类专栏： 读取excel 文章标签： js读取excel 上传文件安全设置 jquery post数据到服务器 c#序列化json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wzj0808/article/details/51372049
版权

首先，只能在ie浏览器下使用才可以，因为要调用excel控件，别的浏览器不行；

其次，要对浏览器进行安全设置的更改：

internet选项-安全-自定义安全级别-将文件上载到服务器时包含本地目录路径（启用）

internet选项-安全-自定义安全级别-对未标记为可安全执行脚本的ActiveX控件初始化并执行脚本（启用）

html页面：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus"/>
  <meta name="Author" content=""/>
  <meta name="Keywords" content=""/>
  <meta name="Description" content=""/>
  <script src="Scripts/jquery-1.12.2.js" type="text/javascript"></script>
  
  <script type="text/javascript">
        var tempStr="";


        function ReadExcel() {
         tempStr = "";
          //得到文件路径的值
         var filePath = document.getElementById("upfile").value;
          //创建操作EXCEL应用程序的实例
          var oXL = new ActiveXObject("Excel.application");
          //打开指定路径的excel文件
          var oWB = oXL.Workbooks.open(filePath);
          //操作第一个sheet(从一开始，而非零)
          oWB.worksheets(1).select();
          var oSheet = oWB.ActiveSheet;
          //使用的行数
         var rows = oSheet.usedrange.rows.count;
         var columns = oSheet.usedrange.columns.count;


         tempStr += '{"rows":[';
         try{
             for (var i = 0; i < rows; i++) {
                 tempStr += '[';
                 for (var j = 0; j < columns; j++) {
                     tempStr += '"';
                     if ((oSheet.Cells(i + 1, j + 1) + "") != "undefined") {
                         tempStr += (oSheet.Cells(i + 1, j + 1)+"");
                     } else {
                        tempStr += ("{-}");
                    }
                    tempStr += '"';
                    if (columns != (j + 1)) {
                        tempStr += ','; 
                    }
                }
                if (rows != i + 1) tempStr += '],';
                else tempStr += ']';
            }
            tempStr += ']}';
          }catch(e)
          {
              document.getElementById("txtArea").value = tempStr;
          }


          document.getElementById("txtArea").value = tempStr;
          //退出操作excel的实例对象
          oXL.Application.Quit();
          //手动调用垃圾收集器
          CollectGarbage();
     }


     function uploadJson() {
         $.post("UploadPost.aspx", {jsonstr:tempStr}, function (data, status) {alert("Data:"+data+"\nStatus:"+status) });
      }
  </script>
 </head>


 <body>
  <input type="file" id="upfile"/><input type="button" οnclick="ReadExcel();" value="read"/><input type="button" value="uploadJson" οnclick="uploadJson()"/>
<br/>
<textarea id="txtArea" cols="100" rows="50"></textarea>
 </body>
</html>



上传到服务器：

UploadPost.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;


using Newtonsoft.Json;
using Newtonsoft.Json.Linq;




public partial class UploadPost : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string str = Request.Form["jsonstr"];


        string str2 = "";


        JObject jo = (JObject)JsonConvert.DeserializeObject(str);


        for (int i = 0; i < jo["rows"].Count(); i++) 
        {
            for (int j = 0; j < jo["rows"][i].Count(); j++) 
            {
                str2 += jo["rows"][i][j];
                str2 += " ";
            }
            str2 += "\n";
        }




        Response.Clear();
        Response.ContentType = "text/plain";
        Response.Write(str2);
        Response.End();
    }
}


壁立千仞无欲则刚
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js读取excel表格，转成JSON数据
Bton的博客
10-16 2506
使用 js-xlsx 插件：https://github.com/SheetJS/js-xlsx <template> <div> <input type="file" @change="readFile" accept=".xls,.xlsx"> </div> </template> <script> im...
js将excel转化成json 对象
01-17
js 将excel转成json对象，提交到后台。 主要用于前端.
js读取excel导出json文件
w775198287的专栏
03-22 872
打印出Success后，可以在同目录下生成一个export的文件夹，里面包含了language_en.json。这样就可以把改文件夹copy别人，别人不用安装环境就可以直接用。会出问题，一般是执行改文件权限不足，需要添加执行权限。安装成功后，回到脚本文件目录输入打包命令。用到依赖包pkg（用的mac系统）。进入到该文件的目录下，执行改命令。再次执行上次的命令就能成功了。之后在同目录下会生成 三个文件。三个文件对应三种平台。这里有个小插曲，执行。资源已经上传在审核中。
ExcelJS：轻松实现Excel文件的读取、操作与写入
最新发布
HHX_01的博客
07-30 3311
ExcelJS 是一个开源的 JavaScript 库，支持读写 XLSX 和 CSV 格式的 Excel 文件。支持丰富的 Excel 功能，如单元格样式、公式、图表等。良好的文档和社区支持。跨平台，可在 Node.js 和浏览器环境中使用。
利用JS-XLSX插件 用JS读取excel数据
热门推荐
yan_kai的博客
06-16 1万+
下载xlsx.core.min.js引入到页面中（下载地址见下面地址：http://download.csdn.net/download/dylbb818/9595652） 然后通过FileReader对象读取文件利用js-xlsx转成json数据
js操作excel数据转json数据
weixin_49214320的博客
11-28 2184
excel----->json数据 依赖： <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="https://cdn.staticfile.org/xlsx/0.15.1/xlsx.core.min.js"></script>```
前端js解析/读取excel文件
12-22
本文将深入探讨如何使用JavaScript在浏览器端解析和读取Excel文件，主要基于开源库`js-xlsx`。 `js-xlsx`是一个强大的JavaScript库，专门用于解析和操作Excel文件（.xlsx和.xls格式）。它支持读取二进制文件、Base...
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
10-18
总结起来，纯JavaScript实现的读取Excel文件内容功能主要依赖于`XLSX`库，它通过`FileReader API`读取用户上传的文件，并将Excel数据转换为JavaScript可操作的格式。这个功能对于前端开发人员来说非常实用，特别是...
vue读取本地的excel文件并显示在网页上方法示例
10-16
2. **解析Excel文件**：在`src/scripts/read_xlsx.js`中，引入`XLSX`库并编写`transformSheets`函数，该函数接收一个Excel工作簿对象，将其转换为JSON格式，并进行行列转换。这个函数的核心是`XLSX.utils.sheet_to_...
koa上传excel文件并解析的实现方法
10-18
在服务层`uploadExcelSrv.js`中，我们首先读取上传的文件，然后使用`xlsx`库来解析Excel内容。这里我们创建一个`getExcelObjs`的异步函数，它接收上传的文件并返回解析后的数据： ```javascript const xlsx = ...
excel文件转json文件
09-16
在我们的案例中，Gulp可能包含了读取Excel文件，解析数据并生成JSON文件的任务。 安装Node.js时，注意选择适合的版本。尽管没有明确说明，但建议使用8.0以下的版本可能是因为某些依赖库或插件对高版本不兼容。确保...
excel转化为json的js脚本
09-07
此工具类主要是为了方便将excel文件内容获取,并将其转化为json数据方便前后台的使用
使用jquery的上传插件：ajaxfileupload.js实现excel文件上传
05-01
NULL 博文链接：https://451640893.iteye.com/blog/2400740
js实现上传excel解析返回json到页面显示
06-09
js实现excel文件上传解析，返回json并显示到页面 支持两种格式
js解析excel代码，和java后端接收前台ajax传过来的解析数据（包括所需js插件包）
10-17
js解析excel代码，和java后端接收前台ajax传过来的解析数据（包括所需js插件包）
js将xlsx/xls 转为json
想想挺好啊
02-27 650
js将xlsx/xls 转为json
js 实现导入excel文件转json
全易
07-27 1652
超级简单的xlsx插件的使用案例
js上传excel
weixin_45780818的博客
12-17 545
npm i xlsx // HTML <el-form-item> <el-upload class="upload-demo" action="" :on-change="handleChange" :show-file-list="false" :on-remove="handleRemove" accept="appli.
js中导入excel文件并转换为json格式的数据
风如也的博客
07-28 2517
选择的包为 xlsx一个 js 库 测试结合 Vue + ElementUI一起使用。 先安装对应依赖 npm i xlsx --save 引入 elementUI 后，使用 upload 上传组件来实现文件导入 <el-upload ref="upload" accept=".xls,.xlsx" action="" :auto-upload="false" :on-change="handleUpload" :show-file-.
js上传文件显示进度条并返回Excel解析值
05-24
要实现上传文件显示进度条并返回Excel解析值，有多种实现方式，以下是其中一种基于JavaScript的实现： 1. HTML部分 首先，在HTML中，我们需要添加一个文件上传表单，并在表单中添加一个input元素，用于选择要上传的文件。同时，我们还需要添加一个进度条元素来显示上传进度。具体代码如下： ```html <form id="upload-form"> <input type="file" id="file-input"> <button type="submit">上传文件</button> </form> <div id="progress-bar"></div> ``` 2. JavaScript部分 接下来，在JavaScript中，我们需要添加一个事件监听器来监听文件上传表单的提交事件。当用户点击上传按钮时，我们需要获取用户选择的文件，并使用FormData对象来构建一个表单数据对象，将文件作为数据添加到表单中。然后，我们使用XMLHttpRequest对象来发送表单数据，并实时更新进度条元素，以显示上传进度。当上传完成后，我们可以获取服务器返回的Excel解析值，并将其显示出来。具体代码如下： ```javascript const uploadForm = document.getElementById('upload-form'); const fileInput = document.getElementById('file-input'); const progressBar = document.getElementById('progress-bar'); uploadForm.addEventListener('submit', (event) => { event.preventDefault(); // 获取用户选择的文件 const file = fileInput.files[0]; // 创建表单数据对象 const formData = new FormData(); formData.append('file', file); // 创建XMLHttpRequest对象 const xhr = new XMLHttpRequest(); // 监听上传进度 xhr.upload.addEventListener('progress', (event) => { if (event.lengthComputable) { // 更新进度条元素 const percentComplete = event.loaded / event.total * 100; progressBar.style.width = `${percentComplete}%`; } }); // 监听上传完成事件 xhr.addEventListener('load', (event) => { // 获取服务器返回的Excel解析值 const response = JSON.parse(xhr.responseText); const excelValue = response.excelValue; // 显示Excel解析值 alert(`Excel解析值为：${excelValue}`); }); // 发送表单数据 xhr.open('POST', '/upload'); xhr.send(formData); }); ``` 3. 服务器端部分 最后，在服务器端，我们需要接收并处理上传的文件，并解析Excel文件并返回解析值。具体代码如下： ```javascript const express = require('express'); const multer = require('multer'); const xlsx = require('xlsx'); const app = express(); const upload = multer({ dest: 'uploads/' }); app.post('/upload', upload.single('file'), (req, res) => { // 读取上传的文件 const workbook = xlsx.readFile(req.file.path); // 解析Excel文件 const worksheet = workbook.Sheets[workbook.SheetNames[0]]; const excelValue = worksheet.A1.v; // 删除上传的文件 fs.unlinkSync(req.file.path); // 返回Excel解析值 res.json({ excelValue }); }); app.listen(3000, () => { console.log('服务器已启动'); }); ``` 以上就是一种基于JavaScript的实现方式，可以实现上传文件显示进度条并返回Excel解析值的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值