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