通过input实现纯前端导入excel及校验必填项

于 2024-04-26 17:02:26 发布
阅读量183 收藏
点赞数 2
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73892103/article/details/138224165
版权

   固定的公式直接贴代码了 ,  （最后根据回调的数组， 生成后端想要的数据结构保存即可）

   1-定义  type = flie ， 调整样式

API回调：

我也喜欢小瑶呀
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
html input 导入文件夹,input文件上传（上传单个文件/多选文件/文件夹、拖拽上传、分片上传）...
weixin_30510787的博客
06-24 2023
uploadFile.upload-default {border: 1px dashed red;}.upload-default.upload_drag_hover{border: 1px dashed green;}input{appearance: textfield;-moz-appearance: textfield;-webkit-appearance: textfield;}inp...
纯css实现输入框placeholder动效及输入校验
11-21
借助css:placeholder-shown :valid :invalid伪类及html5 input pattern 属性就可以实现 :placeholder-shown伪类目前兼容性如下： :placeholder-shown兼容性 直接上代码！:smiling_face_selector: 源码 html: <...
数据表格加input日期_【Excel操作技巧】2021年做表格还慢慢吞吞没效率的就走人！！！...
weixin_40002224的博客
01-13 109
公众号回复2016 下载office2016Excel里有一些操作是我们经常会用到的，使用频率越高的操作，可以提升效率的空间就越大。今天分享六个小技巧，每个都让你的效率成倍提高，一起来看看都是那些神技吧！1、统一日期格式三个要点要记牢由于在录入数据时，没有将日期格式设置好，有的是斜杠，而有的则是点，现在需要统一日期格式，那如何操作呢？2、数字统一加单位由于工作需要，必须为数据添加相应...
Vue input导入Excel
future_1_的博客
09-08 784
Vue input导入Excel
input 标签筛选excel
baidu_16250655的博客
03-08 587
Input标签添加属性 accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
input 标签的 accept 属性、excel等文件类型
林中明月间丶
12-08 7487
https://blog.csdn.net/mp624183768/article/details/84761914?ops_request_misc=&request_id=&biz_id=102&utm_term=input%2520accept&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~sobaiduweb~default-2-84761914.nonecase https://blog.
vue input 输入校验字母数字组合且长度小于30的实现代码
10-18
主要介绍了vue input 校验字母数字组合且长度小于30的实现代码，文章给大家补充介绍了在Vue.Js下使用el-input框只能输入数字并限制位数并且限制中文输入以及粘贴功能，感兴趣的朋友跟随脚本之家小编一起看看吧
js实现纯前端压缩图片
01-18
本文实例为大家分享了js实现纯前端压缩图片的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=...
vue input标签通用指令校验的实现
10-16
主要介绍了vue input标签通用指令校验的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
js实现纯前端的图片预览
01-19
在这之前，我曾经通过订阅input[type=file]元素的onchange事件，一旦更改路径则将图片上传至服务器，接着就获取图片路径并赋值到img元素上。先不管文件异步提交的解决方案，就是服务端清理那些临时的预览图片已经...
INPUT EXCEL FILE DATA
08-13
It is a sample for the grammer
excel导入input
duancsdn的博客
03-25 457
<input id=“upload” type=“file” @change=“yhglimport()” accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
SAS数据导入input要点
weixin_43999733的博客
06-03 8362
1、input的输入格式 字符型变量默认8个字符，若使用input语句时，原文件字符长度超过8个字符，如果不加以说明，此时input会将字符截断为8个字符，如下： 代码1： data a; input name $ age; cards; xiaomingd5 3 xiaohong 4 ; run; 此时第一个变量xiaomingd5将被截断，生成的结果为： 若使用input格式输入时，...
input file 类型为excel表格
acbo03029198的博客
01-20 1445
以下为react写法，可自行改为html的 <div className="flag-tip"> 请上传excel表格, 后缀名为.csv, .xls, .xlsx的都可以 </div> <form acti...
前端 excel文件上传
weixin_30375247的博客
09-12 645
<div id="setManager-store-upload" style="display:none"> <form id="uploadForm"> <div style="height:40px;padding-left:40px;">上传文件：<input type="file" id="f...
input file文件上传
热门推荐
josjiang1的博客
06-11 2万+
一：浏览器post表单提交 通常的input组件表单提交时，按照form属性提交的其中enctype=”application/x-www-form-urlencoded”是默认值 &lt;form action="RequestServlet" method="post" enctype="application/x-www-form-urlencoded"&gt; 1该提交方式只是提交普通...
导入txt文件的三种input写法
qq646748739的专栏
09-22 2974
导入txt文件的三种input写法 data hbq.zyjh_appno_20170921; infile 'C:\Users\EX_WLJR_HUANGBIQUAN\Downloads\匹配卡号.txt'; length appno  $13.; input appno; run; data hbq.zyjh_appno_20170921; infile 'C:\Users\
纯前端利用 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 函数导入数据，并在回调函数中处理导入的数据。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值