Case analysis of Excel table export in vue.js


There is a project requirement to export excel tables in the front-end projects. After looking up the code, vue.js can be implemented. The specific implementation steps are as follows:

1. Installation dependency

npm install -S file-saver xlsx
npm install -D script-loader

2. Import two JS

Download blob.js and export2excel.js, create a new EXCEL folder in SRC directory, and put two JS files blob.js and export2excel.js in it

3. Import these two JS files in main.js**

import Blob from './excel/Blob'
import Export2Excel from './excel/Export2Excel.js'

4. Use in components

//Method of export
exportExcel() {
 require.ensure([], () => {
  const { export_json_to_excel } = require('../excel/Export2Excel');
  Const ttheader = ['sequence number', 'nickname', 'name'];
  //Set the title of the first row of Excel table above
  const filterVal = ['index', 'nickName', 'name'];
  //The above index, nickname and name are the properties of the objects in tabledata
  Const list = this.tabledata; // save the tabledata in data to the list
  const data = this.formatJson(filterVal, list);
  Export [JSON] to [excel (tgeader, data, 'list excel');

formatJson(filterVal, jsonData) {
 return => => v[j]))

The header is the header, the data in filterval is the field of the table, the data in the table data is the data in the table, the type is array, the object is stored in the table, and each row of the table is an object.

The values in tabledata are:

data () {
return {
 tableData: [
  {'index': '0', "nickname": "beach stranded our old time", "name": "Xiaoming"},
  {'index': '1', "nickname": "women are born noble", "name": "little red"},
  {'index': '2', "nickname": "the sea is a colorful dust", "name": "Xiaolan"}

The final effect picture is as follows:

If running, an error is reported as follows:

This is because the settings of export2excel.js need to be changed as follows:

Note: change require (‘script loader! Vendor / blob ‘) to require (‘. / blob. JS’)

Practical application cases in the project

Export * /

formatJson(filterVal, jsonData) {
   // console.log(filterVal,jsonData)
    return => => {
       If (J = ='xxdz ') {//.. detailed address
        return v.name1 + v.name2 + v.name3 + v.gridName + v.xxdz
      If (J = ='qyzw ') {//.. area dimension
        return v.name2 + '/' + v.yxCname
      If (J = ='state ') {//.. work order status
        return this.config.gzdStateList[v.state]
      return v[j]
  ygExcel() {
    let params = {}
    let queryForm = this.deepClone(this.queryForm)
    params.currentPage =1
    params.pageSize = this.count
    params.queryForm = queryForm
    params.prop = this.prop
    params.order = this.order
    // params.ifExport = true
    this.$post( "/api/UserController/getList",params, (data) => {
      let tableData =data.list;
      // let tableData = data.list;
      require.ensure([], () => {
        const { export_json_to_excel } = require('../vendor/Export2Excel');
        Const ttheader = this.config.ygbheader; // define the header in config
        Const filterval = this.config.ygfilterval; // define the fields corresponding to the header in config
        const data = this.formatJson(filterVal, tableData);
        Export ﹣ JSON ﹣ to ﹣ excel (header, data, 'employee details table'); download is the name of the displayed table


The above is the case analysis of Excel table exported from vue.js introduced by Xiaobian to you, hoping to help you. If you have any questions, please leave a message to me, and Xiaobian will reply to you in time. Thank you very much for your support of the developepaer website!
If you think this article is helpful to you, welcome to reprint, please indicate the source, thank you!

Recommended Today

Socket communication between Java and python

Code service code, call the corresponding service according to the code Status code, return the status code according to the execution result Using JSON string communication between sockets Java socket client and python socket server Java socket client package com.brewin.hammer.system.util.socket; import; import; import; import; import java.util.HashMap; import java.util.Map; import; /** […]