导出为excel vue中element ui 中实现的合并单元格 导出excel

最新推荐文章于 2023-05-19 13:56:49 发布
最新推荐文章于 2023-05-19 13:56:49 发布
阅读量956 收藏 3
点赞数
分类专栏： 前端学习记录 文章标签： vue.js ui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shencailing/article/details/122216602
版权

导出为excel

方式一、

一、下载安装

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

二、两个基础文件：

image.png

2.1 Export2Excel.js

/* eslint-disable */
require('script-loader!file-saver');
require('./Blob');
require('script-loader!xlsx/dist/xlsx.core.min');
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);
    console.log('a')
    var oo = generateArray(theTable);
    var ranges = oo[1];

    /* original data */
    var data = oo[0];
    var ws_name = "SheetJS";
    console.log(data);

    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")
}

function formatJson(jsonData) {
    console.log(jsonData)
}
export function export_json_to_excel(th, jsonData, defaultTitle) {
    /* original data */

    var data = jsonData;
    data.unshift(th);
    var ws_name = "SheetJS";

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


    /* 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'});
    var title = defaultTitle || '列表'
    saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx")
}

2.2 Blob.js

/* eslint-disable */
/* Blob.js
 * A Blob implementation.
 * 2014-05-27
 *
 * By Eli Grey, http://eligrey.com
 * By Devin Samarin, https://github.com/eboyjr
 * License: X11/MIT
 *   See LICENSE.md
 */

/*global self, unescape */
/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
 plusplus: true */

/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */

(function (view) {
  "use strict";

  view.URL = view.URL || view.webkitURL;

  if (view.Blob && view.URL) {
      try {
          new Blob;
          return;
      } catch (e) {}
  }

  // Internally we use a BlobBuilder implementation to base Blob off of
  // in order to support older browsers that only have BlobBuilder
  var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function(view) {
          var
              get_class = function(object) {
                  return Object.prototype.toString.call(object).match(/^object\s(.∗)$/)[1];
              }
              , FakeBlobBuilder = function BlobBuilder() {
                  this.data = [];
              }
              , FakeBlob = function Blob(data, type, encoding) {
                  this.data = data;
                  this.size = data.length;
                  this.type = type;
                  this.encoding = encoding;
              }
              , FBB_proto = FakeBlobBuilder.prototype
              , FB_proto = FakeBlob.prototype
              , FileReaderSync = view.FileReaderSync
              , FileException = function(type) {
                  this.code = this[this.name = type];
              }
              , file_ex_codes = (
                  "NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR "
                  + "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
              ).split(" ")
              , file_ex_code = file_ex_codes.length
              , real_URL = view.URL || view.webkitURL || view
              , real_create_object_URL = real_URL.createObjectURL
              , real_revoke_object_URL = real_URL.revokeObjectURL
              , URL = real_URL
              , btoa = view.btoa
              , atob = view.atob

              , ArrayBuffer = view.ArrayBuffer
              , Uint8Array = view.Uint8Array
              ;
          FakeBlob.fake = FB_proto.fake = true;
          while (file_ex_code--) {
              FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
          }
          if (!real_URL.createObjectURL) {
              URL = view.URL = {};
          }
          URL.createObjectURL = function(blob) {
              var
                  type = blob.type
                  , data_URI_header
                  ;
              if (type === null) {
                  type = "application/octet-stream";
              }
              if (blob instanceof FakeBlob) {
                  data_URI_header = "data:" + type;
                  if (blob.encoding === "base64") {
                      return data_URI_header + ";base64," + blob.data;
                  } else if (blob.encoding === "URI") {
                      return data_URI_header + "," + decodeURIComponent(blob.data);
                  } if (btoa) {
                      return data_URI_header + ";base64," + btoa(blob.data);
                  } else {
                      return data_URI_header + "," + encodeURIComponent(blob.data);
                  }
              } else if (real_create_object_URL) {
                  return real_create_object_URL.call(real_URL, blob);
              }
          };
          URL.revokeObjectURL = function(object_URL) {
              if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
                  real_revoke_object_URL.call(real_URL, object_URL);
              }
          };
          FBB_proto.append = function(data/*, endings*/) {
              var bb = this.data;
              // decode data to a binary string
              if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
                  var
                      str = ""
                      , buf = new Uint8Array(data)
                      , i = 0
                      , buf_len = buf.length
                      ;
                  for (; i < buf_len; i++) {
                      str += String.fromCharCode(buf[i]);
                  }
                  bb.push(str);
              } else if (get_class(data) === "Blob" || get_class(data) === "File") {
                  if (FileReaderSync) {
                      var fr = new FileReaderSync;
                      bb.push(fr.readAsBinaryString(data));
                  } else {
                      // async FileReader won't work as BlobBuilder is sync
                      throw new FileException("NOT_READABLE_ERR");
                  }
              } else if (data instanceof FakeBlob) {
                  if (data.encoding === "base64" && atob) {
                      bb.push(atob(data.data));
                  } else if (data.encoding === "URI") {
                      bb.push(decodeURIComponent(data.data));
                  } else if (data.encoding === "raw") {
                      bb.push(data.data);
                  }
              } else {
                  if (typeof data !== "string") {
                      data += ""; // convert unsupported types to strings
                  }
                  // decode UTF-16 to binary string
                  bb.push(unescape(encodeURIComponent(data)));
              }
          };
          FBB_proto.getBlob = function(type) {
              if (!arguments.length) {
                  type = null;
              }
              return new FakeBlob(this.data.join(""), type, "raw");
          };
          FBB_proto.toString = function() {
              return "[object BlobBuilder]";
          };
          FB_proto.slice = function(start, end, type) {
              var args = arguments.length;
              if (args < 3) {
                  type = null;
              }
              return new FakeBlob(
                  this.data.slice(start, args > 1 ? end : this.data.length)
                  , type
                  , this.encoding
              );
          };
          FB_proto.toString = function() {
              return "[object Blob]";
          };
          FB_proto.close = function() {
              this.size = this.data.length = 0;
          };
          return FakeBlobBuilder;
      }(view));

  view.Blob = function Blob(blobParts, options) {
      var type = options ? (options.type || "") : "";
      var builder = new BlobBuilder();
      if (blobParts) {
          for (var i = 0, len = blobParts.length; i < len; i++) {
              builder.append(blobParts[i]);
          }
      }
      return builder.getBlob(type);
  };
}(typeof self !== "undefined" && self || typeof window !== "undefined" && window || this.content || this));

三、在文件中

 formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    exportExcel() {
      const {
        export_json_to_excel,
      } = require("../../../static/js/Export2Excel");
      const tHeader = [
        "品名",
        "车间",
        "穿综轴数",
        "穿综机台",
        "筘号",
        "织机机型",
        "轴号",
        "总经根数",
        "米长",
      ]; // 导出Excel的头部
      const filterVal = [
        "product_name",
        "workshop_name",
        "beam_num",
        "machine_id",
        "reed_no",
        "mac_type_name",
        "",
        "root_number",
        "",
      ]; // 对应的字段名
      const list = this.excelData; // 放入Excel的数据
      const data = this.formatJson(filterVal, list);
      export_json_to_excel(tHeader, data, "穿综计划单");
    },

方式二、js-xlsx

1.1 安装

npm install xlsx --save

// 安装的版本
"xlsx": "^0.14.1"

1.2 导入（局部）

import XLSX from "xlsx";

1.3 使用

   let tableData = [["序号", "客户名称", "面料名称", "门幅", "总米数"]];
        this.multipleSelection.forEach((item, index) => {
          let rowData = [];
          rowData = [
            index + 1,
            item.contactUnitName,
            item.productName,
            item.specification,
            item.meter,
          ];
          tableData.push(rowData);
        });
        let ws = XLSX.utils.aoa_to_sheet(tableData);
        let wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, "数据"); // 工作簿名称
        XLSX.writeFile(wb, 'xxxx表.xlsx'); // 保存的文件名

1、实例一，用方式二实现

例子描述： 在vue文件中 使用 element ui 实现表格中单元格的动态合并。在导出为excel时，也一样导出。

1.1 界面效果图：
在这里插入图片描述
1.2 导出的excel效果：
在这里插入图片描述
1.3 代码实现：

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


    <el-table
      id="tableDD"
      :data="tableData"
      :header-cell-style="tableHeaderColor4"
      :span-method="arraySpanMethod"
      border
      style="width: 100%"
    >

      <el-table-column prop="lmHisYield" label="织造下机总量">
      </el-table-column>
      <el-table-column prop="lmYield" label="织造在机总量"> </el-table-column>
      <el-table-column prop="exYield" label="验布总量"> </el-table-column>
      <el-table-column prop="rkYield" label="入库总量"> </el-table-column>

      <!-- <el-table-column label="此计划单验布总量">
        <template slot-scope="scope">
          <el-button
            size="mini"
            class="btn"
            @click="handleEdit(scope.$index, scope.row)"
            >查看</el-button
          >
        </template>
      </el-table-column> -->
    </el-table>



     let ws = XLSX.utils.table_to_book(document.querySelector("#tableDD"));
        var wbout = XLSX.write(ws, {
          bookType: "xlsx",
          bookSST: true,
          type: "array",
        });
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          "订单生产进度表" +
            this.formatDateFilter(new Date(), "yyyy-MM-dd") +
            ".xlsx"
        );
shencailing
关注
专栏目录
Vue+axios+WebApi+NPOI导出Excel文件实例方法
10-16
【Vue+axios+WebApi+NPOI导出Excel文件实例方法】 在开发中，有时我们需要实现从前端将数据导出为Excel文件供用户下载。在这个过程中，Vue.js作为前端框架，axios作为HTTP库，WebApi作为后端接口，NPOI作为.NET平台...
vue：功能：table动态合并+前端导出
最新发布
1363648943的专栏
03-15 1343
场景：第一列WM 名字相同，行内合并，后面的列合并的行数根据第一列合并的行来。第二列‘累计请假天数'根据合并的几列显示数值。后续需合并的列以第一列合并行数为基准。以第一列WM为判断条件，相同名字的那几行数据合并单元格。合并相同名字的那几行数据，后面的列有需要和第一列合并条件一样。1、根据查询条件：日期。表头的日期是根据查询的日期条件的前三个月来。注）合并数据，后端提供的数据可能不是按照人在一起的顺序，前端需要处理下数据格式，把同一个人的放在一起。2、导出的数据和页面保持一致。2、封装的方法（导出）
VUE + LAY-EXCEL 实现多张表格合并到一张表中导出
qq_28257105的博客
11-30 1831
VUE + LAY-EXCEL 实现多张表格合并到一张表中导出
vue 使用Export2Excel导出表格，导出多个sheet，合并单元格，修改样式
Shiki2147的博客
05-12 4539
import { exportSheetExcel } from "@/utils/export/exportExcelFile"; // 数据形式 let header = ["学号","姓名","性别","出身年月"] let filter = ["studentId","name","sex","birth"] let data1 = [ [ {studentId:'A001',name:"张三",sex:"男",birth:"2020-02-14"}, {st
vue多个表格数据合并导出excel（sheetjs或exceljs）
艾路菲尔博客
09-28 4802
最近公司有个需求每周要查看一次数据统计，页面有个四个表格内容 其中一个需求要求把四个表格的数据导出到一个excel里面
element-ui表格内容居中（详细教程）
热门推荐
m0_59023970的博客
03-18 2万+
表格居中
vue+element-ui动态生成多级表头的方法
10-18
标题中的“vue+element-ui动态生成多级表头的方法”是指在Vue.js应用程序中使用Element-UI库来创建一个能够根据数据动态展示多级表头的表格组件。Element-UI是一个流行的前端UI框架，它提供了丰富的组件库，适用于...
前端导出表格到excel，适合vue和jq框架
07-28
在Vue中，我们可以利用`element-ui`库来创建表格，`xlsx`库来处理Excel导出。`element-ui`提供了丰富的表格组件，而`xlsx`库则能帮助我们将数据转换为Excel格式。 2. **使用jQuery导出表格** jQuery是一个快速、...
前端vue生成导出excel文档
02-10
Element-Plus是Element UI的升级版，是一套为Vue3设计的轻量级组件库，包含多种UI组件，如表格、按钮等，非常适合快速构建企业级应用。 在这个项目中，我们主要依赖两个库来处理Excel导出：xlsx和xlsx-js-style。...
Vue实现数据表格合并列rowspan效果
10-16
在本文中，我们将深入探讨如何使用Vue框架来实现数据表格中的列合并，特别是利用`rowspan`属性来达到这一效果。在实际应用中，合并列的需求常见于展示一对多关系的数据，例如显示一个学生的所有课程及其成绩。我们将...
vue实现表格合并功能
01-18
本文实例为大家分享了vue实现表格合并功能的具体代码，供大家参考，具体内容如下 1、背景 本身有vue进行渲染的数据表格，，但是出于整体考虑，需要对相同的列信息进行单元格合并。 由于使用的是vue，想到MVVM是要用数据驱动的思想，所以考虑在Model做手脚，而不是渲染出数据来后做DOM操作，当然基本的CSS还是要有的。因此这个方法对所有 数据驱动的框架都有效，比如说Angular和React。最后的实现效果是这样的： 2、思路 原本的正常表格是这样的： 设备
前端vue导出Excel（多sheet）
_小郑有点困了的博客
01-13 4373
场景： 当导出文件的时候遇到结构复杂的表格（如：表头合并）；或者数据分页的时候，后端就很难操作了，难以保持表格原有结构。所以就需要前端导出。 步骤如下： 1.组装数据 2.标记表头合并项，计算合并项 3.添加样式 4.转buffer，file-saver导出文件 组装数据 所谓组装数据的意义在于，手动决定他的结构 举个例子 表格外观是这样的 打印一下导出的数据结构是这样的 分别查看 这个!cols数组是每一列的宽度（第一行每一格的宽度） 这个!merges是表格所有的合并项 自行组装
Vue 使用js-xlsx导出、树形数据合并
ZhangYuan2HH的博客
01-14 5330
Vue 使用js-xlsx导出、树形数据合并 前言：本文档是经过网上查询资料，结合自己的业务整理出来的知识点，希望对看到文档的人有帮助。 实现功能：1.vue使用xlsx基本导出 2.导出合并单元格 已树形数据为例。 数据格式： [{ "id": "1", "cityId": "222401", "createUser": "延边分公司传输测试账号", "createTi...
Vue 导出Excel表格，并实现合并单元格方法
weixin_44523517的博客
08-03 6447
Vue 导出Excel表格，并实现合并单元格方法
VUE+ElementUI导出复杂（多级表头、合并单元格）excel表格
weixin_52103939的博客
07-07 4220
一个超简单实用的excel导出，之前看网上很多教程都是修改配置文件来操作的，这种方法是直接通过数据导出，所以会觉得麻烦，其实只需要把要导出的表格用el-table渲染出来，然后导出就可以了。当然这种只是针对于数据不多，如果数据太多都上万条了，这种还是让后端来搞。 1.安装 npm install file-saver -S npm install xlsx -S npm install -D script-loader 2.在src目录下建excle文件夹下创建两个文件（两个文件代码放在文章最后）。
Vue Element表格组件的合并与导出功能
qq_40236628的博客
10-19 1880
Vue Element表格组件的合并与导出功能
vue 导出excel，合并单元格，修改样式
m0_49494051的博客
10-25 2802
vue 导出excel，合并单元格，改改样式
vue 使用XLSX导出表格合并
weixin_44467587的博客
05-19 1045
【代码】vue 使用XLSX导出表格合并。
Vue实现自定义表格合并
灰灰的博客
12-06 1801
合并表格
Vue + Element-UI 实现导入导出功能详解
"这篇文章主要介绍了如何使用Vue.js和Element-UI框架实现简洁的导入导出功能，适合于前端后台管理系统的数据操作。" 在前端开发中，Element-UI是一个非常受欢迎的UI库，尤其适用于Vue.js 2.0的桌面应用开发。其对应...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值