# Excel

# Excel Export

Import and export of Excel is implemented by relying on js-xlsx.

Export2Excel.js is packaged on the on js-xlsx to facilitate exporting data.

# Use

Since Export2Excel depends not only on js-xlsx but also on file-saver and script-loader.

So you first need to install the following command:

yarn install xlsx file-saver -S
yarn install script-loader -S -D

Since js-xlsx size is still very large, the export function is not a very common function, so lazy loading is recommended when using it. The method of use is as follows:

import('@/vendor/Export2Excel').then(excel => {
  excel.export_json_to_excel({
    header: tHeader, //Header Required
    data, //Specific data Required
    filename: 'excel-list', //Optional
    autoWidth: true, //Optional
    bookType: 'xlsx' //Optional
  })
})

# Params

# Example

import('@/vendor/Export2Excel').then(excel => {
  const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
  const data = this.list
  excel.export_json_to_excel({
    header: tHeader, //Header Required
    data, //Specific data Required
    filename: 'excel-list', //Optional
    autoWidth: true, //Optional
    bookType: 'xlsx' //Optional
  })
})

• Online Demo
• Online Code

# Excel Import

Encapsulated UploadExcel Excel import component, support click and drag upload, also it is also Depends on js-xlsx.

It provides two callback functions:

• beforeUpload

  You can make some special judgments before uploading. For example, if the size of the file is greater than 1 megabyte? If it is greater than 1 megabyte, it stops parsing and prompts an error message.

  beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1
  
      if (isLt1M) {
        return true
      }
  
      this.$message({
        message: 'Please do not upload files larger than 1m in size.',
        type: 'warning'
      })
      return false
    }
  

• onSuccess A callback function that fires when parsing succeeds, which returns the header and content of the table.

 handleSuccess({ results, header }) {
      this.tableData = results
      this.tableHeader = header
    }

• Online Demo
• Online Code