JS实现Excel导入以及table导出为Excel-Toy模板网

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

在开发项目的过程中遇到了一个需求，将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文件。文章来源地址https://www.toymoban.com/news/detail-487672.html

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')
    },

到了这里，关于JS实现Excel导入以及table导出为Excel的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！