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
}