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

您所在的位置：网站首页 › 前端表格内容居中显示 › Vue 使用XLSX导出excel，并且设置标题背景颜色、字体、居中。并且在前端导出成excel文件

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

2023-08-06 18:10| 来源: 网络整理| 查看: 265

1、先看效果图在这里插入图片描述 2、引入依赖

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

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

This relative module was not found: ./cptable in ./node_modules/[email protected]@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); // 字符串转ArrayBuffer function 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/[email protected]@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文件

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

今日新闻

推荐新闻