Vue 使用XLSX导出excel，并且设置标题背景颜色、字体、居中。并且在前端导出成excel文件

1、先看效果图

2、引入依赖

npm install xlsx-style --save
npm install --save xlsx

3、运行项目会发生一个报错

This relative module was not found: ./cptable in ./node_modules/xlsx-style@0.8.13@xlsx-style/dist/cpexcel.js

4、解决报错：
在\node_modules\xlsx-style\dist\cpexcel.js 807行的

var cpt = require('./cpt' + 'able');

改为：

var cpt = cptable;

再次运行项目就不会报错了
5、使用：
5.1、引入：

import XLSXStyle from 'xlsx-style';

5.2、mounted使用

this.exportExcel()

5.3、methods定义方法

exportExcel(){let data = [['时间','电压'],['2021-12-01 08:57:12','3.14'],['2021-12-01 08:58:20','3.15']];let titles = ['时间','电压']var sheet = XLSX.utils.json_to_sheet(data, {skipHeader: true,});/**设置标题头背景色 */for (const key in sheet) {// 第一行，表头if (key.replace(/[^0-9]/ig, '') === '1') {sheet[key].s = {fill: { //背景色fgColor: { rgb: 'C0C0C0' }},font: {//字体name: '宋体',sz: 12,bold: true},border: {//边框bottom: {style: 'thin',color: 'FF000000'}},alignment:{horizontal:'center' //水平居中}}}let colsP = titles.map(item=>{let obj = {'wch': 25 //列宽}return obj;})sheet['!cols']  = colsP;//列宽}this.openDownload(this.sheet2blob(sheet,titles.join('-')), titles.join('-')+"Excel文件.xlsx");
},
sheet2blob(sheet, sheetName) {let wb = XLSX.utils.book_new();wb.SheetNames.push(sheetName)wb.Sheets[sheetName] = sheet;var wbout = XLSXStyle.write(wb, { bookType: '', bookSST: false, type: 'binary' })var blob = new Blob([s2ab(wbout)], { type: "" },sheetName);// 字符串转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;},
openDownload(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);},

6、最后就会成功导出成为excel文件
7、改进：如果不想发生This relative module was not found: ./cptable in ./node_modules/xlsx-style@0.8.13@xlsx-style/dist/cpexcel.js问题：可以在package.json中把依赖引入改为以下图片所示，同时删除项目node_modules文件夹，项目重新（npm i ）安装依赖

"xlsx-style": "git+ssh://https://gitee.com/zheng-haiwen/xlsx-styles.git"

关于XLSXStyle更多配置的请看官网：https://www.npmjs.com/package/xlsx-style

Vue 使用XLSX导出excel，并且设置标题背景颜色、字体、居中。并且在前端导出成excel文件相关推荐

Visual Studio Code (echarts)数据可视化瀑布图实现及标题的格式设置标题背景颜色以及设置副标题和标题加边框，设置边框背景和边框颜色柱形图颜色及柱形图的宽度设置完整代码
设置标题背景颜色以及设置副标题和标题加边框, 设置边框背景和边框颜色柱形图颜色及柱形图的宽度设置完整代码 <!DOCTYPE html> <html lang="en&q ...
android标题背景色,设置标题背景颜色
MMMHUHU 这个主题将帮助您开始在xml文件中构建自己的标题栏并在活动中使用它编辑以下是上述链接内容的简短摘要 - 这只是设置文本的颜色和标题栏的背景 - 没有调整大小,没有按钮,只是最简单的样本 ...
android设置window背景颜色,android – 设置标题背景颜色
这个 thread将让你开始在xml文件中建立自己的标题栏,并在你的活动中使用它编辑这里是上面链接的内容的简要摘要 – 这只是设置文本的颜色和标题栏的背景 – 没有调整大小,没有按钮,只是最简单的 ...
Excel怎样设置标题行，Excel工作表中标题行的处理
Excel怎样设置标题行,工作表中标题行的处理 Excel做几十.几百行的表格很平常.看下部的数据时看不到表格的标题行,让人搞不清每一列的天文数字究竟代表什么意思.而且正常打印输出时,只有第一页能打印 ...
徐志摩题要求：•使用外部引入CSS样式的方式为网页设置样式 •标题使用＜h3＞标签，其他文本均放在段落标签＜p＞中 •使用标签选择器设置标题h3的字体颜色为#ddf111 •使用ID选择器设置p段
徐志摩题要求: •使用外部引入CSS样式的方式为网页设置样式 •标题使用<h3>标签,其他文本均放在段落标签<p>中 •使用标签选择器设置标题h3的字体颜色为#ddf111 • ...
html table转excel单元格带背景颜色
html table转excel单元格带背景颜色在浏览器端将html的table转成Excel,可以参考下面的库 https://github.com/JackGit/table2excel.js ...
雷林鹏分享：jQuery EasyUI 数据网格 - 条件设置行背景颜色
jQuery EasyUI 数据网格 - 条件设置行背景颜色本教程将向您展示如何根据一些条件改变数据网格(datagrid)组件的行样式.当 listprice 值大于 50 时,我们将为该行设置不 ...
Android Studio 设置编辑器背景颜色
介绍设置背景色作用 AndroidStudio 合理设置编辑器背景颜色能使眼镜不容易疲劳,更好的保护眼镜. 推荐颜色颜色在这里向大家推荐豆沙绿,保护眼睛的说法虽未得到任何科学证实,但是确实看着柔和 ...
Java代码生成同一色系颜色_求大侠帮忙给这段JAVA代码设置个背景颜色！
换个颜色就成!importjava.awt.*;importjava.awt.event.*;importjavax.swing.*;importjava.sql.*;publicclassInque ...

Vue 使用XLSX导出excel，并且设置标题背景颜色、字体、居中。并且在前端导出成excel文件

Vue 使用XLSX导出excel，并且设置标题背景颜色、字体、居中。并且在前端导出成excel文件相关推荐

最新文章

热门文章