Effect:

Introduction: Fast and simple implementation of data export to Excel table requirements.

The following is the detailed procedure

Three dependencies need to be installed:

NPM install -s file-saver XLSX NPM install -d script-loader or use yarn to install yarn add file-saver XLSX yarn add script-loader  -DCopy the code

2. Create a new folder in the project :(vendor– represents a third-party plug-in, and can be vendors by an appropriate name, I use vendors)

Put two files insideBlob.jsandExport2Excel.js. Download address:File download

Three, modify,Export2Excel.jscontent

在Export2Excel.jsModify to introduce your ownBlob.jsAddress of file

Note: If you do not know how to configure the path

Add resolve alias to build folder webpack.base.conf.js (alias is configuration alias)

'@vendor': path.resolve(__dirname, '.. /src/vendor')

Can be resolved (path userequire('@vendors/Blob.js'))

4. Introduced in Vue

<script> : import {export_json_to_excel} from '@/vendor/Export2Excel'Copy the code
<template>In:<el-button @click="exportExcel">Export Excel</el-button>
Copy the code
Methods: exportExcel() {const excelHeader = ['ICD10 ', 'diagnostics ']; const keys = ['temp_column1', 'temp_column2']; const _dataSource = this.dataTabel(); Const excelData = _dataSource. The map (item = > keys. The map (I = > item [I] | | ')) const excelName = 'rule table' export_json_to_excel(excelHeader, excelData, excelName) }, dataTabel(){ return [ { "temp_column_id": "100000202102251058271000000001", "temp_column1" : "C00 - C97," "temp_column2" : "ah ah 1111"}, {" temp_column_id ": "232423423", "temp_column1": "c00-c97 ", "temp_column2":" aaah aaah 2222"}]}Copy the code

The end. Click the “Export Excel” button to try it out

Thanks for the following references

  • Reference 1
  • Reference 2

The above is the reference content through their own implementation summary, welcome to exchange