JS implements Excel import and table export to Excel

In the process of developing the project, I encountered a requirement to import the excel file and analyze and render it on the page. Users can modify part of the content in the form and then upload it to the server.

Import Excel

1. Use html to support upload tags to obtain files locally, such as input with type file, el-upload, etc.

2. Instantiate FileReader, and read the file as a binary string through readAsBinaryString. (For other methods provided by FileReader, please refer to the detailed explanation of the FileReader example in JavaScript_javascript skills_Script Home )

3. Use the XLSX.read() method of the XLSX plug-in to convert the binary string into the workbook object workbook of the excel file (for specific usage of XLSX, please refer to Overview | SheetJS Community Edition )

4. Through the XLSX.utils.sheet_to_json() method, get the first Sheets table data from the workbook and convert it to json data

5. Reorganize the json data to generate an array, that is, recompose the json data that meets your own needs according to the column field names defined by you.

The specific implementation code is as follows:

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['地址'],
            }   
        })
      }
    },

Since there is a need to import Excel from the front end, let's think about how to solve the export? ? ? ?

Import to Excel

1. Convert the data that needs to be exported according to the fifth step of import

2. Create an excel workbook object workbook through the XLSX.utils.book_new() method of the XLSX plug-in

3. Through XLSX.utils.json_to_sheet(), create an excel table object worksheet.

4. Through XLSX.utils.book_append_sheet(), generate the actual excel workbook

5. Use XLSX.writeFile() to generate an excel file.

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