当前位置:首页 » 《随便一记》 » 正文

JS实现Excel导入以及table导出为Excel

24 人参与  2023年04月07日 11:05  分类 : 《随便一记》  评论

点击全文阅读


在开发项目的过程中遇到了一个需求,将excel文件导入并且解析渲染到页面上。用户可以对表格内的部分内容做修改后再上传到服务端。

导入Excel

1.使用html支持上传标签从本地获取文件,例如type为file的input,el-upload等

2.实例化FileReader,并且通过readAsBinaryString将文件读取为二进制字符串。(FileReader提供的其他方法请参考JavaScript中的FileReader示例详解_javascript技巧_脚本之家)

3.使用XLSX插件的XLSX.read()方法,将二进制字符串转换成excel文件的工作簿对象workbook(XLSX的具体使用方法请参考Overview | SheetJS Community Edition)

4.通过XLSX.utils.sheet_to_json()方法,从workbook中获取第一张 Sheets表格数据并将其转换为json数据

5.重组json数据生成数组,即是根据自己的定义的列字段名,重新组成符合自己需求的json数据。

具体实现代码如下:

importFilePushTable(params) {      const _file = params.file      let workBook = null      let filetype = _file.name.split('.')[_file.name.split('.').length - 1]      let filetypes = '.xlsx,.xls'      if (filetypes.indexOf(filetype) === -1) {        this.$message.warning('请上传.xlsx,.xls文件。')        return      }      const reader = new FileReader()      reader.readAsBinaryString(_file)      reader.onload = (evt) => {        workBook = XLSX.read(evt.target.result, {            type: 'binary'        })        let excelData = []        for(let sheet in workBook.Sheets) {            excelData = excelData.concat(XLSX.utils.sheet_to_json(workBook.Sheets[sheet]))        }        this.tableData = excelData.map(obj => {            return {                date: this.formatDate(obj['日期'], '/'),                name: obj['姓名'],                sex: obj['性别'],                age: obj['年龄'],                educational: obj['学历'],                address: obj['地址'],            }           })      }    },

既然有前端导入Excel的需求,那联想一下导出应该怎么解决呢????

导入到Excel

1.将需要导出的数据,按照导入的第五步一样转换

2.通过XLSX插件的 XLSX.utils.book_new()方法,创建excel工作簿对象workbook

3.通过XLSX.utils.json_to_sheet(),创建excel表格对象worksheet。

4.通过XLSX.utils.book_append_sheet(),生成实际excel工作簿

5.使用XLSX.writeFile()生成excel文件。

exportFile(data) {        let exportData = JSON.parse(JSON.stringify(data)).map(obj => {            return {                '日期': obj.date,                '姓名': obj.name,                '性别': obj.sex,                '年龄': obj.age,                '学历': obj.educational,                '地址': obj.address,            }        })        const workBook = XLSX.utils.book_new()        const workSheet = XLSX.utils.json_to_sheet(exportData)        XLSX.utils.book_append_sheet(workBook, workSheet, 'sheet')        XLSX.writeFile(workBook, '导出Excel数据.xlsx')    },


点击全文阅读


本文链接:http://zhangshiyu.com/post/58715.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1