Front-end Vue implements table data export to Excel

Table of contents

1. Dependency installation

2. Effect display

2.1. Simple array

2.2. Multi-layer array

3. Code implementation

4. Front-end paging

Foreword:

  Generally, tabular data is exported to excel, and the back-end can realize this, because when exporting, all data generally needs to be exported, while the front-end generally only gets the data of the current page. If you are interested, you can learn about the function of the front-end exporting excel.

  Reference article: How to export data to excel in vue project_vue exports arrays to excel_cx&lavender's blog-CSDN blog

1. Dependency installation

npm install js-export-excel or yarn add js-export-excel

2. Effect display

2.1. Simple array

2.2. Multi-layer array

3. Code implementation

<template>
  <div class="box">
    <el-button @click="exportExcel1">导出1</el-button>
    <el-button @click="exportExcel2">导出2</el-button>
  </div>
</template>
 
<script>
import ExportJsonExcel from "js-export-excel";
export default {
  data() {
    return {
      dataTable: [],
      option: {},
      list: {
        getList: [
          {
            id: "1",
            province: "江西",
            city: "赣州",
          },
          {
            id: "2",
            province: "广东",
            city: "深圳",
          },
          {
            id: "3",
            province: "湖南",
            city: "长沙",
          },
          {
            id: "4",
            province: "浙江",
            city: "杭州",
          },
          {
            id: "5",
            province: "河南",
            city: "洛阳",
          },
          {
            id: "6",
            province: "山东",
            city: "青岛",
          },
          {
            id: "7",
            province: "安徽",
            city: "烟台",
          },
        ],
      },
      tableData: [
        {
          name: "地球",
          list: [
            { name: "2011", value: "0" },
            { name: "2012", value: "0" },
            { name: "2013", value: "0" },
            { name: "2014", value: "0" },
          ],
        },
        {
          name: "月球",
          list: [
            { name: "2011", value: "1" },
            { name: "2012", value: "1" },
            { name: "2013", value: "1" },
            { name: "2014", value: "1" },
          ],
        },
        {
          name: "太阳",
          list: [
            { name: "2011", value: "2" },
            { name: "2012", value: "2" },
            { name: "2013", value: "2" },
            { name: "2014", value: "2" },
          ],
        },
      ],
    };
  },
  methods: {
    Ture() {
      //   创建ExportJsonExcel实例对象
      let toExcel = new ExportJsonExcel(this.option);
      //   调用保存方法
      toExcel.saveExcel();
    },
    exportExcel1() {
      const dataList = this.list.getList;
      let dataTable = []; //   dataTable代表excel文件中的数据内容
      if (dataList) {
        for (let i in dataList) {
          let obj = {
            序号: dataList[i].id,
            省份: dataList[i].province,
            城市: dataList[i].city,
          };

          dataTable.push(obj); //   设置excel每列获取的数据源
        }
      }

      this.option.fileName = "省份城市表"; //excel文件名
      //excel文件数据
      this.option.datas = [
        {
          //   excel文件的数据源
          sheetData: dataTable,
          //   excel文件sheet的表名
          sheetName: "sheet",
          //   excel文件表头名
          sheetHeader: ["序号", "省份", "城市"],
          //   excel文件列名
          sheetFilter: ["序号", "省份", "城市"],
          columnWidths:['10','10','20']//excel列宽度设置
        },
      ];
      this.Ture();
    },
    exportExcel2() {
      const dataList = this.tableData;
      let dataTable = []; //   dataTable代表excel文件中的数据内容
      let arr = [];
      if (dataList) {
        let obj;
        for (let i in dataList) {
          for (let y = 0; y < dataList[i].list.length; y++) {
            obj = Object.assign(
              { 姓名: dataList[i].name },
              ...dataList[i].list.map((value) => ({
                [value.name]: value.value,
              }))
            );
          }

          dataTable.push(obj); //   设置excel每列获取的数据源
        }
        for (let i in dataTable[0]) {
          arr.push(i);
        }
      }

      this.option.fileName = "个人信息表"; //excel文件名
      //excel文件数据
      this.option.datas = [
        {
          //   excel文件的数据源
          sheetData: dataTable,
          //   excel文件sheet的表名
          sheetName: "sheet",
          //   excel文件表头名
          sheetHeader: arr,
          //   excel文件列名
          sheetFilter: arr,
        },
      ];
      this.Ture();
    },
  },
};
</script>
 
<style>
</style>

4. Front-end paging

Expand the front-end component to quickly paginate, and you can understand it.

First get all the data (drawerData), first display (drawerList) the first page, and intercept it

Table display: data="drawerList"

        this.drawerData = res.result.records;

        this.drawerList = this.drawerData.slice(0, 10);

//========================视图============
 <el-pagination
      @size-change="handleSizeChange2"
      @current-change="handleCurrentChange2"
      :current-page="pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
       layout="total, sizes, prev, pager, next, jumper"
       :total="drawerData.length">
</el-pagination>
//========================方法==============   
 handleCurrentChange2(pageIndex) {
      var _this = this;
      if (_this.drawerData) {
        if (pageIndex) {
          _this.pageNum = pageIndex;
        }
        _this.drawerList = _this.drawerData.slice(
          (_this.pageNum - 1) * _this.pageSize,
          _this.pageNum * _this.pageSize
        );
      }
    },
handleSizeChange2(val) {
      this.pageSize = val;
    },

Remarks: pageNum: 1, // Current page number pageSize: 10, // Number of items per page total: 6, // Total number