vue使用Export2Excel导出excel（复杂表头）

最新推荐文章于 2024-06-20 20:33:24 发布
最新推荐文章于 2024-06-20 20:33:24 发布
阅读量2.3k 收藏 12
点赞数 4
文章标签： vue.js 前端 css elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51886616/article/details/126996341
版权

Export2Excel.js

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

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, fontStyle) {
  var ws = {};
  var range = {
    s: {
      c: 10000000,
      r: 10000000
    },
    e: {
      c: 0,
      r: 0
    }
  };
  let _opts = []
  if (opts) {
    _opts = opts
  }
  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 (_opts) {
        if (R == _opts[0] && C == _opts[1]) {
          cell = {
            v: data[R][C],
            s: defaultCellStyle
          }
        }
      }
      //给某一单元格的字体自定义样式
      if (fontStyle) {
        if (R == data.length - 3 && C == 1) {
          cell = {
            v: data[R][C],
            s: fontCellStyle
          }
        }
      }
      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;
}
let fontCellStyle = {
  font: {
    name: '宋体',
    sz: 18,
    color: { rgb: "ff0000" },
    bold: true,
  },
  alignment: {//对齐方式
    horizontal: 'center',//水平居中
    vertical: 'center',//竖直居中
  },
}

let defaultCellStyle = {

  alignment: {
    horizontal: 'center',
    vertical: 'center',
    indent: 0
  },
  border: {
    diagonalDown: true,//斜线方向
    diagonal: {
      color: { rgb: '303133' },
      style: 'thin'
    }//diagonalDown与diagonal必须同时使用
  }
}
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")
}
/*自定义表头样式*/
let arr = [
  "A1","B1","C1","D1","E1","F1","G1",
  "H1","I1","J1","K1","L1","M1","N1",
  "O1","P1","Q1","R1","S1","T1",
  "U1","V1","W1","X1","Y1","Z1"
];
let arr1 = [
  "A2","B2","C2","D2","E2","F2","G2",
  "H2","I2","J2","K2","L2","M2","N2",
  "O2","P2","Q2","R2","S2","T2",
  "U2","V2","W2","X2","Y2","Z2"
];
let arr2 = [
  "A3","B3","C3","D3","E3","F3","G3",
  "H3","I3","J3","K3","L3","M3","N3",
  "O3","P3","Q3","R3","S3","T3",
  "U3","V3","W3","X3","Y3","Z3"
];
let style = {
  font: {
    color: { rgb: "000000" },
    bold: true,
  },
  border: {
    color: {
      auto: 1,
    },
    top: {
      style: 'thin',
    },
    bottom: {
      style: 'thin',
    },
    left: {
      style: 'thin',
    },
    right: {
      style: 'thin',
    },
  },
  alignment: {
    horizontal: "center",
    vertical: "center"
  },
  fill: {
    fgColor: {rgb: "DCDFE6"},
  },
};
/*二级表头*/
export function export_json_to_excel({
                                       multiHeader = [],	// 第一行表头
                                       multiHeader2 = [], // 第二行表头
                                       data,
                                       filename, //文件名
                                       merges = [], // 合并
                                       autoWidth = true,
                                       bookType = 'xlsx',
                                       diagonal = [],//斜线
                                       fontStyle = false,
                                     } = {}) {

  /* original data */
  filename = filename || '列表';
  data = [...data];
  /*data.unshift(header);*/
  var ws_name = "SheetJS";

  data.unshift(multiHeader)
  data.unshift(multiHeader2)
  var wb = new Workbook()//加样式，如斜线
  if (diagonal) {
    var ws = sheet_from_array_of_arrays(data, diagonal, fontStyle);
  } else {
    var 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 dataInfo = wb.Sheets[wb.SheetNames[0]];

  for (var i = 0; i < multiHeader.length; i++) {
    dataInfo[arr[i]].s = style;
  }
  for (var j = 0; j < multiHeader2.length; j++) {
    dataInfo[arr1[j]].s = style;
  }
  var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: false, type: 'binary' });
  saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), `${filename}.${bookType}`)
}
/*三级表头的*/
export function export_json_to_excel1({
                                       multiHeader = [],	// 第一行表头
                                       multiHeader2 = [], // 第二行表头
                                       header,	// 第三行表头
                                       data,
                                       filename, //文件名
                                       merges = [], // 合并
                                       autoWidth = true,
                                       bookType = 'xlsx'
                                     } = {}) {

  /* original data */
  filename = filename || '列表';
  data = [...data];
  var ws_name = "SheetJS";
  data.unshift(multiHeader)
  data.unshift(multiHeader2)
  data.unshift(header);
  var wb = new Workbook()
  var  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 dataInfo = wb.Sheets[wb.SheetNames[0]];
  for (var i = 0; i < multiHeader.length; i++) {
    dataInfo[arr[i]].s = style;
  }
  for (var j = 0; j < multiHeader2.length; j++) {
    dataInfo[arr1[j]].s = style;
  }
  for (var k = 0; k < header.length; k++) {
    dataInfo[arr2[k]].s = style;
  }
  var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: false, type: 'binary' });
  saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), `${filename}.${bookType}`)
}

注意：此js中使用了xlsx-style需要安装，安装完成之后需要修改
xlsx-style
修改此js中的var cpt = require(‘./cpt’ + ‘able’); 替换为var cpt = cptable;否则会报错

具体使用

1、二级表头

handleDownload() {
      import('@/vendor/Export2Excel').then(excel => {
        // 这里要注意 multiHeader  和 filterVal 的数组长度一定要相等，否则会报错
        const multiHeader = ['', '', '测试3', '测试4', '测试5']
        const multiHeader2 = ['测试1', '测试2', '测试', '', '']
        const filterVal = ['cs1', 'cs2', 'cs3', 'cs4', 'cs5']
        const merges = ['A1:A2', 'B1:B2', 'C1:E1'] // 合并单元格的数据，如何合并参考上面图片讲解
        const data = this.formatJson(filterVal, this.crud.data)
        const filterName = '测试'
        excel.export_json_to_excel({
          multiHeader,
          multiHeader2,
          data,
          merges,
          autoWidth: true,
          filename: filterName
        })
      })
    },
    // 拼接数据
    formatJson(filterVal, jsonData) {
      console.log(jsonData)
      return jsonData.map(v => filterVal.map(j => {
        return v[j]
      }))
    }

二级实现效果

在这里插入图片描述
2、三级表头

handleDownload() {
      import('@/vendor/Export2Excel').then(excel => {
        const header = ['测试1', '测试2', '测试', '测试-1', '', '', '']
        const multiHeader2 = ['', '', '', '测试4', '', '测试5', '']
        const multiHeader = ['', '', '测试3', '测试6', '测试7', '测试8', '测试9']
        const filterVal = ['cs1', 'cs2', 'cs3', 'cs6', 'cs7', 'cs8', 'cs9']
        // 这里要注意 header  和 filterVal 的数组长度一定要相等，否则会报错
        const merges = ['A1:A3', 'B1:B3', 'C1:C2', 'D1:G1', 'D2:E2', 'F2:G2']
        const data = this.formatJson(filterVal, this.crud.data)
        const filterName = '测试'
        excel.export_json_to_excel1({
          multiHeader,
          multiHeader2,
          header,
          data,
          merges,
          autoWidth: true,
          filename: filterName
        })
      })
    },
    // 拼接数据
    formatJson(filterVal, jsonData) {
      console.log(jsonData)
      return jsonData.map(v => filterVal.map(j => {
        return v[j]
      }))
    }

三级实现结果

在这里插入图片描述

༺追求༻
关注
  • 4
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
vue导出excel并修改表头样式
10-29
在Vue.js应用中导出Excel并修改表头样式是一个常见的需求，这主要涉及到前端数据处理、Excel文件生成以及样式定制等方面的知识。以下是一份详细的技术指南，帮助你理解和实现这个功能。 1. **Vue.js基础知识**：Vue...
Export2Excel使用及配置说明
Sunny
06-09 8909
Export2Excel使用及配置说明
Export2Excel--Excel导出功能
weixin_50255400的博客
07-30 8633
文章目录2. 参数3. 引入js文件4. 页面调用方法示例 ### 1. 安装依赖 Export2Excel依赖js-xlsx、file-saver和script-loader。 安装命令： npm install xlsx file-saver -S npm install script-loader -S -D 由于js-xlsx体积还是很大的，导出功能也不是一个非常常用的功能，所以使用的时候建议使用懒加载。使用方法如下： import('@/vendor/Export2Excel').then(e
vue表格数据导出excel（自定义标题| 背景 | 字体 | 颜色 | 大小| 内容自动换行）
最新发布
qq_43176127的博客
06-20 641
vue导出excel1、自定义标题背景颜色。2、自定义标题字体大小。3、内容过长自动换行。
vue-export2excel 导出表格
blog
04-21 5994
export2excel，是一个可以将 json 格式的数据导出成 excel 文档。一般用于 admin 后台管理系统中，实现快速将线上数据，导出为本地表格数据。
【Vue】Vue项目中通过Export2Excel导出excel文件
【敦厚的曹操】的专栏
06-05 2315
【代码】【Vue】Vue项目中通过Export2Excel导出excel文件。
vue2 - 基于Export2Excel.js导出Excel案例（js-xlsx插件二次封装使用）
背心的博客
11-25 2895
vue2 - 基于Export2Excel.js导出Excel案例（js-xlsx插件二次封装使用）
vue中导出Excel表格的实现代码
10-17
最后，`Export2Excel.js`文件会包含导出Excel的核心逻辑，它通常会使用`xlsx`库来创建工作簿，并使用`file-saver`库来保存文件。具体的实现细节取决于你从GitHub仓库获取的代码或自定义的实现。 通过以上步骤，你...
vue+element并使用xlsx实现导出excel
06-14
这篇教程将详细介绍如何在Vue.js项目中结合Element UI和XLSX库来实现Excel的导出功能。 首先，你需要确保已经安装了Vue.js、Element UI和XLSX。如果你的项目还没有引入这些依赖，可以通过以下命令进行安装： ```...
vue导出excel(Blob.js/Export2Excel.js).rar
05-27
本资源“vue导出excel(Blob.js/Export2Excel.js).rar”提供了实现这一功能的关键JavaScript库，Blob.js和Export2Excel.js。下面我们将深入探讨如何利用这些工具在Vue项目中实现出色的Excel导入和导出功能。 首先，...
Vue结合后台导入导出Excel问题详解
10-17
在Vue.js开发中，实现Excel的导入导出功能是一项常见的需求。本文将深入探讨如何在Vue项目中结合后台服务实现这一功能，特别是针对导出Excel的实现方式。 首先，我们来看一下导出Excel的核心概念。在Java后端，通常...
vue：前端json数据 导出excel（Export2Excel）
snowball的博客
07-28 8041
导出的功能，通常后端处理好，前端直接通过地址进行下载即可，能不能是前端直接自己导出json文件，形成excel呢，当然可以。2.1、安装三个插件，分别是file-saver、xlsx、script-loader。经过测试下载成功，打开后内容显示正确，可放心使用。2.2、utils目录下创建文件。...
vue.js中使用Export2Excel导出Excel表格
热门推荐
@必意玲
04-19 2万+
有一个项目需求，要求在前端项目中导出Excel表格，经过查找代码,Vue.js确实可以实现，具体实现步骤为： 安装依赖 npm install -S file-saver xlsx npm install -D script-loader 导入两个JS 下载Blob.js和Export2Excel.js，在src目录下新建Excel文件夹，里面放入Blob.js和Export2Excel....
vue前端导出数据到excel表格，Export2Excel 样式修改，复杂表头，多级表头
weixin_43965143的博客
06-08 1万+
vue-element-admin项目使用Export2Excel导出excel样式修改 参考链接: https://www.cnblogs.com/yinxingen/p/11052184.html. 主要是在vue-element-admin自带Export2Excel模板的基础上进行修改，进行单元格宽度，边框，字体，颜色等设置 安装xlsx-style:npm install --save xlsx-style， import XLSX from "xlsx-style"报错：This relat
Export2Excel.js 导出多维数组的复杂表格并设置表格样式
weixin_44624120的博客
05-11 5643
Export2Excel.js excel導出插件 導出多維數組的數據         需要先把原數組進行拆分，重新組成一個一維數組（插件所需的是一維數組）              多維數組中的數據項中的鍵名存在相同，故不能直接把他们都放在一个json数据中，   &nb
vue+elementui系统利用Export2Excel.js将表格内容导出到excel，并设置表头文字水平垂直居中
qq_45200669的博客
04-15 1万+
写在前面：这是纯前端导出，导出的表格是二级表头，内容是四级单元格（单元格内有四小格），这几个点学会之后应该能适应大部分导出excel的需求了。对于之前没接触过导出excel需求的小伙伴可能会有一点点的难度，希望各位能静下心来阅读和学习。有什么问题请在下方留言，我会尽力解答~ 导出excel的前提是我们需要加载以下框架or文件 vue + elementui（表格是用这个ui框架写的） Export2Excel.js Blob.js 我先附上效果图，各位看一下是否符合自己的需求 ......
使用export2Excel导出（无需后端参与）
kjhytfh的博客
08-24 1687
Export2Excel的使用
vue前端导出多级表头的excel表
前端-尔嵘
10-10 4517
我的这个是两级表头，那么三级表头你应该也会做的，只是merges得细心找一下！4.直接上js,其他的布局之类的我就不展示了。
js导出表格为Excel文件,合并表头
hongyeniu的博客
05-11 2233
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
vue通过命令引入Export2Excel
12-15
为了在Vue项目中使用Export2Excel，需要先安装两个依赖项：file-saver和xlsx。可以使用以下命令进行安装： ```shell npm install file-saver xlsx --save ``` 安装完成后，可以在Vue组件中使用以下代码来导出Excel文件： ```javascript // 引入Export2Excel const { export_json_to_excel } = require('@/vendor/Export2Excel'); // 定义Excel表格的表头 const header = ['姓名', '年龄', '性别']; // 定义Excel表格的数据 const data = [ ['张三', 18, '男'], ['李四', 20, '女'], ['王五', 22, '男'] ]; // 定义Excel表格的名称 const filename = '学生信息表'; // 调用Export2Excel方法导出Excel文件 export_json_to_excel(header, data, filename); ``` 这段代码将生成一个名为“学生信息表.xlsx”的Excel文件，其中包含表头和数据。可以根据需要修改表头、数据和文件名。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值