# 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:

npm install xlsx file-saver -S
npm 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
  })
})

Warning v3.9.1+

The compatibility code for Blob has been removed in the later versions of v3.9.1+. If you need to be compatible with very low-level browsers, you can manually introduce blob-polyfill .

# Params

Params	Description	Type	Accepted Values	Default
header	Export header of data	Array	/	[]
data	Exported specific data	Array	/	[]
filename	Export file name	String	/	excel-list
autoWidth	Whether the cell auto width	Boolean	true / false	true
bookType	Export file type	String	xlsx, csv, txt, more	xlsx

# 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
  })
})

# 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
  }