Installation of a dependent
npm install -S file-saver xlsx
npm install -D script-loader
Two New Folder
In the introduction to the Internet Baidu
Three introduced in main.js
import Blob from './vendor/Blob.js'
import Export2Excel from './vendor/Export2Excel.js'
(Pass: note the path and file name are the same)
Four webpack.base.conf.js modified as follows:
resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'VUE $': 'VUE / dist / vue.esm.js' , '@': Resolve ( 'the src' ), 'scss_vars': '@ / Styles / vars.scss' , 'Excel': path.resolve ( __dirname, '../src/excel'), // new row *** } },
Use the 5 project
html:
<el-button type="primary" @click="outexcel">导出Excel</el-button>
js:
outexcel () { the this . $ Confirm The ( 'This will export excel file, whether to continue?', 'tips' , { confirmButtonText: 'OK' , cancelButtonText: 'Cancel' , type: 'warning' .}) the then (() => { // . this.excelData = this.canhuiList // you want to export data List the console.log ( the this .canhuiList) the this .export2Excel () }).catch(() => { }); }, formatJson(filterVal, jsonData) { return jsonData.map(v => filterVal.map(j => v[j])) }, export2Excel () { require.ensure([], () => { const { export_json_to_excel } = require('../../vendor/Export2Excel'); const tHeader = [ 'conference title', 'Region Center', 'Customer Name', 'Name', 'device type', 'Version', 'add time', 'departure time', 'when participants long' ,] ; const filterVal = ['meetingTitle', 'areaName', 'customName', 'name', 'deviceModel', 'deviceAppVersion','joinTime','leaveTime','joinTimeLong', ]; const list = this.canhuiList; const data = this.formatJson(filterVal, list); autoWidth const = to true export_json_to_excel (tHeader, Data, 'participants recording Excel' ); }) },
pass: list your data array,
tHeader your header
filterVal is your corresponding parameter name (one to one)
Good luck QWQ