vue项目:使用xlsx导出Excel数据

文章目录

  • 一、安装xlsx
  • 二、报错及解决
  • 三、编写公共方法
  • 四、方法使用


一、安装xlsx

执行命令:npm i xlsx file-saver --save
在这里插入图片描述

二、报错及解决

使用时:import XLSX from "xlsx"; 发现如下报错信息
在这里插入图片描述
报错原因:xlsx版本不兼容。

解决也很简单:
1)先移除已安装的xlsx: npm uninstall xlsx
2)安装低版本:npm i xlsx@0.17.0

三、编写公共方法

// exportExcel.js
import { saveAs } from "file-saver";
import XLSX from "xlsx";function datenum(v, date1904) {if (date1904) v += 1462;const epoch = Date.parse(v);return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
}function sheet_from_array_of_arrays(data) {let ws = {};let range = {s: {c: 10000000,r: 10000000},e: {c: 0,r: 0}};for (let R = 0; R != data.length; ++R) {for (let 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;let cell = {v: data[R][C]};if (cell.v == null) continue;const 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 s2ab(s) {let buf = new ArrayBuffer(s.length);let view = new Uint8Array(buf);for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;return buf;
}function Workbook() {if (!(this instanceof Workbook)) return new Workbook();this.SheetNames = [];this.Sheets = {};
}/*** @description 导出表格数据* @param {Array} header 表头* @param {Array} data 数据* @param {String} filename 文件名* @param {merges} header 表头* @param {autoWidth} header 是否自适应表格内容宽度* @param {bookType} header excel文件后缀名*/
export function exportJson2Excel({header = [],data = [],filename = "excel",merges = [],autoWidth = true,bookType = "xlsx"
} = {}) {let dataKeys = [];// 处理xlsx头部header = header.map(item => {dataKeys.push(item.key);return item.value;});// 处理data数据data = data.map(item => {const dataOne = dataKeys.map(key => item[key]);return [...dataOne];});header.length > 0 && data.unshift(header);let 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、undefinedif (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;}const ws_name = "SheetJS";const wb = new Workbook();// 将工作表添加到工作簿wb.SheetNames.push(ws_name);wb.Sheets[ws_name] = ws;const wbout = XLSX.write(wb, {bookType: bookType,bookSST: false,type: "binary"});saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}),`${filename}.${bookType}`);
}

四、方法使用

<template><div class="hello"><el-button type="primary" @click="handleExport">导出为Excel</el-button><el-table :data="tableData" border><el-table-columnv-for="item in header":key="item.key":label="item.value":prop="item.key"></el-table-column></el-table></div>
</template><script>
import { exportJson2Excel } from "../utils/exportExcel.js";export default {data() {return {message: "",header: [{key: "id",value: "ID"},{key: "title",value: "名称"},{key: "tag",value: "标签"},{key: "typeText",value: "方式"},{key: "cycle",value: "周期"},{key: "status",value: "状态"}],tableData: [{id: 44,title: "test111122222",tag: "",typeText: "定时任务",cycle: "每天 9:00",status: "草稿"},{id: 45,title:"名称很长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长",tag: "hhh",typeText: "定时任务",cycle: "每天 12:00",status: "草稿"},{id: 45,title: "测试测试测试",tag: "hhh",typeText: "定时任务",cycle: "每天 00:00",status: "草稿"},{id: 47,title: "嗯嗯嗯",tag: "hhh",typeText: "定时任务",cycle: "每天 10:00",status: "草稿"},{id: 48,title: "test",tag: "null",typeText: "循环任务",cycle: "每天 19:00",status: "正式"}]};},methods: {handleExport() {console.log("export");exportJson2Excel({data: this.tableData,header: this.header});}
};
</script>

页面页面展示,及导出结果:
在这里插入图片描述
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java项目基于SpringBoot和Vue的时装购物系统的设计与实现

今天要和大家聊的是一款基于SpringBoot和Vue的时装购物系统。 &#x1f495;&#x1f495;作者&#xff1a;李同学 &#x1f495;&#x1f495;个人简介&#xff1a;混迹在java圈十年有余&#xff0c;擅长Java、微信小程序、Python、Android等&#xff0c;大家有这一块的问题可…

web前端之不一样的下拉菜单、不选中第一个元素的样式效果、伪类排除第一个元素、符号选择器、hover、not、first、child

MENU 效果图htmlcssJShtmlcss 效果图 htmlcssJS html <nav><ul><li class"navli"><h4>HTML5</h4><ul class"ulson"><li class"lison">HTML5</li></ul></li><li class"na…

java通过Excel批量上传数据

一、首先在前端写一个上传功能。 <template><!-- 文件上传 --><el-upload class"upload-demo" :on-change"onChange" :auto-upload"false"><el-button type"primary">上传Excel</el-button></el-up…

Django单表数据库操作

单表操作 测试脚本 当你只想测试django某一个py文件的内容,可以不用书写前后端的交互,直接写一个测试脚本即可 单表删除 数据库操作方法: 1.all():查询所有的数据 2.filter():带有过滤条件的查询 3.get():直接拿数据对象,不存在则报错 4.first():拿queryset里面的第一个元素…

Http 缓存之 Cache-Control 介绍

Cache-Control 是一个 HTTP 头&#xff0c;用于控制浏览器和其他中间缓存如何缓存和重新使用已缓存的响应。它可以在请求头或响应头中设置。 Cache-Control 的值是一组由逗号分隔的指令&#xff0c;常见的指令有&#xff1a; 1.public&#xff1a;响应可以被任何对象&#xf…

天童知识课堂|“春分”

春色正中分&#xff0c;人间恰良辰。春分&#xff0c;也称升分&#xff0c;是二十四节气之一。春分的到来&#xff0c;意味着春天已经过去一半了&#xff0c;气候也逐渐温暖&#xff0c;阳光更加明媚。而关于春分的知识&#xff0c;你知道多少呢&#xff1f;来和天童美语一起了…

鸿蒙开发实战:【系统服务管理部件】

简介 samgr组件是OpenHarmony的核心组件&#xff0c;提供OpenHarmony系统服务启动、注册、查询等功能。 系统架构 图 1 系统服务管理系统架构图 目录 /foundation/systemabilitymgr ├── samgr │ ├── bundle.json # 部件描述及编译文件 │ ├── frameworks …

vue+elementui中table实现单选行功能

el-table插件可以选择行&#xff0c;但是只能多选&#xff0c;而项目中有单选的需求。 效果如下图所示&#xff0c;点击行或者点击复选框都可以选中行&#xff08;高亮&#xff0c;复选框选中&#xff09;&#xff0c;并且每次只选中当前行&#xff0c;之前选中的行清空。点击标…

Elasticsearch:让你的 Elasticsearch 索引与 Python 和 Google Cloud Platform 功能保持同步

作者&#xff1a;来自 Elastic Garson Elasticsearch 内的索引 (index) 是你可以将数据存储在文档中的位置。 在使用索引时&#xff0c;如果你使用的是动态数据集&#xff0c;数据可能会很快变旧。 为了避免此问题&#xff0c;你可以创建一个 Python 脚本来更新索引&#xff0…

SpringBoot自定义starter开发:记录系统访客独立IP访问次数

&#x1f648;作者简介&#xff1a;练习时长两年半的Java up主 &#x1f649;个人主页&#xff1a;程序员老茶 &#x1f64a; ps:点赞&#x1f44d;是免费的&#xff0c;却可以让写博客的作者开心好久好久&#x1f60e; &#x1f4da;系列专栏&#xff1a;Java全栈&#xff0c;…

端口如何映射到外网?

在现代信息化社会中&#xff0c;远程访问已经成为人们工作和生活中不可或缺的一部分。复杂的网络环境和网络限制可能会给远程连接带来不便。在这种情况下&#xff0c;端口映射到外网的技术应运而生。本文将介绍端口映射到外网的概念、应用场景以及一种优秀的解决方案——【天联…

码蹄集2023部分题目

1&#x1f40b;&#x1f40b;&#x1f40b;MC0204世界警察&#xff08;黄金&#xff1b;双指针&#xff09; 时间限制&#xff1a;4秒 占用内存&#xff1a;1024M &#x1f41f;题目描述 世界警察小码哥来谈判了&#xff0c;恐怖分子在银行挟持了 n 个人质&#xff0c;每个…

Docker-安装

Docker ⛅Docker-安装&#x1f320;各平台支持情况&#x1f320;Server 版本安装☃️Ubuntu☃️Centos &#x1f320;Docker 镜像源修改&#x1f320;Docker 目录修改 ⛅Docker-安装 &#x1f320;各平台支持情况 &#x1f320;Server 版本安装 ☃️Ubuntu &#x1f342;安装…

LiveGBS流媒体平台GB/T28181功能-HTTPS 服务支持配置开启什么时候需要开启HTTPS测试SSL证书配置HTTPS测试证书

LiveGBS功能支持HTTPS 服务支持配置开启什么时候需要开启HTTPS测试SSL证书配置HTTPS测试证书 1、配置开启HTTPS1.1、准备https证书1.1.1、选择Nginx类型证书下载 1.2、配置 LiveCMS 开启 HTTPS1.2.1 web页面配置1.2.2 配置文件配置 2、HTTPS测试证书3、验证HTTPS服务4、为什么要…

Visual Studio 2013 - 清理

Visual Studio 2013 - 清理 1. 清理1.1. 工程清理1.2. 解决方案清理 References 1. 清理 Debug Release 1.1. 工程清理 (right mouse click on the project) -> 清理 1.2. 解决方案清理 (right mouse click on the solution) -> 清理解决方案 References [1] Yongq…

Vue技能树总结01

Vue vs React 相似之处: 它们都有使用 Virtual DOM&#xff1b;提供了响应式&#xff08;Reactive&#xff09;和组件化&#xff08;Composable&#xff09;的视图组件。将注意力集中保持在核心库&#xff0c;而将其他功能如路由和全局状态管理交给相关的库。React 比 Vue 有更…

记录C++中,子类同名属性并不能完全覆盖父类属性的问题

问题代码&#xff1a; 首先看一段代码&#xff1a;很简单&#xff0c;就是BBB继承自AAA&#xff0c;然后BBB重写定义了同名属性&#xff0c;然后调用父类AAA的打印函数&#xff1a; #include <iostream> using namespace std;class AAA { public:AAA() {}~AAA() {}void …

什么是Spring Boot

什么是Spring Boot Spring Boot是一个由Pivotal团队提供的全新框架&#xff0c;其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置&#xff0c;从而使开发人员不再需要定义样板化的配置。通过这种方式&#xff0c;Spring Boot致力于…

网络货运平台有哪些

网络货运平台有运满满、货拉拉、快狗打车、滴滴货运、货运宝、G7、货骑士、云鸟配送、积微物联、中储智运等。 运满满 运满满创立于2013年&#xff0c;是国内首家基于云计算、大数据、移动互联网和人工智能技术开发的货运调度平台&#xff0c;是公路物流领域高新技术综合应用…

C++ 命名空间的定义,及使用

命名空间 C中什么是命名空间&#xff1f; &#xff08;个人理解&#xff0c;仅供参考&#xff09; 就像C本身中面向对象中的类&#xff0c;是一个相对封闭的结构&#xff0c;将具有某一特定属性的数据、函数、类对象等归为一类放置在该空间内&#xff0c;这个应该是命名空间…