前端vue2中的excel导出功能-file-saver,xlsx,xlsx-style的使用

文章目录

    • 概要
    • 整体架构流程
    • 技术名词解释
    • 技术细节
    • 小结

概要

今天遇到了一个技术点.前端的excel的纯导出功能,不和后端交互,只用前端导出数据

整体架构流程

vue2 + element-ui 

技术名词解释

在网上看了很多帖子,最后我选择了xlsx , file-saver , xlsx-style 这个三个插件完成项目需求

技术细节

第一步: 下载插件 

npm i xlsx  xlsx-style  file-saver 

 第二步:  因为很多地方要用到excel导出,属性就封装一个js文件

      在src目录下新建 utils文件夹,然后再新建一个download.js

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

function outputXLSX(filename, tableDataId, rowValue, column, width) {
  let table = document.getElementById(tableDataId);
  let clonedTable = table.cloneNode(true);
  if (clonedTable.querySelector(".el-table__fixed")) {
    clonedTable.removeChild(clonedTable.querySelector(".el-tanle__fixed"));
  }
  let headerRows = clonedTable.querySelectorAll(
    ".el-table__header-wrapper > table > thead > tr"
  );

  Array.from(headerRows).forEach((headerRows) => {
    let columns = headerRows.querySelectorAll(".el-table__cell");
    Array.from(columns).forEach((column) => {
      if (column.classList.contains("gutter")) {
        column.remove();
      }
    });
  });

  let ws = XLSX.utils.table_to_sheet(clonedTable);

  let wb2 = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb2, ws, filename);
  setExlStyle(wb2["Sheets"][filename], width);
  let wb_out = XLSXSTYLE.write(wb2, { type: "buffer", bookSST: true });

  try {
    FileSaver.saveAs(
      new Blob([wb_out], { type: "application/octet-stream" }),
      filename + ".et"
    );
  } catch (e) {
    console.log(e, wb_out);
  }
  return wb_out;
}

function setExlStyle(data, px) {
  px = px ? px : 120;
  let borderAll = {
    top: { style: "thin" },
    bottom: { style: "thin" },
    left: { style: "thin" },
    right: { style: "thin" },
  };
  data["!cols"] = [];
  for (let key in data) {
    let col = "000000";
    if (data[key] instanceof Object) {
      if (data[key].v < 0) {
        col = "ff0000";
      } else {
        col = "000000";
      }

      data[key].s = {
        border: borderAll,
        alignment: {
          horizontal: "center",
          vertical: "center",
        },
        font: {
          color: {
            rgb: col,
          },
          sz: 11,
        },
        bold: true,
        numFmt: 0,
      };
      data["!cols"].push({
        wpx: px,
      });
    }
  }

  return data;
}

export default {
  outputXLSX,
};

然后保存调用即可

bug解决-在使用这个东西的时候出现了2个bug

    第一个bug, 运行问题: * ./cptable in ./node_modules/xlsx-style/dist/cpexcel.js

     解决方案就是,在 项目的vue.config.js中编写一下代码:

module.exports = {

    configureWebpack: {

        externals: { './cptable': 'var cptable' }

    }

}

    第二个bug, 运行问题: the method has been removed in JSZip 3.0,please check the upgrade guide

     解决方案: 这个问题是因为jszip这个插件版本过高, 全局搜索jszip

   

然后下载对应的版本就可以使用了

小结

其实不难,就是遇到问题要细心看英文翻译,然后找到问题即可完成效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/536820.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

开课通知 | 5月六西格玛绿带培训火热招生

尊敬的各位学员&#xff1a; 天行健管理咨询将于近期开展六西格玛绿带公开课&#xff0c;旨在为广大企业和个人提供专业的六西格玛绿带培训&#xff0c;帮助大家掌握六西格玛绿带的核心知识和技能&#xff0c;提升工作效率和质量。现将相关事宜通知如下&#xff1a; 一、培训时…

第十三届蓝桥杯省赛大学B组编程题(c++)

D.刷题统计 二分(AC): 注意:二分时右边界 right 的确定 #include<iostream> using namespace std; long long a,b,n; bool check(long long x){long long tx/7;x%7;long long temp0;if(x<5) tempx*a;else temp5*a(x-5)*b;long long cntt*(5*a2*b)temp;return cnt&g…

第十一届蓝桥杯大赛第二场省赛试题 CC++ 研究生组-七段码

#include<iostream> using namespace std; const int N 10, M 7; int e[N][N] {0}, f[N], open[N];//e[i][j]表示i和j之间是否连通&#xff1b;f[i]表示结点i的父节点&#xff1b;open[i] 1表示结点i打开&#xff0c;0表示关闭 long long ans 0;int find(int x){if(…

网络原理(应用层、传输层)

文章目录 一、应用层1.1 自定义协议1.2 通用协议XMLJSONprotobuf 1.3 DNS 域名解析系统 二、传输层2.1 UDP协议2.2 TCP协议协议端格式及解析可靠性机制确认应答超时重传连接管理&#xff08;三次握手&#xff0c;四次挥手&#xff09;流量控制拥塞控制 效率机制滑动窗口延迟应答…

Anzo Capital 荣膺2024年最值得信赖经纪商大奖

Anzo Capital 表示&#xff1a;“自Anzo Capital品牌诞生起&#xff0c;始终坚持以客户为中心&#xff0c;不断提升产品力和品牌力&#xff0c;致力于成为世界上最值得信赖和推荐的经纪商。而从2015年成立至今&#xff0c;已经服务全球40多个国家&#xff0c;超过34.8万个客户…

财富池指标公式--通达信筹码底部指标公式源码

很多交易软件上都会提供筹码分布可查看主力资金动向&#xff0c;比如说&#xff1a;同花顺软件的筹码分布功能上&#xff1a;红色筹码代表低于收盘价的获利筹码&#xff0c;蓝色筹码表示高于收盘价的套牢盘筹码。 在手机上或电脑端&#xff0c;可将光标移至相应的价位&#xf…

(洛谷P34060):海底高铁—->差分数组,贪心思想

海底高铁 题目描述 该铁路经过 N N N 个城市&#xff0c;每个城市都有一个站。不过&#xff0c;由于各个城市之间不能协调好&#xff0c;于是乘车每经过两个相邻的城市之间&#xff08;方向不限&#xff09;&#xff0c;必须单独购买这一小段的车票。第 i i i 段铁路连接了…

【Web】CTFSHOW-ThinkPHP5-6反序列化刷题记录(全)

目录 web611 web612 web613-622 web623 web624-626 纯记录exp&#xff0c;链子不作赘述 web611 具体分析&#xff1a; ThinkPHP-Vuln/ThinkPHP5/ThinkPHP5.1.X反序列化利用链.md at master Mochazz/ThinkPHP-Vuln GitHub 题目直接给了反序列化入口 exp: <?ph…

实验9 内置对象application

一、实验目的 掌握怎样在JSP中使用内置对象application 二、实验项目内容&#xff08;实验题目&#xff09; 编写代码&#xff0c;掌握application的用法。【参考课本例题4-16 留言板 】 三、源代码以及执行结果截图&#xff1a; example4_16.jsp <% page language"…

【2024年认证杯】A题详细思路+数据(来源)+成品论文+模型代码

2024年认证杯A题 解题思路 ⭐⭐第一问题分析第二问题分析第三问题分析 数据与数据来源指标解释数据来源 参考论文python/ matlab 代码 解题思路 ⭐⭐ 这个题目要求我们围绕人造保暖纤维的保暖能力进行建模&#xff0c;并解决三个具体问题。 第一问题分析 第一问题要求建立一…

【C 数据结构】循环链表

文章目录 【 1. 基本原理 】【 2. 循环链表的创建 】2.1 循环链表结点设计2.2 循环单链表初始化 【 3. 循环链表的 插入 】【 4. 循环单链表的 删除操作 】【 5. 循环单链表的遍历 】【 6. 实例 - 循环链表的 增删查改 】【 7. 双向循环链表 】 【 1. 基本原理 】 对于单链表以…

【嵌入式学习】ARM day04.11

一、思维导图 二、练习 实现三个灯闪烁 汇编代码 .text .global _start _start: 使能GPIOE和F时钟LDR r0,0x50000A28LDR r1,[R0]ORR R1,R1,#(0X3<<4)STR R1,[R0]配置GPIOE和F的MODER寄存器LDR r0,0x50006000 GPIOELDR R1,0X50007000 G…

C语言.指针(5)

指针&#xff08;5&#xff09; 1.sizeof和strlen的对比1.1sizeof1.2strlen1.3sizeof和strlen的对比 2.数组和指针笔试题解析2.1一维数组2.2字符数组2.3二维数组 3.指针运算笔试题解析3.1 题目13.2 题目23.3 题目33.4 题目43.5 题目53.6 题目63.7 题目7 1.sizeof和strlen的对比…

Qt栅格布局的示例

QGridLayout * layoutnew QGridLayout;for(int i0;i<10;i){for(int j0;j<6;j){QLabel *labelnew QLabel(this);label->setText(QString("%1行%2列").arg(i).arg(j));layout->addWidget(label,i,j);}}ui->widget->setLayout(layout); 这样写程序会崩…

NC65 查询默认密码(sql)

NC65 使用sql查询设置的默认密码&#xff08;如果系统设置有&#xff09;&#xff1a; select * from sm_user_defaultpwd

电商技术揭秘十三:云计算在电商中的应用场景

相关系列文章 电商技术揭秘一&#xff1a;电商架构设计与核心技术 电商技术揭秘二&#xff1a;电商平台推荐系统的实现与优化 电商技术揭秘三&#xff1a;电商平台的支付与结算系统 电商技术揭秘四&#xff1a;电商平台的物流管理系统 电商技术揭秘五&#xff1a;电商平台…

C++11 设计模式2. 简单工厂模式

简单工厂&#xff08;Simple Factory&#xff09;模式 我们从实际例子出发&#xff0c;来看在什么情况下&#xff0c;应用简单工厂模式。 还是以一个游戏举例 //策划&#xff1a;亡灵类怪物&#xff0c;元素类怪物&#xff0c;机械类怪物&#xff1a;都有生命值&#xff0…

「Java开发指南」如何利用MyEclipse启用Spring DSL?(一)

本教程将引导您通过启用Spring DSL和使用Service Spring DSL抽象来引导Spring和Spring代码生成项目&#xff0c;本教程中学习的技能也可以很容易地应用于其他抽象。在本教程中&#xff0c;您将学习如何&#xff1a; 为Spring DSL初始化一个项目创建一个模型包创建一个服务和操…

实体抽取全解析:技术与实战

目录 一、前言二、实体抽取技术概览基于规则的实体抽取基于统计的实体抽取基于深度学习的实体抽取 三、实体抽取的发展历程早期的实体抽取方法基于规则和词典的方法基于特征的机器学习方法 深度学习时代的实体抽取从传统模型到神经网络序列标注模型的兴起预训练语言模型的革命 …

如何修改 MySQL 8.0 的密码

在 MySQL 8.0 中修改用户密码是数据库管理的一项基本任务。本教程将引导您完成这一过程&#xff0c;确保即使是初学者也能理解并成功执行。 介绍 MySQL 是最流行的关系数据库管理系统之一。作为数据库管理员或开发人员&#xff0c;您可能需要更改用户的密码来保证账户安全。本…