Pure front-end for data export excel file

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

 

Guess you like

Origin www.cnblogs.com/cb1490838281/p/11971223.html