# 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