vue导出element表格,xlsx和xlsx-style生成xlsx文件并修改样式

1.下载依赖

npm install xlsx --save
npm install file-saver --save
npm install xlsx-style --save

2.先修改xlsx-style的源码,一旦引入xlsx-style则会报错

xlsx-style使用中常见问题及解决办法:

xlsx-style使用中常见问题及解决办法-CSDN博客

在\node_modules\xlsx-style\dist\cpexcel.js 807行 的 var cpt = require(’./cpt’ + ‘able’); 改成 var cpt = cptable;
但是如果每次打包之前去修改包里的代码很麻烦所以我去node_modules包里找到了这个文件

把这个xlsx.full.min.js复制一份出来,粘贴到项目内,我是放到了public的index里面如图:

3.在页面使用,这里是使用element表格,用id绑定后,再用dom获取该节点,然后导出数据添加样式

<template><div><el-table :id="'mytable'" :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><button @click="setExport2Excel">按钮</button></div>
</template><script>
import { utils } from "xlsx";
export default {data() {return {tableData: [{date: "2016-05-03",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-02",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-04",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-01",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-08",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-06",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-07",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},],};},methods: {setExport2Excel() {var xlsxParam = { raw: true }; //这个保证表格只进行解析 不做运算var wb = utils.table_to_sheet(document.querySelector("#mytable"),xlsxParam); for (var i = 0; i < 11; i++) {wb["!cols"][i] = { wpx: 130 };}// 样式的文档地址// https://www.npmjs.com/package/xlsx-stylefor (const key in wb) {if (key.indexOf("!") === -1 && wb[key].v) {wb[key].s = {font: {//字体设置sz: 13,bold: false,color: {rgb: "000000", //十六进制,不带#},},alignment: {//文字居中horizontal: "center",vertical: "center",wrap_text: true,},border: {// 设置边框top: { style: "thin" },bottom: { style: "thin" },left: { style: "thin" },right: { style: "thin" },},};}}var data = this.addRangeBorder(wb["!merges"], wb) //合并项添加边框var filedata = this.sheet2blob(data)this.openDownloadDialog(filedata,this.todayTimeString + "-xxx报表.xlsx")},//为合并项添加边框addRangeBorder(range, ws) {let arr = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z",];if (range) {range.forEach((item) => {let startColNumber = Number(item.s.r),endColNumber = Number(item.e.r);let startRowNumber = Number(item.s.c),endRowNumber = Number(item.e.c);const test = ws[arr[startRowNumber] + (startColNumber + 1)];for (let col = startColNumber; col <= endColNumber; col++) {for (let row = startRowNumber; row <= endRowNumber; row++) {ws[arr[row] + (col + 1)] = test;}}});}return ws;},//将一个sheet转成最终的excel文件的blob对象,然后利用URL.createObjectURL下载sheet2blob(sheet, sheetName) {sheetName = sheetName || "sheet1";var workbook = {SheetNames: [sheetName],Sheets: {},};workbook.Sheets[sheetName] = sheet; // 生成excel的配置项var wopts = {bookType: "xlsx", // 要生成的文件类型bookSST: false, // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性type: "binary",};var wbout = XLSX.write(workbook, wopts);var blob = new Blob([s2ab(wbout)], {type: "application/octet-stream",}); // 字符串转ArrayBufferfunction 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;}return blob;},openDownloadDialog(url, saveName) {if (typeof url == "object" && url instanceof Blob) {url = URL.createObjectURL(url); // 创建blob地址}var aLink = document.createElement("a");aLink.href = url;aLink.download = saveName || ""; // HTML5新增的属性,指定保存文件名,可以不要后缀,注意,file:///模式下不会生效var event;if (window.MouseEvent) event = new MouseEvent("click");else {event = document.createEvent("MouseEvents");event.initMouseEvent("click",true,false,window,0,0,0,0,0,false,false,false,false,0,null);}aLink.dispatchEvent(event);},},
};
</script>

 

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

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

相关文章

SpringBoot 多环境开发配置文件

在开发过程中&#xff0c;往往开发环境和生产环境需要不同的配置。为了兼容两种运行环境&#xff0c;提高开发效率&#xff0c;可以使用多环境开发配置文件。 配置文件结构大概是这样&#xff1a; application.yml -主启动配置文件&#xff08;用于控制使用哪种环境配…

Java:获取当前线程的线程组

代码示例&#xff1a; package com.thb;public class Demo4 {public static void main(String[] args) {ThreadGroup threadGroup Thread.currentThread().getThreadGroup();System.out.println(threadGroup.getName());} }运行输出&#xff1a;

“2024山西智博会”由中国人工智能学会和省科学技术协会联合主办

近日&#xff0c;山西省政府新闻办近日举行了“山西加快转型发展”系列主题新闻发布会的第六场发布会&#xff0c;同时也是“推动数字经济发展壮大”专场发布会。在发布会上&#xff0c;省委、省政府强调了数字经济的重要性&#xff0c;并将其作为重组要素资源、重塑经济结构、…

【无标题】欢迎使用Markdown编辑器

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…

第五节TypeScript 运算符

一、描述 运算符用于执行程序代码运算。 二、运算符主要包括&#xff1a; 算术运算符逻辑运算符关系运算符按位运算符赋值运算符三元/条件运算符字符串运算符类型运算符 1、算术运算符 y5&#xff0c;对下面算术运算符进行解释&#xff1a; 运算符 描述 例子 x 运算结果…

ros2 humble安装joint_state_publisher功能包

第一步从GitHub下载此功能包&#xff1a;命令 git clone -b ros2 https://github.com/ros/joint_state_publisher.git 然后执行里面的setup.py文件就完成安装&#xff1b;命令是 sudo python setup.py install 最后检查是不是有安装好&#xff0c;输入命令&#xff1a; ro…

多表插入、删除操作(批量)——后端

多表插入 场景&#xff1a;当添加一个菜品时&#xff0c;还需要记录菜品的口味信息&#xff0c;因此需要对菜品表&#xff08;dish&#xff09;和口味表&#xff08;dish_flavor&#xff09;同时进行插入操作。 两个表的字段&#xff1a; 代码思路&#xff1a;由DishControll…

PSP - 结构生物学中的机器学习 (NIPS MLSB Workshop 2023.12)

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/135120094 Machine Learning in Structural Biology (机器学习在结构生物学中) 网址&#xff1a;https://www.mlsb.io/ Workshop at the 37th Co…

重磅发布|2023年度中国可观测性现状调研报告发布

研究目的 随着数智化转型的加速推进&#xff0c;企业的基础架构和应用程序愈发复杂&#xff0c;不确定事件频发&#xff0c;系统变得越来越难以搭建和管理。可观测性作为一种关键技术手段&#xff0c;涵盖了多个技术领域&#xff0c;如日志管理、指标监控、智能告警、根因分析…

usb端口管理软件有哪些(usb端口管理软件)

USB端口管理软件在当今的计算机使用中扮演着越来越重要的角色。随着USB设备的普及&#xff0c;如U盘、移动硬盘、数码相机等&#xff0c;相应的管理软件也变得越来越受欢迎。 1、USB端口管理软件可以帮助用户更好地管理和控制U盘的使用。 在插入U盘时&#xff0c;软件可以自动…

基于CTF探讨Web漏洞的利用与防范

写在前面 Copyright © [2023] [Myon⁶]. All rights reserved. 基于自己之前在CTF中Web方向的学习&#xff0c;总结出与Web相关的漏洞利用方法&#xff0c;主要包括&#xff1a;密码爆破、文件上传、SQL注入、PHP伪协议、反序列化漏洞、命令执行漏洞、文件包含漏洞、Vim…

华为鸿蒙操作系统简介及系统架构分析(1)

本文部分内容参考&#xff1a; 鸿蒙系统学习笔记(一) 鸿蒙系统介绍 特此致谢。 一、简介及历史 1. 简介 鸿蒙操作系统&#xff08;HarmonyOS&#xff09;是华为公司研制的一款自主版权的操作系统。2019年8月9日&#xff0c;鸿蒙系统在华为开发者大会<HDC.2019>上正式…

一段音频怎么做二维码?扫码播放音乐怎么做?

音频二维码主要是用来将一段音乐或者其他音频文件&#xff0c;以便用户可以通过扫码的方式来播放音频文件。那么音频二维码制作分几个步骤来完成&#xff0c;肯定有很多小伙伴非常的感兴趣&#xff0c;本篇文章就来给大家分享一下在线生成二维码的制作方法&#xff0c;在电脑的…

声音.wav文件的读取与保存

声音.wav文件的读取与保存-示例代码&#xff1a; import librosa import librosa.display import numpy as np from scipy.io.wavfile import writedef split_wav():# 读取音频文件audio_data, sample_rate librosa.load(input_file, srNone) # sr不指定为None&#xff0c;就…

Ubuntu 常用命令之 gunzip 命令用法介绍

&#x1f4d1;Linux/Ubuntu 常用命令归类整理 gunzip是一个在Ubuntu系统下用于解压缩文件的命令。它主要用于解压.gz格式的文件。这个命令是gzip命令的反向操作&#xff0c;gzip用于压缩文件&#xff0c;而gunzip则用于解压缩文件。 gunzip命令的参数有 -c 或 --stdout 或 -…

算法专题三:二分算法

二分法 零.二分查找1.思路一&#xff1a;朴素二分 一.在排序数组中第一个和最后一个数&#xff1a;1.思路一&#xff1a;GIF题目解析 二.算法X的平方根&#xff1a;1.思路一&#xff1a;暴力哈希2.思路二&#xff1a;二分区间GIF题目解析 三.搜索插入位置&#xff1a;1.思路一&…

中国防风固沙量数据

中国防风固沙量数据 防风固沙是生态系统&#xff08;如森林、草地等&#xff09;通过其结构与过程减少由于风蚀所导致的土壤侵蚀的作用&#xff0c;是生态系统提供的重要调节服务之一。防风固沙功能主要与风速、降雨、温度、土壤、地形和植被等因素密切相关。以防风固沙量&…

21 Vue3中使用v-for遍历对象数组

概述 使用v-for遍历对象数组在真实的开发中也属于非常常见的用法&#xff0c;需要重点掌握。 因为目前流行的是前后端分离开发&#xff0c;在前后端分离开发中&#xff0c;最常需要处理的就是对象数组类型的数据了。 比如&#xff0c;将员工信息渲染到表格中。 这节课我们就…

3d max高质量渲染时,硬件的要求有什么?

渲染过程中&#xff0c;想要追求&#xff0c;效果图高质量渲染&#xff0c;高效率渲染的过程中&#xff0c;3d max高清渲染不只是三维软件的一个要求&#xff0c;对于本地计算机的硬件要求配置也是很重要的。 今天&#xff0c;小编带大家来聊聊3d max高质量渲染过程中&#xff…

solidity 重入漏洞

目录 1. 重入漏洞的原理 2. 重入漏洞的场景 2.1 msg.sender.call 转账 2.2 修饰器中调用地址可控的函数 1. 重入漏洞的原理 重入漏洞产生的条件&#xff1a; 合约之间可以进行相互间的外部调用 恶意合约 B 调用了合约 A 中的 public funcA 函数&#xff0c;在函数 funcA…