Excel(XLSX/XLS)文件内容导入WEB表单,纯前端无需服务器支持,开源Chrome扩展 v0.0.8，附下载，附github链接(2021/5/8更)

最新推荐文章于 2023-07-28 15:15:13 发布
置顶 最新推荐文章于 2023-07-28 15:15:13 发布
阅读量3.1k 收藏 16
点赞数 3
分类专栏： 基础知识 Chrome扩展插件 文章标签： web excel Chrome扩展 SheetJs 导入表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/flyback/article/details/104984974
版权

起因

老婆从事的是售后的工作，常年需要把售前工程师和销售的一些实施的数据录入到他们的工作平台上。

最开始我看在眼里，焦虑在心上，我心想，你这完全是人力无价值的搬运工的(excel到网页表单)工作，你们公司难道不能把录入这一部分的工作开放给更前线的人或者提供一个excel导入的工具吗？老婆摇摇头说，这个事已经提了n年了，以她这工作岗位在公司里的重要程度，还不足以让开发工程师紧着她做事，他们还有“更重要的事”要做。

曾几何时，开发出身的我也想着让她学学Js,Python什么的，可是对于她来说，学写程序和看剧这两件事情无疑看剧是更重要的事。

为了拯救老婆的双眼和布道计算机就是生产力，我抽起了老刀，咔咔咔，不辱使命。

github源代码

最新版本 v0.0.8, 请到github下载

操作说明

使用方法:

  • 使用开发者模式加载扩展之后
  • 先用chrome打开要被导入数据的那个网页
  • 点击地址栏右边的E图标(我没做图标)
    • 在弹出的菜单里面选择xls文件作为数据源，注意选择文件里的工作表，不操作的话是第一个工作表
    • 这个时候下面可以看到1条或多条网页的url，这个是当前打开的标签页里的所有网页，然后勾上锁定关联,注意勾上锁定关联以后内存里的数据就只为关联的标签页负责了
    • 如果没有出现网页的url,那你就在打开的那个标签页里刷新一些页面，在看

重点来了

在打开的网页上点击需要设置对应关系的文本/选择控件，这时候控件的右边会出来一个红色背景的">",点击这个">",会弹出来一个窗口，这里面是单选按钮，点击对应的某个按钮，这就是设置了对应关系，如果不能确定，可以通过界面上的“上一条/下一条”看一下是不是你要的数据

每个控件都可以这样设置

设置完了以后F5刷新这个页面，页面会出现一个小操作窗口在左下脚，方便操作

设置了对应关系以后，对应关系会保存起来，如果关闭了chrome,则下次要再操作只需要点击E图标，载入xls数据后勾选关联然后刷新页面即可，不用再次设置了。

魔芋
关注
  • 3
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 14
    评论
专栏目录
web 从Excel表格导入到sql数据库
somethingGoWay的专栏
04-01 271
前台代码： <table width="900" style="text-align: center; vertical-align: middle;" align="center" border="0" cellpadding="0" cellspacing="0"> <tr>
浏览器下载页面DownLoadUtils
Zhang52_Cheng的博客
02-28 2261
package com.itcast.response.utils; import java.io.UnsupportedEncodingException; import java.net.URLEncoder; import java.util.Base64; public class DownLoadUtil { public static String getFileName(String...
java文件下载
时代挥豪的博客
05-05 7522
一、页面上用 超链接 a  或者 是 iframe的src属性 二、Java代码 1、HttpServletResponse 和 HttpServletRequest    2、下面的方法是struts2利用ServletActionContext获取  HttpServletResponse 和 HttpServletRequest    ，spring mvc直接写在方法参数列表即可。 3
xlsx模块 前端_web前端：nodejs的xlsx模块批量解析与导出excel数据表简单使用
weixin_34369521的博客
12-24 519
ode.js是一个基于ChromeV8引擎的Javascript运行环境。Node.js使用了一个事件驱动、非阻塞式I/O的模型。Node是一个让JavaScript运行在服务端的开发平台，它让JavaScript成为与php、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。发布于2009年5月，由RyanDahl开发，实质是对ChromeV8引擎进行了封装。想用nodejs的xl...
VB制作网页自动填表
最新发布
sun13047140038的博客
07-28 2657
六、当然就是测试了，点运行按钮，我们可以看到，我们的webbrowser打开了[url]http://dhunter.51.net[/url]，等网页基本下载结束再点command1按钮，我们可爱的webbrowser就把找到的含有[url]http://dhunter.51.net[/url]的URL都加入到list1中了。六、当然就是测试了，点运行按钮，我们可以看到，我们的webbrowser打开了网络人家的主页，然后再点按钮，我们可爱的webbrowser就把我们带到了模拟之家BBS了。
java 导入Excel 文件，支持xls、xlsx、csv格式
09-19
在Java编程中，导入Excel文件是一项常见的任务，特别是在数据处理和数据分析领域。为了支持不同版本的Excel文件以及CSV格式的数据，开发者需要了解并掌握相关的API和技术。以下将详细讲解如何在Java中处理`xls`、`...
基于react/antd的纯前端js导入excel
11-27
基于react/antd的纯前端js导入excel,用户下载之后直接放入项目里面引用即可,无需后端服务支持
NOPI导出EXCEL/xls/xlsx并输出到WEB页面
08-07
标题 "NOPI导出EXCEL/xls/xlsx并输出到WEB页面" 描述的是一个使用NOPI（可能是某种特定的开发框架或库）处理Excel文件并将其数据展示在Web页面上的过程。NOPI允许开发者执行Excel文件的导入、导出以及下载功能，同时...
php导入xls，php导入xlsx文件，php导入，phpExce
08-22
标题和描述提及的“php导入xls，php导入xlsx文件，php导入，phpExcel”涉及了PHP处理Excel文件的一些关键知识点。以下是关于这些主题的详细说明。 1. PHP导入XLS文件： - XLS文件是早期版本的Microsoft Excel（97-...
读写xls 和 xlsx格式的excel文件
05-20
本文将详细讨论如何在应用程序中读写xls和xlsx格式的Excel文件，这两种格式都是Microsoft Excel广泛使用的文件类型。 首先，我们需要理解两种格式的区别。xls是Excel早期版本（97-2003）使用的文件格式，基于二进制...
用VB自动填写网页表单
01-06
一个用VB实现自动填写网页表单的小程序。可以用于实现自动登录之类的应用。
自动填写表单的chrome插件
12-28
主要功能是打开任意网页插件会自动判断URL是否是form.php结尾，如果是则按照规则自动填写网页表单，如果不是则略过。你可以根据此代码进行任意改造以满足新的需求。
JS 读取Excel文件(xls) 兼容Chrome/IE/Firefox
06-26
JS 读取Excel文件(xls) 兼容Chrome/IE/Firefox 文章配套工具
用Excel自动填写网页表单
05-22
用Excel实现自动填写网页表单，可以批量填写报名数据。
用excel自动填充网页表单
09-23
代码实现用excel表格中数据自动填充 网页表单
访问网页并自动填写表单VBA
热门推荐
always007的博客
09-16 1万+
Sub Macro1() ' 'CreateObject ("internetExplorer.application") 'Visible = True 'Navigate "C:\Program Files (x86)\Internet Explorer\Application\iexplore.exe" ' MsgBox ("123")      CreateObject ("inter...
xlsx文件打开乱码_下载文件打开格式错误或者乱码解决，亲测有效。
weixin_39946429的博客
01-05 1197
axios({ url: api.downUser, method: 'get', responseType: 'arraybuffer',[1] headers: { 'Content-Type': 'application/json;charset=UTF-8', }, })download().then(res=>{ console.log(res) const content...
进入指定url就可下载xlsx文件
weixin_34122810的博客
07-24 1333
GuestApplyService.java // private final static int PERSONAL_NAME_INDEX = 0; private final static int USER_NAME_INDEX = 1; private final static int COMPANY_NAME_INDEX = 2; private ...
纯前端利用 js-xlsx 实现 Excel 文件导入导出功能示例
06-06
好的，以下是一个利用 js-xlsx 实现 Excel 文件导入导出功能的示例： 首先在 HTML 文件中引入 js-xlsx 库： ```html <script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script> ``` 然后在 JavaScript 文件中编写以下代码： ```javascript // 导出 Excel 文件 function exportExcel(data, filename) { const ws = XLSX.utils.json_to_sheet(data); const wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); XLSX.writeFile(wb, `${filename}.xlsx`); } // 导入 Excel 文件 function importExcel(file, callback) { const reader = new FileReader(); reader.readAsArrayBuffer(file); reader.onload = (e) => { const data = new Uint8Array(e.target.result); const workbook = XLSX.read(data, { type: 'array' }); const sheetName = workbook.SheetNames[0]; const worksheet = workbook.Sheets[sheetName]; const result = XLSX.utils.sheet_to_json(worksheet, { header: 1 }); callback(result); }; } ``` 其中，exportExcel 函数用于将数据导出为 Excel 文件，参数 data 为要导出的数据，filename 为导出的文件名。 importExcel 函数用于导入 Excel 文件，参数 file 为要导入的文件，callback 为导入成功后的回调函数，回调函数的参数 result 为导入的数据。 示例代码中使用了 FileReader 对象读取文件内容，然后使用 js-xlsx 库解析 Excel 文件并将数据转化为 JSON 格式。 使用示例： ```javascript const data = [ { name: '张三', age: 20, gender: '男' }, { name: '李四', age: 22, gender: '女' }, { name: '王五', age: 25, gender: '男' }, ]; exportExcel(data, 'test'); // 导出 Excel 文件，文件名为 test.xlsx const inputElement = document.getElementById('input-file'); inputElement.addEventListener('change', (e) => { const file = e.target.files[0]; importExcel(file, (result) => { console.log(result); // 输出导入的数据 }); }); ``` 在 HTML 文件中添加一个文件选择框： ```html <input type="file" id="input-file"> ``` 用户选择一个 Excel 文件后，调用 importExcel 函数导入数据，并在回调函数中处理导入的数据。
评论 14
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值