前端 读取/导入 Excel文档

这篇具有很好参考价值的文章主要介绍了前端 读取/导入 Excel文档。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

情况: 需要通过Excel表,将数据导入到数据库,但是后台人员出差了,我又只会PHP,没用过node,所以只能前端导入Excel文件,然后循环调用后台的单条添加接口了。

库: Excel.js(版本4.3.0)

CDN地址:

<script src="https://cdn.bootcdn.net/ajax/libs/exceljs/4.3.0/exceljs.min.js"></script>

Excel.js 中文文档:https://gitee.com/alan_scut/exceljs

下面是动态Excel表单

前端 读取/导入 Excel文档,web前端,前端,excel

下面是file文件(Excel文件)获取到的对象:

前端 读取/导入 Excel文档,web前端,前端,excel

下面是代码中输出的需要插入的数据:

前端 读取/导入 Excel文档,web前端,前端,excel

代码:

使用方法: importExcal()

// 全局函数执行完成后执行组件的钩子函数、组件事件、自定义事件

// 导入Excel表
async function importExcal() {
  // 文件内容 (这里是从input file里面获取到的内容)
  var file = input_file;
  // 提交后端数据的整体数组
  var data_arr = [];
  // 行程的最大列数(包含前面不变的)
  var stay_col_num = 0;

  if (file) {
    // 判断文件类型
    let filetype = file.name.split('.')[file.name.split('.').length - 1]
    let filetypes = '.xlsx,.xls'
    if (filetypes.indexOf(filetype) === -1) {
	    this.$message({
			message: '请上传 .xlsx 或 .xls 文件。',
			type: 'warning'
		})
      return;
    }
    // 读取文件文件
    const reader = new FileReader();

    // file.raw是具体的文件内容,需要看一下你获取到的是file.raw,还是file[0]即可 将文件转为 ArrayBuffer 格式
    console.log("这里是获取到的file文件内容:", file)
    // 这里要用 readAsArrayBuffer 转成buffer,因为下面读取要用到 buffer 才可以
    reader.readAsArrayBuffer(file.raw);
    reader.onload = function (event) {
      try {
        const result = event.target.result;
        var workbook = new ExcelJS.Workbook();
        // 读取 buffer 内容
        workbook.xlsx.load(result)
          .then(async function () {
            // 迭代所有sheet (如果只有一个,可以通过名称获取 var worksheet = workbook.getWorksheet('My Sheet');)
            workbook.eachSheet(async function (worksheet, sheetId) {
              // 清空数据数组
              data_arr = [];
              // 获取 形成安排 的列数(从第8列开始的), 总不会超过100天,所以写个100
              // 在这里获取 形成列的长度,是因为这里是表头,不会像内容一样出现空白单元格,造成无法获取到最终列的情况
              for (let j = 8; j <= 100; j++) {
                // 当列到 行程安排 且,j+1 不是 行程安排的时候,就是行程安排的列宽
                if (worksheet.getCell(`${getLetter(j)}2`).value == '行程安排' && worksheet.getCell(`${getLetter(j + 1)}2`).value !== '行程安排') {
                  stay_col_num = j;
                  // 如果两个都有值的话,就跳出循环
                  break;
                }
              }
              // 迭代工作表中具有值的所有行
              worksheet.eachRow(function (row, rowNumber) {
                // 数据是从第四行开始
                if (rowNumber >= 4) {
                  // data_arr.push(row.values)
                  // 每行的数据
                  let row_data = row.values;
                  // 传给后端的对象
                  let data_obj = {
                    "guest": "",
                    "name": "",
                    "sex": "",
                    "company": "",
                    "job": "",
                    "phone": "",
                    "stay": []
                  }

                  // 循环每行的数据
                  row_data.map(function (item, index, arr) {
                    // 如果是前7列,则是固定列的值,直接复制即可,否则的话则是 动态的行程安排
                    if (index <= 7) {
                      switch (index) {
                        case 2:
                          // 嘉宾类别
                          data_obj.guest = item ? item : "";
                          break;
                        case 3:
                          // 姓名
                          data_obj.name = item ? item : "";
                          break;
                        case 4:
                          // 性别
                          data_obj.sex = item ? item : "";
                          break;
                        case 5:
                          // 单位
                          data_obj.company = item ? item : "";
                          break;
                        case 6:
                          // 职务
                          data_obj.job = item ? item : "";
                          break;
                        case 7:
                          // 手机号
                          data_obj.phone = item ? item : "";
                          break;
                      }
                    } else {
                      // 行程安排(从第八列开始到形成的最后一列结束)
                      if (index >= 8 && index <= stay_col_num) {
                        if (worksheet.getCell(`${getLetter(index)}${rowNumber}`).value == '是') data_obj.stay.push(worksheet.getCell(`${getLetter(index)}3`).value);
                      }
                    }
                  })
                  // 将插入后台的数据添加进数组
                  data_arr.push(data_obj);
                }
              });
              console.log("全部需要插入数据库的数据的数组:", data_arr)
              // 这里使用了 Promise 解决在for循环内,使异步接口,进行同步提交的问题;文章后面有详细说明
              for (let i = 0; i < data_arr.length; i++) {
                let result_data = await createUser(data_arr[i]);
                if (!result_data.result) {
					// 如果出错,就跳出循环
					this.$message({
						message: `${i + 1} 行数据 ${data_arr[i].name}(${data_arr[i].phone}),由于 ${result_data.msg} 导入失败`,
						type: 'error'
					})
					// 跳出循环
                	break;
                }
              }
            });
          });
      } catch (err) {
      	this.$message({
			message: '读取文件错误',
			type: 'error'
		})
        console.log('err', err);
      }
    };
  } else {
  	this.$message({
		message: '请选择文件',
		type: 'error'
	})
  }
}

// 添加用户信息接口
async function createUser(data) {
  return await new Promise(function (resolve, reject) {
    // 处理异步逻辑时候调用resolve和reject函数
    axios({
      method: 'POST',
      url: `${base_url}/api/add`,
      headers: {
        // 没有可以不要token
        // authorization: `bearer ${token}`
      },
      // 数据
      data: data
    }).then(res => {
      let resp = res.data;
      if (resp.code == 1) {
        if (resp.data.code == 200) {
          resolve({
            "result": true
          });
        }
      } else {
        resolve({
          "result": false,
          "msg": resp.msg
        });
      }
    }).catch(req => {
      reject({
        "result": false,
        "msg": ""
      });
    });
  });
}

// 获取第N个字母
function getLetter(num) {
  return String.fromCharCode(64 + num);
}

代码中用到的方法总结:

新建工作簿

var workbook = new ExcelJS.Workbook();

读取 buffer 内容

workbook.xlsx.load(data).then(function() {
// 其他代码
});

迭代所有sheet

workbook.eachSheet(function(worksheet, sheetId) {
// 其他代码
});

按名称获取表格

var worksheet = workbook.getWorksheet(‘My Sheet’);

按ID获取表格

var worksheet = workbook.getWorksheet(1);

迭代工作表中具有值的所有行

worksheet.eachRow(function(row, rowNumber) {
console.log(‘Row:’ + rowNumber + ’ = ’ + JSON.stringify(row.values));
});

获取单元格(A2)

var collectcell = worksheet.getCell(‘A2’);

for循环内,使异步接口变成同步提交
我文章的地址:前端JS for循环内异步接口变成同步提交(JavaScript for循环异步变同步)

遇见的一些问题:
1. Excel.JS 支持的数据读取方式不同,获取的数据类型不同。例如:filestreambuffer

另外说一下
有兴趣的朋友也可以试试 SheetJS ,感觉好像功能更多一些,下次我再需要用到excel的时候也会尝试一下的。
SheetJS中文文档:https://github.com/rockboom/SheetJS-docs-zh-CN

尝试完成,回来记录一下: SheetJS 文档会更丰富一些,但是他分社区版(免费)和专业版(收费)。社区版不支持导出文件的样式修改,专业版才可以。

我决定还是继续用 Excel.js文章来源地址https://www.toymoban.com/news/detail-734294.html

到了这里,关于前端 读取/导入 Excel文档的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端导入导出excel记录

    前端模块的导入导出excel功能,大体分为两个逻辑。 前端使用导入组件,获取excel,交给 后端处理 前端使用导入组件,获取excel,自己 解析数据 ,然后调用数据存储的方法。 我们分别对这两种方法进行记录。 导出 组件: 方法: api: util: 导入 组件: 方法: 工具方法: 导

    2024年02月12日
    浏览(38)
  • Python数据分析之读取Excel数据并导入数据库

    曾某年某一天某地 时间如静止的空气 你的不羁 给我惊喜 ——《谁愿放手》陈慧琳 入职新公司两个多月,发现这边的数据基础很差,很多数据甚至没有系统承载,大量的Excel表,大量的人工处理工作,现阶段被迫“面向Excel”编程。本文主要介绍使用Python读取Excel数据并导入

    2024年01月25日
    浏览(54)
  • Apache POI实现Excel导入读取数据和写入数据并导出

    Apache POI POI介绍 Apache POI是用Java编写的免费开源的跨平台的Java API,Apache POI提供API给Java程序对Microsoft Office格式档案读和写的功能,其中使用最多的就是使用POI操作Excel文件。 maven坐标: POI结构: 入门案例 ExcelTest .java文件 从Excel文件读取数据

    2024年02月12日
    浏览(46)
  • 纯前端实现 导入 与 导出 Excel

    最近经常在做 不规则 Excel 的导入,或者一些普通 Excel 的导出,当前以上说的都是纯前端来实现;下面我们来聊聊经常用到的Excel导出与导入的实现方案,本文实现技术栈以 Vue2 + JS 为例 导入分类: 调用 API 完全由后端来解析数据,清洗数据,前端只负责调用 API ; 前端解析

    2024年02月09日
    浏览(44)
  • 【前端】批量导入和导出Excel数据

    excel导入功能需要使用npm包 xlsx ,所以需要安装 xlsx 插件,读取和写入都依赖她 vue-element-admin模板提供了一个导入excel数据的文件,我们只需用即可 代码地址: https://github.com/PanJiaChen/vue-element-admin/blob/master/src/components/UploadExcel/index.vue 将vue-element-admin提供的导入功能新建一个组件

    2024年02月09日
    浏览(49)
  • 后端:使用easyExcel实现解析Excel文件读取数据。前端:Excel模板下载、前端上传文件

            本篇是EasyExcel快速入门知识,讲解如何读取Excel文件,对Excel中错误信息如空字符、必填项为空、表格格式校验做到处理 ,并给出了实际项目中示例代码;为什么要使用easyexcel;原因是相比于poi,easyexcel更加轻量级,读取写入API方便,并且在工作中占用内存较小;

    2024年02月05日
    浏览(76)
  • xlsx库实现纯前端导入导出Excel

    最近做了前端导入、导出 Excel 的需求,用到了 js-xlsx 这个库,该库文档提供的用例很少,并不是很友好。本文总结一下我是如何实现需求的。 提供一个 Excel 文件,将里面的内容转成 JSON 导入数据 提供一个 JSON 文件,生成 Excel 文件并导出 导入与导出既可以前端做,也可以后

    2023年04月08日
    浏览(52)
  • 把前端传来的数据导入到excel文件

    [  {\\\"nameFirst\\\": \\\"test1\\\", \\\"nameSecond\\\": \\\"test1\\\", \\\"nameThird\\\": \\\"test1\\\"},  {\\\"nameFirst\\\": \\\"test2\\\", \\\"nameSecond\\\": \\\"test2\\\", \\\"nameThird\\\": \\\"test2\\\"}]  

    2024年01月22日
    浏览(38)
  • ios 实现PDF,Word,Excel等文档类型的读取与预览

    最近正在研发的项目有一个需求: 允许用户将iCloud中的文档上传,实现文件的流转。 以前接触的项目对于资料类的上传大多是仅限于图片与视频。对于文档类(PDF, Word, Excel, Text等), 因苹果的沙箱环境限制,想要读取文件是无法实现的。目前虽然可以支持选择文件,但只能通

    2024年02月06日
    浏览(53)
  • Excel 导入导出(前端处理:xslx)(后端处理:hutool+poi || Easy Excel )

      目录 Excel 导入导出(前端处理:xslx) 代码示例 导入Excel数据 将数据封装好后传给后端  导出数据 预览(vue-office/excel\\\"……;docx-preview) Excel 导入导出(后端处理:hutool+poi || Easy Excel ) 前端 后端使用Hutool处理Excel 文件 Hutool-poi是针对Apache POI的封装,因此需要用户自行引入

    2024年01月24日
    浏览(72)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包