Vue exports Excel tables

This is the second day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

The sample

Sample code

Establishing the project

vue init webpack excel-exportBuild excel -exportCD excel - projectexportEnter the excel -exportNPM install depends on NPM run devCopy the code

Exporting Excel key

1. Install dependencies

NPM install -s file-saver Web application NPM install -s XLSX spreadsheet parser NPM install -d script-loader mounts JS globallyCopy the code

2. Add blob. js and Export2Excel

Create a file (vendor) in the SRC directory and add blob.js and Export2Excel. Js. Add a code to Export2Excel. The modified code is 147-155 lines, as follows:

/* Sets the maximum width of each column of the worksheet */
  const colWidth = data.map(row= > row.map(val= > {
    /* Check whether the value is null/undefined*/
    if (val == null) {
      return { 'wch': 10 };
    }
    /* Check whether it is Chinese */
    else if (val.toString().charCodeAt(0) > 255) {
      return { 'wch': val.toString().length * 2 + 5 };
    } else {
      return { 'wch': val.toString().length + 5}; }}))/* starts with the first behavior */   
let result = colWidth[0];
  for (let i = 1; i < colWidth.length; i++) {
    for (let j = 0; j < colWidth[i].length; j++) {
      if (result[j]['wch'] < colWidth[i][j]['wch']) {
        result[j]['wch'] = colWidth[i][j]['wch'];
      }
    }
  }
  ws['! cols'] = result;
Copy the code

3. Configure the loading path

Modify the webpack.base.conf.js file in the build folder to configure the path to load

alias: {
      'vue$': 'vue/dist/vue.esm.js'.The '@': resolve('src'),
      'vendor': resolve('src/vendor')}Copy the code

Export2Excel. Js reference dependency

In Export2Excel. Js reference dependencies are as follows:

require('./Blob');
require('script-loader! file-saver');
require('script-loader! xlsx/dist/xlsx.core.min');
Copy the code

Element – the UI

Use the table and button components in element-UI to install dependencies:

npm install -S element-ui
Copy the code

Reference element and its style in main.js:

import Element from 'element-ui'                    // Introduce element UI
import 'element-ui/lib/theme-chalk/index.css'       // Introduce the Element UI style

Vue.use(Element, {
  size: 'mini'                                      // set element-ui default size
})

Copy the code

Vue file use

<template>
  <div class="hello">
    <div>
      <el-button
        type="primary"
        size="mini"
        style="margin:30px auto;"
        @click="handleDownloadData"
      >export</el-button>
      <el-table
        :data="tableData"
        stripe
        style="width: 600px; margin:30px auto;"
      >
        <el-table-column
          prop="date"
          label="Date"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="Name"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="Address"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'excelExport'.data() {
    return {
      msg: 'Welcome to Your Excel Export'.tableData: [{date: '2016-05-02'.name: 'Wang Xiaohu'.address: Lane 1510 jinshajiang Road, Putuo District, Shanghai
        },
        {
          date: '2016-05-04'.name: 'Li Xiaohu'.address: Lane 1511, Jinshajiang Road, Putuo District, Shanghai
        },
        {
          date: '2016-05-01'.name: 'Sun Xiaohu'.address: Lane 1512 jinshajiang Road, Putuo District, Shanghai
        },
        {
          date: '2016-05-02'.name: 'Zhu Xiaohu'.address: Lane 1513, Jinshajiang Road, Putuo District, Shanghai
        },
        {
          date: '2016-05-04'.name: Tiger money.address: Lane 1514, Jinshajiang Road, Putuo District, Shanghai
        },
        {
          date: '2016-05-01'.name: 'Du Xiaohu'.address: Lane 1515, Jinshajiang Road, Putuo District, Shanghai
        },
        {
          date: '2016-05-03'.name: 'Zhao Xiaohu'.address: Lane 1516, Jinshajiang Road, Putuo District, Shanghai}].tableTitleData: [{label: 'date'.prop: 'date'
        },
        {
          label: 'name'.prop: 'name'
        },
        {
          label: 'address'.prop: 'address'}}},methods: {
    // The export method
    handleDownloadData() {
      // Export table header Settings for the table
      let allColumns = this.tableTitleData
      var columnNames = []
      var columnValues = []
      for (var i = 0; i < allColumns.length; i++) {
        columnNames[i] = allColumns[i].label
        columnValues[i] = allColumns[i].prop
      }
      require.ensure([], () = > {
        const { export_json_to_excel } = require('vendor/Export2Excel')
        const tHeader = columnNames
        const filterVal = columnValues

        const list = this.tableData
        const data = this.formatJson(filterVal, list)
        export_json_to_excel(tHeader, data, 'Export Excel list demo')})},formatJson(filterVal, jsonData) {
      return jsonData.map(v= > filterVal.map(j= > v[j]))
    }
  }
}
</script>
Copy the code

Running effect drawing

Export the effect diagram