vue导出excel表格并支持样式及行高修改
更新时间：2023年06月09日 10:56:21 作者：ZekiHoo
这篇文章主要为大家介绍了vue导出excel表格并支持样式及行高修改，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
前言
使用插件xlsx、xlsx-style导出带有样式的表格，两者都可以实现创建excel，但是xlsx免费版仅仅只能做单元格合并，收费版才能设置单元格样式，所以需要用到xlsx-style插件实现表格样式的修改
一、使用步骤
1. 安装环境
- vue: 2.5.22
- xlsx: 0.18.5
- xlsx-style: 0.8.13
2. 引入xlsx库
npm i xlsx xlsx-style -S
3. 修改js文件
这里我们需要两个文件：
node_modules/xlsx/dist里的xlsx.extendscript.js
node_modules/xlsx/dist里的xlsx.js
- 修改xlsx.extendscript.js里所有XLSX变量为XLSX2，避免和xlsx.js里的变量冲突
var XLSX = {};
...- 修改xlsx.js里的方法，使导出支持自定义行高功能
// 增加行高设置
var DEF_PPI = 96, PPI = DEF_PPI;
function px2pt(px) { return px * 96 / PPI; }
function pt2px(pt) { return pt * PPI / 96; }
function write_ws_xml_data(ws, opts, idx, wb) {
var o = [], r = [], range = safe_decode_range(ws['!ref']), cell="", ref, rr = "", cols = [], R=0, C=0, rows = ws['!rows'];
var dense = Array.isArray(ws);
var params = ({r:rr}), row, height = -1;
for(C = range.s.c; C <= range.e.c; ++C) cols[C] = encode_col(C);
for(R = range.s.r; R <= range.e.r; ++R) {
r = [];
rr = encode_row(R);
for(C = range.s.c; C <= range.e.c; ++C) {
ref = cols[C] + rr;
var _cell = dense ? (ws[R]||[])[C]: ws[ref];
if(_cell === undefined) continue;
if((cell = write_ws_xml_cell(_cell, ref, ws, opts, idx, wb)) != null) r.push(cell);
}
if(r.length > 0 || (rows && rows[R])) {
params = ({r:rr});
if(rows && rows[R]) {
row = rows[R];
if(row.hidden) params.hidden = 1;
height = -1;
if (row.hpx) height = px2pt(row.hpx);
else if (row.hpt) height = row.hpt;
if (height > -1) { params.ht = height; params.customHeight = 1; }
if (row.level) { params.outlineLevel = row.level; }
}
o[o.length] = (writextag('row', r.join(""), params));
}
}
if(rows) for(; R < rows.length; ++R) {
if(rows && rows[R]) {
params = ({r:R+1});
row = rows[R];
if(row.hidden) params.hidden = 1;
height = -1;
if (row.hpx) height = px2pt(row.hpx);
else if (row.hpt) height = row.hpt;
if (height > -1) { params.ht = height; params.customHeight = 1; }
if (row.level) { params.outlineLevel = row.level; }
o[o.length] = (writextag('row', "", params));
}
}
return o.join("");
}- 创建自定义的js文件export2Excel.js 内容如下
// 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
function 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"
}); // 字符串转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;
}
// 将workbook装化成blob对象,可支持多个sheet
function workbook2blob(workbook) {
// 生成excel的配置项
var wopts = {
// 要生成的文件类型
bookType: "xlsx",
// 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
bookSST: false,
type: "binary"
};
var wbout = XLSX.write(workbook, wopts);
// 将字符串转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;
}
var blob = new Blob([s2ab(wbout)], {
type: "application/octet-stream"
});
return blob;
}
/**
* 通用的打开下载对话框方法
* @param url 下载地址，也可以是一个blob对象，必选
* @param saveName 保持文件名，可选
*/
function openDownloadDialog(url, saveName) {
if (typeof url == 'object' && url instanceof Blob) {
// 创建blob地址
url = URL.createObjectURL(url);
}
var aLink = document.createElement('a');
aLink.href = url;
// HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
aLink.download = saveName || '';
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);
}
// 为合并项添加边框
function 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"];
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;
}4. index.html引入
<script src="xlsx.js"></script> <script src="export2Excel.js"></script> <script src="xlsx.extendscript.js"></script>
5. vue代码
<template>
<div class="config-form">
<el-button @click="exportExcel">下载文档</el-button>
</div>
</template>
<script>
export default {
data() {
return {
value: [20, 50],
excelAoa: [
['XXXXXXXXXX记录表', null, null, null, null, null, null],
['与会者', null, null, null, null, null, null]
['序号', '姓名', '性别', '年龄', '修改人', '修改日期', '提交日期']
]
}
},
methods: {
exportExcel() {
const aoa = [
...this.excelAoa
];
//这个就是修改格式的代码
sheet["A1"].s = {
font: {
sz: 14,
bold: true,
color: {
rgb: "0000FF"
}
},
fill: {
bgColor: {
indexed: 64
},
fgColor: {
rgb: "FFFF00"
}
}
}; //<====设置xlsx单元格样式
const sheet = this.xlsxAddStyle(aoa);
openDownloadDialog(sheet2blob(sheet), '导出.xlsx');
},
// 表格样式设置
xlsxAddStyle(aoa) {
// 注意XLSX2变量
const sheet = XLSX2.utils.aoa_to_sheet(aoa);
// 合并单元格 s 开始坐标 e结束坐标 c-x轴 r-y轴
const mergeArr = [
{s: {c: 0, r: 0}, e: {c: 6, r: 0}},
{s: {c: 1, r: 1}, e: {c: 6, r: 1}}
]
const rowH = []; // 表格每列高度
// 单元格外侧有框线
const borderAll = {
top: { style: "thin" },
bottom: { style: "thin" },
left: { style: "thin" },
right: { style: "thin" },
};
// 单元格外侧无框线
const noBorder = {
top: { style: "" },
bottom: { style: "" },
left: { style: "" },
right: { style: "" },
};
for (const key in sheet) {
if (Object.hasOwnProperty.call(sheet, key)) {
const element = sheet[key];
if (typeof element === "object") {
const index = Number(key.slice(1)) - 1;
rowH[index] = { hpx: 30 };
element.s = {
alignment: {
horizontal: "center", // 所有单元格右对齐
vertical: "center", // 所有单元格垂直居中
wrapText: true // 换行
},
font: {
name: "微软雅黑",
sz: 10,
italic: false,
underline: false,
},
border: borderAll,
fill: {
fgColor: { rgb: "FFFFFFFF" },
},
};
// 标题的样式
if (['A1'].includes(key)) {
element.s.alignment.horizontal = 'center';
element.s.font.bold = true;
element.s.font.sz = 15;
element.s.fill.border = noBorder;
}
}
}
}
// 单元格的列宽
sheet["!cols"] = [
{ wpx: 60 },
{ wpx: 100 },
{ wpx: 120 },
{ wpx: 120 },
{ wpx: 100 },
{ wpx: 100 },
{ wpx: 100 }
];
sheet["!rows"] = rowH;
sheet["!merges"] = mergeArr;
// 合并项添加边框
const sheetNew = addRangeBorder(sheet['!merges'], sheet);
return sheetNew
}
}
}
</script>以上就是vue导出excel表格并支持样式及行高修改的详细内容，更多关于vue导出excel表格的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了深入理解Vue keep-alive及实践总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
下面小编就为大家带来一篇vue系列之动态路由详解【原创】。小编觉得挺不错的，现在就想给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
vee validate 一个轻量级的 vue表单验证插件。接下来通过本文给大家分享Vue中使用vee-validate表单验证的方法，需要的朋友参考下吧2018-05-05
这篇文章主要给大家介绍了关于vue2.0/3.0响应式原理及区别的相关资料，文中通过图文介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
vue+elemen实现el-tooltip在文本超出区域后浮现
el-tooltip组件本身就是悬浮提示功能,在对它进行二次封装时,实现超出的文本浮现,本文就来介绍一下vue+elemen实现el-tooltip在文本超出区域后浮现,感兴趣的可以了解一下2023-12-12
这篇文章主要介绍了如何给vant的Calendar日历组件添加备注，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
TypeScript基本类型 typeof 和keyof案例详解
这篇文章主要介绍了TypeScript基本类型 typeof 和keyof案例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了Vue之Dep和Observer的用法及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了vue.js 输入框输入值自动过滤特殊字符替换中问标点操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了详解如何搭建mpvue框架搭配vant组件库的小程序项目，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
最新评论