• javascript导入excel文件


            导入文件用到一个 xlsx.core.js 的包。

    1. html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. <script type="text/javascript" src="./xlsx.core.min.js">script>
    7. <title>Documenttitle>
    8. head>
    9. <body>
    10. <input type="file" id="file" style="display:none;" />
    11. <button onclick="importFile()">导入button>
    12. body>
    13. <script type="text/javascript" src="./index.js">script>
    14. html>

            隐藏 input 框,加一个 button 按钮可以方便的调节按钮的样式。

    1. function importFile() {
    2. console.log('导入');
    3. document.getElementById('file').click();
    4. }
    5. document.getElementById('file').addEventListener('change', function (e) {
    6. let files = e.target.files;
    7. if (files.length == 0) return;
    8. let f = files[0];
    9. if (!/\.xlsx$/g.test(f.name)) {
    10. alert('仅支持读取xlsx格式!');
    11. return;
    12. }
    13. e.target.value = "" // 清空上一次上传的数据,防止第二次无法上传
    14. readWorkbookFromLocalFile(f, function (workbook) {
    15. readWorkbook(workbook);
    16. });
    17. });
    18. function readWorkbookFromLocalFile(file, callback) {
    19. let reader = new FileReader();
    20. reader.onload = function (e) {
    21. let data = e.target.result;
    22. let workbook = XLSX.read(data, { type: 'binary' });
    23. if (callback) callback(workbook);
    24. };
    25. reader.readAsBinaryString(file);
    26. }
    27. function readWorkbook(workbook) {
    28. let sheetNames = workbook.SheetNames; // 工作表名称集合
    29. console.log(sheetNames, 'sheetNames');
    30. let worksheet = workbook.Sheets[sheetNames[0]]; // 读取第一张sheet
    31. console.log(worksheet, 'worksheet');
    32. let json = XLSX.utils.sheet_to_json(worksheet);
    33. // let json = XLSX.utils.sheet_to_json(worksheet, { range: 1 }) // range: 1 可以设置是从第几行开始读,不设置从第一行开始读
    34. console.log(json, 'json');
    35. }

            文件信息。

            页面上取值。

  • 相关阅读:
    平衡树 Treap & Splay [学习笔记]
    【Redis】RedisTemplate序列化传输数据
    Windows 下自动预约申购 i茅台
    【CSDN|每日一练】小艺的英文名
    2022-11-30 mysql-Tuning InnoDB Primary Keys
    java aspose cells 读取名称管理器
    2023 年最佳开源软件
    主数据管理平台产品功能组成架构
    数据结构:链式队列
    Spring Boot 集成 WebSocket 实例 | 前端持续打印远程日志文件更新内容(模拟 tail 命令)
  • 原文地址:https://blog.csdn.net/h360583690/article/details/139422525