vue使用xlsx和xlsx-style导出xlsx文件并修改样式

1.下载依赖

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

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

在\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.在页面使用

<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/231675.shtml

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

相关文章

Python如何画函数图像

1 问题 通过图像可以直观地学习函数变化&#xff0c;在学习函数等方面效果显著。下面我们尝试用Python的2D绘图库matplotlib来绘制函数图像。实现 yx*x 图象。 2 方法 用文字描述解题思路&#xff0c;可配合一些图形以便更好的阐述。解决问题的步骤采用如下方式&#xff1a; …

100GPTS计划-AI写诗PoetofAges

地址 https://chat.openai.com/g/g-Cd5daC0s5-poet-of-ages https://poe.com/PoetofAges 测试 创作一首春天诗歌 创作一首夏天诗歌 创作一首秋天诗歌 创作一首冬天诗歌 微调 诗歌风格 语气&#xff1a;古典 知识库

掌握 Babel:让你的 JavaScript 与时俱进(下)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

蓝桥杯嵌入式——LED

原理&#xff1a;PD2为使能端&#xff0c;高电平使能。使能的时候&#xff0c;给PC8-PC15高电平即可点亮LED。 CUBE里将这些端口设置为GPIO输出模式&#xff0c;将PC8-15初始电平设置为高电平(这样一上电就不会亮),PD2默认低电平&#xff0c;不用管&#xff0c;然后生成代码即可…

算法通关第十九关-青铜挑战理解动态规划

大家好我是苏麟 , 今天聊聊动态规划 . 动态规划是最热门、最重要的算法思想之一&#xff0c;在面试中大量出现&#xff0c;而且题目整体都偏难一些对于大部人来说&#xff0c;最大的问题是不知道动态规划到底是怎么回事。很多人看教程等&#xff0c;都被里面的状态子问题、状态…

1,探索「两数之和」问题的多种算法解决方案

今天要讨论的是「两数之和」问题&#xff0c;并将从哈希表解法到排序数组与双指针法、再到一遍哈希表解法的不同解决方案进行详细探讨 哈希表解法&#xff1a; 第一&#xff0c;使用了一种简单而有效的方法——哈希表。我们创建了一个 HashMap&#xff0c;用于存储已遍历过的元…

Linux--学习记录(3)

G重要编译参数 -g&#xff08;GDB调试&#xff09; -g选项告诉gcc产生能被GNU调试器GDB使用的调试信息&#xff0c;以调试程序编译带调试信息的可执行文件g -g hello.c -o hello编译过程&#xff1a; -E&#xff08;预处理&#xff09; g -E hello.c -o hello.i-S&#xff08;编…

【Docker】Docker安装部署maven私服

文章目录 镜像拉取构建nexus实例登录maven私服如何查看实例初始化的admin密码呢&#xff1f;1.查看容器挂载卷2.找到nexus_nexus_data查看挂载卷详情3.查看admin账号密码4.登录并重置密码 使用nexus私服1.设置settings.xml2.设置idea pom 出现的问题小插曲 镜像拉取 docker pu…

Spring Cloud + Vue前后端分离-第6章 通用代码生成器开发

Spring Cloud Vue前后端分离-第6章 通用代码生成器开发 6-1 代码生成器原理介绍 1.增加generator模块&#xff0c;用于代码生成 2.集成freemarker 通用代码生成器开发 FreeMarker 是一款模版引擎&#xff0c;通过模板生成文件&#xff0c;包括html页面&#xff0c;excel …

Ubuntu 18.04配置NFS服务器以及配置时遇到NFS问题

1.安装相关软件 sudo apt-get install nfs-kernel-server sudo apt-get install nfs-common 2.配置共享目录 2.1修改exports文件 sudo vi /etc/exports在最后添加如下并保存退出 /home/xiaowu/nfs 192.168.31*(rw,sync,no_root_squash,no_subtree_check) /home/xiaowu/nfs…

计算机组成原理(输入输出系统-----程序查询方式)

目录 程序查询方式 一.程序查询方式的流程 1.查询流程 2.程序流程 二.程序查询方式的接口电路 程序查询方式 一.程序查询方式的流程 1.查询流程 单个设备&#xff1a; 如果在传输过程当中只有一个内存和I/O之间数据传输&#xff0c;在执行程序的过程当中CPU会执行出来一…

Windows11编译x265源码生成Visual Studio工程详细步骤

概述 x265是一款开源符合HEVC标准的编码器&#xff0c;也属于VLC项目之一。 由于x265是开源的&#xff0c;因此它得到了广泛的应用和开发。许多开源项目和商业产品都使用x265进行视频压缩处理。同时&#xff0c;x265也支持多种编程语言和平台&#xff0c;使得开发者可以方便地…

Docker与云计算平台集成:AWS、Azure、GCP完全指南

Docker和云计算平台的结合&#xff0c;如AWS&#xff08;Amazon Web Services&#xff09;、Azure&#xff08;Microsoft Azure&#xff09;和GCP&#xff08;Google Cloud Platform&#xff09;&#xff0c;为现代应用的构建和部署提供了巨大的便利性。本文将深入研究如何与这…

02.微服务组件 Eureka注册中心

1.Eureka注册中心 服务提供者与消费者&#xff1a; 服务提供者:一次业务中&#xff0c;被其它微服务调用的服务。(提供接口给其它微服务)服务消费者:一次业务中&#xff0c;调用其它微服务的服务。&#xff08;调用其它微服务提供的接口)一个服务是消费者还是提供者&#xff…

Redis设计与实现之Lua 脚本

目录 一、 Lua 脚本 1、初始化 Lua 环境 2、脚本的安全性 3、脚本的执行 4、 EVAL 命令的实现 定义 Lua 函数 执行 Lua 函数 5、 EVALSHA 命令的实现 二、 小结 一、 Lua 脚本 Lua 脚本功能是 Reids 2.6 版本的最大亮点&#xff0c;通过内嵌对 Lua 环境的支持&#xf…

Mysql之约束上篇

Mysql之约束上篇 约束的概述为什么需要约束什么是约束约束的分类 非空约束作用关键字特点添加非空约束删除非空约束 唯一性约束关键字特点添加唯一约束关于复合唯一约束删除唯一约束查看索引 主键约束(非空唯一性约束)作用关键字特点添加主键约束关于复合主键删除主 约束的概述…

探索拉普拉斯算子:计算机视觉中用于边缘检测和图像分析的关键工具

一、介绍 拉普拉斯算子是 n 维欧几里得空间中的二阶微分算子&#xff0c;表示为 ∇。它是函数梯度的发散度。在图像处理的上下文中&#xff0c;该运算符应用于图像的强度函数&#xff0c;可以将其视为每个像素具有强度值的二维信号。拉普拉斯算子是计算机视觉领域的关键工具&am…

了解 SBOM (软件物料清单)

近年来&#xff0c;开源软件在开发中的采用激增&#xff0c;目前已占已构建软件的高达 90%。它在全球公司中的受欢迎程度源于成本节约和产品上市时间的加快。然而&#xff0c;在集成开源软件组件时&#xff0c;有一个关键的方面需要考虑。 Synopsys 报告84% 的商业和专有代码库…

Qt-QTransform介绍与使用

QTransform是一个用于二维坐标系转换的类。我们知道Qt的坐标系是左上角为原点&#xff0c;x轴向右&#xff0c;y轴向下&#xff0c;屏幕上每个像素代表一个单位&#xff0c;那么&#xff0c;如果我们想要在屏幕上建立自己的坐标系用于绘制&#xff0c;就需要借助QTransform。 …

Guitar Pro8.1最新2024中文免激活版下载(附教程)

Guitar Pro 8是一款功能强大的指法阅读器和编辑器&#xff0c;它允许您编辑吉他、贝斯和尤克里里的乐谱和指法谱&#xff0c;并为鼓或钢琴创建背景音轨。轻松创建、播放和共享您的标签&#xff01;快速的进行乐谱播放并进行练习&#xff0c;也可以进行编辑操作&#xff0c;允许…