前端导出多级表头

最新推荐文章于 2024-08-18 16:07:53 发布
最新推荐文章于 2024-08-18 16:07:53 发布
阅读量1.5k 收藏 10
点赞数 2
分类专栏： 前端导出excel 文章标签： excel vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49813550/article/details/115628691
版权

前端导出多级表头

今天在技术交流群里面看到有人问到了这一块，我之前看过一些关于这样的代码，我就直接给他上了代码，自己又重新练习里一遍

这是结合elementUI来写的一个表格。

先看一下练习的是这样的效果
在这里插入图片描述

首先还是要安装依赖

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

直接上代码
1、需要一个Export2Excel.js文件

/* eslint-disable */
import { saveAs } from 'file-saver'
import XLSX from 'xlsx'

function generateArray(table) {
  var out = [];
  var rows = table.querySelectorAll('tr');
  var ranges = [];
  for (var R = 0; R < rows.length; ++R) {
    var outRow = [];
    var row = rows[R];
    var columns = row.querySelectorAll('td');
    for (var C = 0; C < columns.length; ++C) {
      var cell = columns[C];
      var colspan = cell.getAttribute('colspan');
      var rowspan = cell.getAttribute('rowspan');
      var cellValue = cell.innerText;
      if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;

      //Skip ranges
      ranges.forEach(function (range) {
        if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
          for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
        }
      });

      //Handle Row Span
      if (rowspan || colspan) {
        rowspan = rowspan || 1;
        colspan = colspan || 1;
        ranges.push({
          s: {
            r: R,
            c: outRow.length
          },
          e: {
            r: R + rowspan - 1,
            c: outRow.length + colspan - 1
          }
        });
      };

      //Handle Value
      outRow.push(cellValue !== "" ? cellValue : null);

      //Handle Colspan
      if (colspan)
        for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
    }
    out.push(outRow);
  }
  return [out, ranges];
};

function datenum(v, date1904) {
  if (date1904) v += 1462;
  var epoch = Date.parse(v);
  return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
}

function sheet_from_array_of_arrays(data, opts) {
  var ws = {};
  var range = {
    s: {
      c: 10000000,
      r: 10000000
    },
    e: {
      c: 0,
      r: 0
    }
  };
  for (var R = 0; R != data.length; ++R) {
    for (var C = 0; C != data[R].length; ++C) {
      if (range.s.r > R) range.s.r = R;
      if (range.s.c > C) range.s.c = C;
      if (range.e.r < R) range.e.r = R;
      if (range.e.c < C) range.e.c = C;
      var cell = {
        v: data[R][C]
      };
      if (cell.v == null) continue;
      var cell_ref = XLSX.utils.encode_cell({
        c: C,
        r: R
      });

      if (typeof cell.v === 'number') cell.t = 'n';
      else if (typeof cell.v === 'boolean') cell.t = 'b';
      else if (cell.v instanceof Date) {
        cell.t = 'n';
        cell.z = XLSX.SSF._table[14];
        cell.v = datenum(cell.v);
      } else cell.t = 's';

      ws[cell_ref] = cell;
    }
  }
  if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
  return ws;
}

function Workbook() {
  if (!(this instanceof Workbook)) return new Workbook();
  this.SheetNames = [];
  this.Sheets = {};
}

function 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;
}

export function export_table_to_excel(id) {
  var theTable = document.getElementById(id);
  var oo = generateArray(theTable);
  var ranges = oo[1];

  /* original data */
  var data = oo[0];
  var ws_name = "SheetJS";

  var wb = new Workbook(),
    ws = sheet_from_array_of_arrays(data);

  /* add ranges to worksheet */
  // ws['!cols'] = ['apple', 'banan'];
  ws['!merges'] = ranges;

  /* add worksheet to workbook */
  wb.SheetNames.push(ws_name);
  wb.Sheets[ws_name] = ws;

  var wbout = XLSX.write(wb, {
    bookType: 'xlsx',
    bookSST: false,
    type: 'binary'
  });

  saveAs(new Blob([s2ab(wbout)], {
    type: "application/octet-stream"
  }), "test.xlsx")
}

export function export_json_to_excel({
  multiHeader = [],
  header,
  data,
  filename,
  merges = [],
  autoWidth = true,
  bookType = 'xlsx'
} = {}) {
  /* original data */
  filename = filename || 'excel-list'
  data = [...data]
  data.unshift(header);

  for (let i = multiHeader.length - 1; i > -1; i--) {
    data.unshift(multiHeader[i])
  }

  var ws_name = "SheetJS";
  var wb = new Workbook(),
    ws = sheet_from_array_of_arrays(data);

  if (merges.length > 0) {
    if (!ws['!merges']) ws['!merges'] = [];
    merges.forEach(item => {
      ws['!merges'].push(XLSX.utils.decode_range(item))
    })
  }

  if (autoWidth) {
    /*设置worksheet每列的最大宽度*/
    const colWidth = data.map(row => row.map(val => {
      /*先判断是否为null/undefined*/
      if (val == null) {
        return {
          'wch': 10
        };
      }
      /*再判断是否为中文*/
      else if (val.toString().charCodeAt(0) > 255) {
        return {
          'wch': val.toString().length * 2
        };
      } else {
        return {
          'wch': val.toString().length
        };
      }
    }))
    /*以第一行为初始值*/
    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;
  }

  /* add worksheet to workbook */
  wb.SheetNames.push(ws_name);
  wb.Sheets[ws_name] = ws;

  var wbout = XLSX.write(wb, {
    bookType: bookType,
    bookSST: false,
    type: 'binary'
  });
  saveAs(new Blob([s2ab(wbout)], {
    type: "application/octet-stream"
  }), `${filename}.${bookType}`);
}

2、下面就是HTML和JS部分

<template>
  <div>
    <el-button type="primary" @click.native="outExcel">导出</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="150"> </el-table-column>
      <el-table-column label="配送信息">
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column label="地址">
          <el-table-column prop="province" label="省份" width="120">
          </el-table-column>
          <el-table-column prop="city" label="市区" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址" width="300">
          </el-table-column>
          <el-table-column prop="zip" label="邮编" width="120">
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区",
          zip: 200333,
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区",
          zip: 200333,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区",
          zip: 200333,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区",
          zip: 200333,
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区",
          zip: 200333,
        },
      ],
    };
  },
  methods: {
    outExcel() {
        //../untils/Export2Excel 这个是根据你自己存放Export2Excel.js文件的路径来写的
      import("../untils/Export2Excel").then((excel) => {
        const multiHeader = [
          ["日期", "配送信息", "", "", "", ""],//第一行表头
          ["", "姓名", "地址", "", "", ""],//第二行表头
        ];
        const tHeader = ["", "", "省份", "市区", "地址", "邮编"]; //最后一行的表头
        const filterVal = [
          "date",
          "name",
          "province",
          "city",
          "address",
          "zip",
        ];
        const list = this.tableData; //这个是你循环数据到页面上的的变量名
        const data = this.formatJson(filterVal, list);
        const merges = ["A1:A3", "B1:F1", "B2:B3", "C1:F1","C2:F2"];
        excel.export_json_to_excel({
          multiHeader,
          header: tHeader,
          merges,
          data,
          filename: this.filename,
          autoWidth: this.autoWidth,
          bookType: this.bookType,
        });
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          if (j === "timestamp") {
            return v[j];
          } else {
            return v[j];
          }
        })
      );
    },
  },
};
</script>

<style>
</style>

以上就是前端导出多表头的代码。

还有一点需要注意的是const merges = [“A1:A3”, “B1:F1”, “B2:B3”, “C1:F1”,“C2:F2”];

这是根据你表头在excel里面需要合并的行数和列数，根据自己的需求来写merges里面的数据，如果不懂得请看下面的效果图上的标注。

在这里插入图片描述

以上就是多级表头导出的代码和注意的点，若有不懂的地方欢迎来打扰。希望可以帮助到大家！

前端小白LL
关注
专栏目录
VUE导出多级表头Excel
LGEC_的博客
08-18 1303
VUE导出多级表头Excel
前端导出excel文件（多级表头）
weixin_47097867的博客
09-07 1552
前端excel导出
原生js用Export2Excel导出excel单级表头和多级表头数据方式实现
最新发布
牛先森家的博客
08-18 611
原生js用Export2Excel导出excel单级表头和多级表头数据方式实现
前端实现多级表头导出功能
destiny1234544的博客
10-08 372
template>
前端导出多级表头excel
xx_ll_的博客
06-18 2329
1、安装插件 npm install xlsx --save npm install file-saver --save 2、使用 Export2Excel.js 文件中： /* eslint-disable */ import { saveAs } from 'file-saver' import XLSX from 'xlsx' function generateArray(table) { var out = []; var rows = table.querySelectorAl
vue多级表头前端下载导出excel，XLSX
weixin_46806380的博客
01-19 649
vue前端实现用插件导出复杂多级表头的excel，无需后端接口。
使用xlsx.js导出有复杂表头的excel
热门推荐
seeflyliu的博客
11-03 1万+
前端使用xlsx.js导出有复杂表头的excel 参考： Vue项目中使用xlsx-style导出有格式的表格，这个博客中的实现是针对单个excel手写合并样式，比较繁琐。 我这里实现了根据table的表头数据结构，自动生成和页面上相同的excel表格。 1、简介 需求要导出表格数据到excel，本来想在后端用poi来弄，但是回想起之前同事被poi支配的恐惧，我搜了一下还是觉得在前端使用xlsx.js来搞，这样比较简单。虽然没有要求表格样式，但是我觉得还是弄成多级表头比较好看。 2、效果 页面导出数
动态多级表头导出
weixin_50420750的博客
11-16 743
动态多级表头导出
java poi实现Excel多级表头导出（多级表头，复杂表头）
weixin_45620445的博客
08-12 7282
最近碰到一个导出，比较繁琐，也查询了许多博客，在其中一篇博客的基础上修改，实现了最终想要的效果。话不多说，直接上效果图。
vue 前端导出Excel表格（含多级表头，表格样式）
Chase 学习专栏
12-22 852
开发中有类似需求，整理的他人经验，基于VUE项目，综合考虑使用；
实用前端技巧：轻松导出Excel通用方法（实现多级表头、表格合并、自定义样式）
weixin_67254840的博客
09-26 1123
实用前端技巧：轻松导出Excel通用方法（实现多级表头、表格合并、自定义样式）
java导出多级的excel 表头
weixin_41266893的博客
07-14 214
如何实现java导出多级的excel表头 引言 作为一名经验丰富的开发者，我们经常会遇到需要导出多级excel表头的情况。这对于刚入行的小白可能会比较困惑，但其实只需要按照一定的步骤和代码实现即可。在本文中，我将指导你如何实现java导出多级的excel表头。 整体流程 首先，我们来看一下整件事情的流程，可以用表格展示步骤...
多级表头_前端react + ant design导出多级表头表格
weixin_39535217的博客
01-13 931
npm install --save react-html-table-to-excel import ReactHTMLTableToExcel from 'react-html-table-to-excel'; constructor(props) { super(props); this.tableRef = React.createRef(); } comp...
xlsx 导出 多级表头数据
阿臻
08-06 665
依赖 1.xlsx自定义表格样式<script src="https://cdn.jsdelivr.net/npm/xlsx-style@0.8.13/dist/xlsx.core.min.js"></script> 2.xlsx导出js<script src="https://cdn.jsdelivr.net/npm/xlsx@0.17.0/dist/xlsx.f...
『解疑』前端通过json数据导出excel表格文件（支持多级表头、复杂表头）（json转excel）
DemoJx的博客
04-22 2216
问题 如何友好的通过规范的json数据导出成excel文件。 解题 制定规范的json数据结构： ( 只要将现有的数据处理成以下格式即可导出 ) { headerList: [ // 多级表头(2选1即可) [{name:'a',colspan:1,rowspan:1}], [{name:'b',colspan:1,rowspan:1}] ], headers: [ // 单表头(2选1即可) {name:'c',id:'c'}, {name:'d',id:'d'} ], ro
vue +element 导出多级表头（标题）
梦寻汝的博客
12-04 5267
借鉴地址 https://blog.csdn.net/xingchen678/article/details/102686621 https://blog.csdn.net/beidaol/article/details/107004538 安装依赖 npm install --save xlsx file-saver 按钮 <el-button @click="handleExportMarketingList" type="success">导出&l...
超简单便捷的excel前端导出推荐（适用于多级表头）
jw_xiaoming的博客
12-16 343
超级实用的table导出方法
vue项目前端导出多级表头的表格为excel文件
07-27
要在Vue项目中前端导出具有多级表头的表格为Excel文件，你可以使用`xlsx`库结合一些操作来实现。下面是一个示例代码： 首先，确保已经安装了`xlsx`库。在项目的根目录下运行以下命令： ``` npm install xlsx ``` 然后，在需要导出Excel文件的组件中，可以按照以下方式编写代码： ```vue <template> <div> <button @click="exportExcel">导出Excel</button> </div> </template> <script> import XLSX from 'xlsx'; export default { methods: { exportExcel() { const headers = [ { text: '姓名', rowspan: 2 }, { text: '信息', colspan: 2 }, { text: '科目', rowspan: 2 }, { text: '成绩', colspan: 3 } ]; const data = [ ['张三', '学生', '数学', '语文', '英语'], [null, null, 90, 80, 85] ]; const mergeCells = [ { s: { r: 0, c: 1 }, e: { r: 0, c: 2 } }, { s: { r: 0, c: 3 }, e: { r: 0, c: 5 } } ]; const ws = XLSX.utils.aoa_to_sheet([headers, ...data]); ws['!merges'] = mergeCells; const wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); XLSX.writeFile(wb, 'data.xlsx'); } } } </script> ``` 在上述代码中，我们定义了要导出的表格的表头`headers`和数据`data`，以及合并单元格的信息`mergeCells`。在`exportExcel`方法中，我们首先将表头和数据合并为一个二维数组，然后使用`XLSX.utils.aoa_to_sheet`方法将其转换为工作表对象`ws`。接着，我们设置合并单元格的信息，并将其赋值给工作表对象的`!merges`属性。最后，创建工作簿对象`wb`，将工作表对象添加到工作簿中，并使用`XLSX.writeFile`方法将工作簿保存为Excel文件。 在用户点击"导出Excel"按钮时，将触发`exportExcel`方法，从而导出具有多级表头的表格为Excel文件。 请注意，这种方式只能在现代浏览器中使用，并且导出的Excel文件将保存在用户的本地文件系统中。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值