vue table复杂表格导出excel（支持多表头、合并单元格、边框、居中、背景等自定义样式）

最新推荐文章于 2025-03-20 09:36:50 发布
最新推荐文章于 2025-03-20 09:36:50 发布
阅读量8.1k 收藏 46
点赞数 9
分类专栏： vue 前端 excel 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Seven71111/article/details/120749751
版权

目录

需要导出的table表格样式

安装

vue代码及JS实现片段

栗子

需要导出的table表格样式

常规

 导出的excel效果图

复杂(多表头、合并单元格等等)

 导出的excel效果图

安装

npm install file-saver --save
 
npm install xlsx --save
 
npm install xlsx-style --save

引入

import XLSX from "xlsx";
import XLSXStyle from "xlsx-style";
import FileSaver from "file-saver";

遇到的问题

vue 2.0版本xlsx-style ./cptable' 报错:Can't resolve './cptable' in 'xxxx\nautical-front\node_modules_xlsx

解决方案

在 webpack.base.conf.js 文件下,添加cptable变量

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  externals: {
    'vue': 'Vue',
    'vuex': 'Vuex',
    'vue-resource': 'VueResource',
    'element-ui': 'ELEMENT',
    'echarts': 'echarts',
    'vue-router': 'VueRouter',
    'axios': 'axios',
    'vue-i18n': 'VueI18n',
    './cptable':'var cptable'
  },
.....
.....
.....

解释一点，XLSX能自动解析table的数据结构

我用的是element-ui的table,最终渲染后,其实也就是普通的自己手打的<table>

vue代码及JS实现片段

excel导出的JS工具类封装,创建exportTableUtil.js

export default {
  /**
   *
   * @param elt
   * @param sheetName
   * @param fileName 导出的文件名
   * @param titleNum  标题行数
   */
  exportTable(elt,sheetName,fileName,titleNum){
    let wb = XLSX.utils.table_to_book(elt, { sheet: sheetName, raw: true });
    let range = XLSX.utils.decode_range(wb.Sheets[sheetName]['!ref']);
    //单元格边框样式
    let borderStyle = {
      top: {
        style: "thin",
        color: { rgb: "000000" }
      },
      bottom: {
        style: "thin",
        color: { rgb: "000000" }
      },
      left: {
        style: "thin",
        color: { rgb: "000000" }
      },
      right: {
        style: "thin",
        color: { rgb: "000000" }
      }
    };
    let cWidth = [];
    for (let C = range.s.c; C < range.e.c; ++C) {   //SHEET列
      let len = 100; //默认列宽
      let len_max = 400; //最大列宽
      for (let R = range.s.r; R <= range.e.r; ++R) {  //SHEET行
        let cell = { c: C, r: R };                    //二维 列行确定一个单元格
        let cell_ref = XLSX.utils.encode_cell(cell);  //单元格 A1、A2
        if(wb.Sheets[sheetName][cell_ref]){
          // if (R == 0){
          if (R < titleNum){
            wb.Sheets[sheetName][cell_ref].s = {  //设置第一行单元格的样式 style
              font:{
                sz:15,
                color:{rgb:'060B0E'},
                bold:true
              },
              alignment:{
                horizontal:'center',
                vertical:'center',
              },
              fill:{
                fgColor:{rgb:'E4E4E4'},
              },
              border: borderStyle,//用上面定义好的边框样式
            };
          }else {
            wb.Sheets[sheetName][cell_ref].s = {
              alignment:{
                horizontal:'left',
                vertical:'center',
              },
              border: borderStyle,//用上面定义好的边框样式
            };
          }
          //动态自适应：计算列宽
          let va = JSON.parse(JSON.stringify(wb.Sheets[sheetName][cell_ref].v));
          var card1 = JSON.parse(JSON.stringify(va)).match(/[\u4e00-\u9fa5]/g); //匹配中文
          var card11 = "";
          if (card1){
            card11 = card1.join("")
          }
          var card2 = JSON.parse(JSON.stringify(va)).replace(/([^\u0000-\u00FF])/g,"");  //剔除中文
          let st = 0;
          if (card11){
            // st += card11.length * 16  //中文字节码长度
            st += card11.length * 20  //中文字节码长度
          }
          if (card2){
            // st += card2.length * 8  //非中文字节码长度
            st += card2.length * 10  //非中文字节码长度
          }
          if (st > len){
            len = st;
          }
        }
      }
      if (len > len_max){//最大宽度
        len = len_max;
      }
      cWidth.push({'wpx':len});     //列宽
    }
    wb.Sheets[sheetName]['!cols'] = cWidth;
    var wopts = { bookType: 'xlsx', bookSST: false, type: 'binary' };
    var wbout = XLSXStyle.write(wb, wopts); //一定要用XLSXStyle不要用XLSX，XLSX是没有格式的！
    FileSaver(new Blob([this.s2ab(wbout)], { type: "" }), fileName + '.xlsx');
  },
  s2ab(s) {
    var buf = new ArrayBuffer(s.length);
    var view = new Uint8Array(buf);
    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
    return buf;
  },
}

import XLSX from "xlsx";
import XLSXStyle from "xlsx-style";
import FileSaver from "file-saver";

栗子

1、正常定义一个el-table,重点是需要在外面嵌套一个div，声明一个id，后面需要用到，即：

<div id="exportData" .....>
      <div id="exportData"  class="css_page_body" ref="css_page_body">
        <el-table border
                  v-loading="loading"
                  :data="tableData"
                  :row-key="getRowKeys"
                  ref="headTableRef"
                  :height="getPageBodyHeight">
          <el-table-column prop="cla" :label="$t('登记人')" show-overflow-tooltip></el-table-column>
          <el-table-column prop="clb" :label="$t('登记时间')" show-overflow-tooltip></el-table-column>
          <el-table-column prop="clc" :label="$t('炉位号')" show-overflow-tooltip></el-table-column>
          <el-table-column prop="cld" :label="$t('异常类型')" show-overflow-tooltip></el-table-column>
          <el-table-column prop="cle" :label="$t('物料品种')" show-overflow-tooltip></el-table-column>
          <el-table-column prop="clf" :label="$t('等级')" show-overflow-tooltip></el-table-column>
          <el-table-column prop="clf1" :label="$t('异常数量')" show-overflow-tooltip></el-table-column>
          <el-table-column prop="clf2" :label="$t('异常放入料车')" show-overflow-tooltip></el-table-column>

        </el-table>

      </div>

2、定义触发导出功能的按钮

<el-form-item style="float: right">
       <el-button type="success"  icon="el-icon-download" @click="exportData" :disabled="tableData.length <= 0">{{$t('数据导出')}}</el-button>
</el-form-item>

3、记得引入封装的导出工具类

    import exportTableUtil from '@/utils/exportTableUtil.js'

4、导出功能按钮的方法

只有一行表头的调用

     exportData(){
                let elt = document.getElementById("exportData");
                exportTableUtil.exportTable(elt,"找头区物料异常表","找头区物料异常表导出",1);
            },

存在两（多）行表头的调用

   exportData(){
                let elt = document.getElementById("exportData");
                exportTableUtil.exportTable(elt,"加捻区物料异常表","加捻区物料异常表导出",2);
            },

附：栗子的页面完整代码(页面加入了页面自适应和监听的逻辑)

页面自适应和监听的逻辑参考链接

<template>
  <div class="ProcessingInfo" ref="css_page">
    <div class="css_page_adapter">
      <div class="css_page_head" ref="css_page_head">
        <div class="css_page_condition" ref="page_area_condition">
          <el-form inline>
            <el-form-item prop="time">
              <el-date-picker
                style="width: 180px;"
                :picker-options="pickerStartOptions"
                format="yyyy-MM-dd"
                v-model.trim="condition.startTime"
                type="date"
                :placeholder="$t('common.startTime')">
              </el-date-picker>
              {{" - "}}
              <el-date-picker
                style="width: 180px;"
                :picker-options="pickerEndOptions"
                format="yyyy-MM-dd"
                v-model.trim="condition.endTime"
                type="date"
                :placeholder="$t('common.endTime')">
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="search" icon="el-icon-search">{{$t('common.query')}}</el-button>
            </el-form-item>
            <el-form-item>
              <el-button @click="clearAll">{{ $t('common.clearAll') }}</el-button>
            </el-form-item>

            <el-form-item style="float: right">
              <el-button type="success"  icon="el-icon-download" @click="exportData" :disabled="tableData.length <= 0">{{$t('common.dataExport')}}</el-button>
            </el-form-item>
          </el-form>

        </div>
      </div>

      <div id="exportData"  class="css_page_body" ref="css_page_body">
        <el-table border
                  v-loading="loading"
                  :data="tableData"
                  :row-key="getRowKeys"
                  ref="headTableRef"
                  @selection-change=""
                  :height="getPageBodyHeight">

          <el-table-column prop="process" :label="$t('加捻区异常物料等级信息')" show-overflow-tooltip >
            <el-table-column prop="operator" :label="$t('登记人')" show-overflow-tooltip ></el-table-column>
            <el-table-column prop="operateTime" :label="$t('登记时间')" show-overflow-tooltip width="140"></el-table-column>
            <el-table-column prop="type" :label="$t('异常类型')" show-overflow-tooltip ></el-table-column>
            <el-table-column prop="materialDTO.materialName" :label="$t('物料品种')" show-overflow-tooltip ></el-table-column>
            <el-table-column prop="materialDTO.specName" :label="$t('等级')" show-overflow-tooltip ></el-table-column>
            <el-table-column prop="quantity" :label="$t('数量')" show-overflow-tooltip ></el-table-column>
            <el-table-column prop="containerCode" :label="$t('异常放入料车')" show-overflow-tooltip ></el-table-column>
          </el-table-column>

          <el-table-column prop="head" :label="$t('找头区入库信息')" show-overflow-tooltip>
            <el-table-column prop="containerCode" :label="$t('异常发现料车')" show-overflow-tooltip ></el-table-column>
            <el-table-column prop="headEnterTime" :label="$t('入库时间')" show-overflow-tooltip width="140"></el-table-column>
            <el-table-column prop="headOutTime" :label="$t('出库时间')" show-overflow-tooltip width="140"></el-table-column>
            <el-table-column prop="headEnterOperatorName" :label="$t('操作人')" show-overflow-tooltip ></el-table-column>
          </el-table-column>

        </el-table>

      </div>

    </div>

  </div>
</template>

<script>
  /*  import XLSX from "xlsx";
    import XLSXStyle from "xlsx-style";
    import FileSaver from "file-saver";*/
  import exportTableUtil from '@/utils/exportTableUtil.js'


  export default {
        name: "ProcessingInfo",
        props: ["selectedTime"],
        data() {
            return {
                loading: false,
                tableData: [],
                condition: {
                    startTime:null,
                    endTime:null,
                    typeNameKeyWord: '',
                },
                queryCondition: {},
                pagination: {
                    page: 1,
                    pageSize: 20,
                    total: 0,
                },
                totalPage: 5,
                countTotal: 20,
                selectedIds:[],
                checked:false,
                otherHeight:0,
                pageHeight:0,
                pickerStartOptions: {
                    disabledDate: (time) => {
                        if (this.condition.endTime !== "" && this.condition.endTime) {
                            return time.getTime() > this.condition.endTime || time.getTime() > Date.now();
                        } else {
                            return time.getTime() > Date.now();
                        }
                    },
                },
                pickerEndOptions: {
                    disabledDate: (time) => {
                        if (this.condition.startTime !== "" && this.condition.startTime) {
                            return time.getTime() < this.condition.startTime ||  time.getTime() > Date.now();
                        } else {
                            return time.getTime() > Date.now();
                        }
                    },
                },
            }
        },
        created() {

            this.tableData = []
            for (let i = 1; i <=this.countTotal ; i++) {
                this.tableData.push({"operateTime": this.$moment().format("YYYY-MM-DD HH:mm:ss"),"operator": "operator-"+i,"quantity": i,
                    "containerCode": "code-"+i,"headEnterTime": this.$moment().format("YYYY-MM-DD HH:mm:ss"),
                    "headOutTime": this.$moment().format("YYYY-MM-DD HH:mm:ss")})
            }
        },
        watch:{
            '$route'(val, oldVal) {
                if (val.path === '/material_abnormal') {
                    this.search();
                }
            },
        },
        mounted() {
            //同步找头区查询条件的时间参数
            this.$set(this.condition,'startTime',this.selectedTime.startTime)
            this.$set(this.condition,'endTime',this.selectedTime.endTime)
            this.search();

            this.watchSize();
            this.lazyLoading();
        },
        activated() {

        },
        destroyed(){
            this.setCondition()
        },
        computed: {
            getPageBodyHeight() {
                // console.log('计算结果:',this.pageHeight - this.otherHeight);
                return this.pageHeight - this.otherHeight;
            },

        },
        methods: {
            search() {
                Object.assign(this.queryCondition, this.condition);
                if (this.queryCondition.startTime != null){
                    this.queryCondition.startTime = this.$moment(this.queryCondition.startTime).format("YYYY-MM-DDTHH:mm:ss")
                }
                if (this.queryCondition.endTime != null) {
                    this.queryCondition.endTime = this.$moment(this.queryCondition.endTime).add(1, 'days').format("YYYY-MM-DDTHH:mm:ss")
                }
                this.listPageData(1);
            },
            listPageData(page) {
                const paginationData = {
                    page: page,
                    pageSize: this.pagination.pageSize,
                };
                // Object.assign(paginationData, this.queryCondition);
                paginationData.condition = this.queryCondition;
                console.log("paginationData",paginationData)
                return;
                this.loading=true;
                /*  this.$baseRequest.containerTypeApi.queryPageByCondition(paginationData).then(res =>{
                      this.loading=false;
                      this.tableData = res.data.data.list;
                      this.pagination.total = res.data.data.total;
                  })*/

            },
            defaultDataTime(){
                this.condition = {
                    startTime: this.$moment().subtract(1,'months').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
                    endTime:  this.$moment().startOf('day').format("YYYY-MM-DD HH:mm:ss"),
                }
                //this.$moment().add(1, 'days').format("YYYY-MM-DDTHH:mm:ss"),
            },

            tableDateFormat(row, column) {
                return this.$moment(row.createTime).format("YYYY-MM-DD HH:mm:ss");
            },
            getRowKeys(row) {
                return row.id;
            },
            handleSelectionChange(rowList){
                let ids = [];
                rowList.forEach(function (row) {
                    ids.push(row.id)
                });
                this.selectedIds = ids;
                if (this.tableData().length === rowList.length){
                    this.checked = true
                }else {
                    this.checked = false
                }
            },
            //全选
            selectAllBottom() {
                if (this.checked){
                    this.$refs['headTableRef'].toggleAllSelection();
                }else {
                    this.$refs['headTableRef'].clearSelection();
                }
            },
            clearAll(){
                this.condition.typeNameKeyWord = ''
                this.condition.startTime = null
                this.condition.endTime = null
            },
            setCondition(){
                this.$emit('setTime',this.condition.startTime,this.condition.endTime);
            },
            lazyLoading(){
                let dom = document.querySelector(".el-table__body-wrapper");
                dom.addEventListener("scroll", (v) => {
                    const scrollDistance = dom.scrollHeight - dom.scrollTop - dom.clientHeight;
                    // console.log("鼠标滑动-scrollDistance",scrollDistance)
                    // if (scrollDistance <= 0) {  //分辨率问题，如果设置 100% ，滑倒最底部，scrollDistance的值 可能为 0.201 到 -0.201
                    if (scrollDistance <= 1) {
                        //等于0证明已经到底，可以请求接口
                        if (this.pagination.page >= this.totalPage) {
                            //判断是否到达底部
                            // this.$message.warning("我~是有底线的 (～￣▽￣)～");
                            console.log("我~是有底线的 (～￣▽￣)～")
                        }
                        if (this.pagination.page < this.totalPage) {
                            //当前页数小于总页数就请求
                            this.pagination.page ++; //当前页数自增
                            console.log("页面已经到达底部,可以请求接口,请求第 "+ this.pagination.page + " 页数据");

                            var cIndex = this.countTotal + 10 ;
                            for (let i = (this.countTotal + 1) ; i <= cIndex ; i++) {
                                this.tableData.push({"operateTime": this.$moment().format("YYYY-MM-DD HH:mm:ss"),"operator": "operator-"+i,"quantity": i,
                                    "containerCode": "code-"+i,"headEnterTime": this.$moment().format("YYYY-MM-DD HH:mm:ss"),
                                    "headOutTime": this.$moment().format("YYYY-MM-DD HH:mm:ss")})
                            }
                            this.countTotal += 10 ;
                            //this.getData();
                            // this.append();
                        }
                    }
                });
            },
            exportData(){
                let elt = document.getElementById("exportData");
                exportTableUtil.exportTable(elt,"加捻区物料异常表","加捻区物料异常表导出",2);
            },


            //页面适配
            watchSize() {
                const _this = this;
                // 监听页面宽/高变化
                _this.$watchSize().listenTo(this.$refs.css_page, (element) => {
                    _this.adapterPageHeight(_this)
                });
                // 监听头部(条件)宽/高变化
                _this.$watchSize().listenTo(this.$refs.css_page_head, (element) => {
                    _this.adapterPageHeight(_this)
                });
            },
            adapterPageHeight(_this){
                _this.$nextTick(() => { // 这里填写监听改变后的操作
                    this.pageHeight = this.$refs.css_page.offsetHeight;
                    var css_page_head = this.$refs.css_page_head.offsetHeight;
                    this.otherHeight = css_page_head + 100;
                    // console.log('调整后:',this.otherHeight)
                });
            },
        }
    }
</script>

<style lang="scss">
  .ProcessingInfo {
    overflow-y: hidden;
    width: 100%;
    height: 100%;

    .css_page_adapter{
      width: 100%;
      /*min-width: 1000px;*/

      .css_page_head{
        margin-top: 5px;
        .css_title{
          padding-bottom: 10px;
          border-bottom: #e9e9e9 1px solid;
          .css_title_text {
            margin-left: 1%;
            font-size: 20px;
            padding: 5px 10px;
            border: 4px none #0097FE;
            border-left-style: solid;
            color: #A9A9A9;
          }
        }

        .css_page_condition{
          margin-top: -5px;

          .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
            margin-bottom: 12px;
          }
        }
      }
      .css_page_body{

      }
      .css_page_bottom {
        height: 35px;
        background-color: #e7e5e5;
        border: 1px solid #dcd5d5;
      }
    }
  }
</style>

参考链接

Vue - 详细实现将复杂 table 表格导出到 Excel(xls) 文件，支持原生表格、ElementUI 复杂表格、Ant Design Vue 复杂表格（将前端表格“所见所得“导出）
王佳斌
02-21 3315
vue2，excel，xls，电子表格，antdesignvue，elementUI，table表格导出，将网页上的表格原封不动的导出成excel，vue2如何将组件库的表格导出excel，vue将页面上的表格导出，实现导出表格并合并单元格，vue+element表格导出为Excel文件，无法导出很复杂表格怎么办，vue2导出复杂表格，表格很复杂用什么办法能导出为xls文件，纯前端导出，所见所得导出表格，vue2表格很多合并行和列怎么导出成excel，复杂表格多行多列合并的导出，Vue导出复杂excel
使用xlsx、xlsx-style导出表格添加背景色；合并单元格部分样式缺失问题解决
m0_51431448的博客
01-30 2497
我这个是直接通过传入dom生产的sheet页，也可以通过数据生成sheet页，xlsx都有对应的方法，其实不影响我们修改样式。主要关注addRangeBorder(给合并行列赋值样式)、setExcelStyle(设置导出Excel样式)这两个方法。由于上次写的修改样式只关注了单元格的宽度，并没有设置颜色以及没关注到合并的单元格部分样式没设置上等问题，所以这篇来说下。我们通过xlsx可以通过dom元素、或者数据来生产sheet页，然后我们修改样式就操作对应的sheet页就可以了。
VUE Table复杂表格生成带格式的excel（多表头、合并单元格、边框、居中、背景）
rxy1176073894的博客
04-28 4431
VUE Table复杂表格生成带格式的excel（多表头、合并单元格、边框、居中、背景） 因为工作需要，在网上找了很多都不太行无意之间看到一个大佬的打码拿过来改了改居然可以用！ 原文链接：https://blog.cqhpoldi.com/?p=650 首先看一下我的表格是啥样子（普通表格也可以用） 我在网上找了很多方法要么是错位，要么是没边框、没格式，无意之间看到一个大佬写的代码试了一下大致上可以然后自己改改居然成了。 1.下载 npm install file-saver --save
Vue表格导出Excel数据（支持多级表头）
章小鱼的博客
08-03 1858
Vue表格导出Excel数据,同时解决导出数据重复问题
vue2导出el-table中的数据为excel
最新发布
paradoxaaa_的博客
03-20 121
在项目根目录下建一个export.js文件。在需要引入的页面引入。
vue导出excel(多个sheet表)
张一西的博客
08-17 6783
目录 （一）直接调用 （二）、封装导出函数调用 最近做项目中有一个导出excel表格的需求 具体思路是：后端返回给我json数据，前端根据数据和具体的几项字段去导出excel表格，还有导出多个sheet，多页表格到一个excel表里面，具体思路 根据Export2Excel插件，并修改插件Export2Excel完成导出多页(多个sheet)的excel 第一步：安装插件 依赖 npm install file-saver --save npm install xlsx --save npm install
前端vue+elementui导出复杂（单元格合并，多级表头）表格el-table转为excel导出
MadSnail00的博客
07-21 4273
el-table导出excel 前端导出excel文件 xlsx导出数据重复
vue导出复杂excel表格
weixin_45779789的博客
08-28 930
vue导出复杂excel表格
前端复杂表格导出excel，一键导出 Antd Table 看这篇就够了（附源码）
solocoder的博客
03-29 7812
前端导出 excel 的需求很多，但市面上好用的库并不多，讲明白复杂使用场景的文章更少。 本文将以文字 + demo 源码的形式，力求讲清楚满足 99% 使用场景的终极 excel 导出方案。 如果项目中用到了 AntD，那就更简单了，因为 Table 本身已经设置好了 column 和 dataSource，只需解析 column 和 dataSource 即可快速导出 Excel。 实现功能： 简单表格导出 为表格添加样式（更改背景色、更换字体、字号、颜色） 设置行高、列宽 解析 ant-design
使用xlsx.full.min.js导出有复杂表头的excel（亲测有效）
07-28
> 今天项目用到了导出table表格，但表头有点特殊，多个合并的单元格。 > 搜索了半天，发现有博主使用 ``xlsx.full.min.js`` 做过此类功能，使用的是vue+elementUI，特在该基础上改进和封装了一下，兼容普通HTML的js...
el-table 多级表头导出（适用于表头固定，表格有固定列）
weixin_42987973的博客
08-22 1246
el-table 多级表头固定，内容固定，导出excel模板设置内容居中，列宽
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
10-16
主要介绍了Vue+elementui 实现复杂表头和动态增加列的二维表格功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
VUE实现复杂表头导出Excle的实现,(已测试成功)
Zy134748的博客
02-02 713
VUE实现复杂表头导出Excle的实现,(已测试成功) 我的项目前端是vuex加element实现的，里面有导出的示例, 不过只有一级和二级，可拓展三四级表头具体看自己业务需求 如下示例，先布局好，此处参照项目的示例即可， 以下具体实现步骤: ( 1 ) 首先需要安装三个依赖：npm install -S file-saver xlsx (两个依赖)和 npm install -D script-loader(一个依赖) ( 2 ) 在src目录下新建一个文件夹，名字随意，我这里用vendor，然后
vue 实现Excel导出文件，设置单元格样式，居中，靠右，边框等，并设置数据类型货币类型， 使用xlsx，xlsx-style插件实现
m0_55074611的博客
11-22 4476
vue 实现Excel导出文件，设置单元格样式，居中，靠右，边框等，并设置数据类型货币类型， 使用xlsx，xlsx-style插件实现，根据 自己业务更改表格样式及导出数据类型。
Vue导出复杂excel表格（适用于ElementUI、Iview）
memory_zzz的博客
08-26 2444
示图： 1.安装依赖 npm install --save xlsx file-saver 2.引入依赖到当前文件中 import FileSaver from "file-saver"; import XLSX from "xlsx"; 3.导出事件代码 exportExcel(excelName) { try { const $e = this.$refs['tabel'].$el let $table = $e.querySe.
【vue导入导出Excel】vue简单实现导出和导入复杂表头excel表格功能【纯前端版本和配合后端版本】
聆听
06-19 9843
【vue导入导出Excel】vue简单实现导出和导入复杂表头excel表格功能【纯前端版本和配合后端版本】
Vue实现el-table导出excel功能项目实战
weixin_39958441的博客
09-06 680
实现从el-table中自动获取表头和prop，再将列表数据拼在一起形成excel，保存到本地。下载不到excel.zip的可以私信我发你。第三步：实际业务中使用。
table多级表头表格原样式导出excel
weixin_45907435的博客
03-12 818
html代码
vue 写导出Excel文件（复杂表格多行多列合并的）
m0_56787143的博客
05-31 2467
前些天产品提了个需求 要导出当前页面的数据，对于第一次写导出文件的我无从下手（之前都是后端写好丢给前端的），去网上搜了很多也没找到自己想要的效果。于是我科学上网了一波 找到了一个名为 xlsx-js-style 的包，然后根据这个包，完成了这个棘手的需求（我是前端小白），废话不多说，来上代码。这是完整代码，我用的是vue3哈 没用ts 代码很庸愚，你们可以到时候根据数据来进行push操作。
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值