![cover](https://img-blog.csdnimg.cn/e666843568cc4d768ec8153282dd7aed.png)
vue2 前端导出el-table表格为Excel文件 (自带样式)
vue2前端导出excel文件,非常简单的。适配了webpack5和webpack4。
前话:我只是个自学到工作的小菜鸟,如果有大佬有更好的方法,希望不吝赐教。
1.电脑环境
node版本 14.20.0
vue-cli 4.4.0 (如果你的项目是vue-cli 5 版本(即webpack5)的会有很多问题,解决办法写在后边)
这是我用到的三个插件的版本,自行安装,版本请保持和我一致。
【我发布了 oh-my-tools npm包,也可以直接下载包使用,npm i oh-my-tools,然后使用】
"file-saver": "^2.0.5",
"xlsx": "^0.16.9",
"xlsx-style-medalsoft": "^0.8.13"
2.下边直接贴代码,复制能直接使用。我使用的相对路径,可能需要你们修改下。
<template>
<div class="toEXCEL">
<el-table :data="tableData" style="width: 100%" id="stationTable">
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="资料" width="180">
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
<el-button type="primary" @click="down"> 导出</el-button>
</div>
</template>
<script>
import OMS from "../utils/tools";
export default {
name: "toEXCEL",
components: {},
props: {},
data() {
return {
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
},
],
};
},
computed: {},
watch: {},
created() {},
mounted() {},
methods: {
down() {
OMS.downLoadXlsx({
dom: "stationTable", //获取表格dom,然后拿出数据,所以我需要知道解析哪一个表格
name: "预报计算结果表", //excel名字
ColumnWdth: [12, 12, 20, 20, 20, 20], //每一列的宽度,需要直接指定,接受数字
});
},
},
};
</script>
<style scoped lang="less"></style>
3.创建一个js文件,放入工具函数
src/utils/tools.js
import FileSaver from 'file-saver';
import XLSX from 'xlsx';
import XLSXStyle from 'xlsx-style-medalsoft';
let OMS = {};
// 导出Excel-单表格Excel 带样式
OMS.downLoadXlsx = ({ dom = 'el-table', name = '文件', ColumnWdth = [] }) => {
let table = document.getElementById(dom);
// 因为element-ui的表格的fixed属性导致多出一个table,会下载重复内容,这里删除掉
if (table.querySelector('.el-table__fixed')) {
table.removeChild(table.querySelector('.el-table__fixed'));
}
if (table.querySelector('.el-table__fixed-right')) {
table.removeChild(table.querySelector('.el-table__fixed-right'));
}
let et = XLSX.utils.table_to_book(table, { raw: true }); //此处传入table的DOM节点,raw为true表示单元格为文本格式(未加工)
debugger;
let wbs = et.Sheets.Sheet1;
// 删掉末尾空行
Object.keys(wbs).forEach((item, index) => {
if (!item.startsWith('!') && wbs[item].v == '') {
delete wbs[item];
}
});
//设置表格列宽度
if (ColumnWdth.length === 0) {
for (let i = 0; i < 30; i++) {
wbs['!cols'][i] = { wch: 12.5 };
}
} else {
ColumnWdth.forEach((item, i) => {
wbs['!cols'][i] = { wch: item };
});
}
//循环遍历每一个表格,设置样式
for (const key in wbs) {
if (!key.startsWith('!')) {
wbs[key].s = {
font: {
sz: 11, //字体大小
bold: false, //加粗
name: '宋体', //字体
color: {
rgb: '000000', //十六进制,不带#
},
},
alignment: {
//文字居中
horizontal: 'center',
vertical: 'center',
wrapText: false, //文本自动换行
},
border: {
// 设置边框
top: { style: 'thin' },
bottom: { style: 'thin' },
left: { style: 'thin' },
right: { style: 'thin' },
},
};
}
}
const 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',
];
// 行列合并
let range = wbs['!merges'];
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 = wbs[arr[startRowNumber] + (startColNumber + 1)];
for (let col = startColNumber; col <= endColNumber; col++) {
for (let row = startRowNumber; row <= endRowNumber; row++) {
wbs[arr[row] + (col + 1)] = test;
}
}
});
}
let etout = XLSXStyle.write(et, {
bookType: 'xlsx',
type: 'buffer',
});
try {
FileSaver.saveAs(new Blob([etout], { type: 'application/octet-stream' }), `${name}.xlsx`); //导出的文件名
} catch (e) {
throw e;
}
};
export default OMS;
4.结果
补充:vue-cli 5 的同学看这里
安装下边三个插件,其实就是版本不同罢了。
"xlsx": "^0.18.5",
"xlsx-style-medalsoft": "^0.8.13",
"file-saver": "^2.0.5"
"node-polyfill-webpack-plugin": "^2.0.1", 这个插件就是关键
重要:在webpack5中移除了nodejs核心模块的polyfill自动引入,所以fs模块,path模块等nodejs内置模块被移除了,所以项目报错,启动不起来。
webpack配置
在vue.config.js中添加如下配置
const { defineConfig } = require("@vue/cli-service");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
module.exports = defineConfig({
publicPath: process.env.NODE_ENV == "production" ? "./" : "/",
configureWebpack: {
plugins: [new NodePolyfillPlugin()],
externals: {
fs: require("fs"), //如果缺少其他模块就在下边加
},
},
});
修改 tools.js文件中 XLSX库的引用方式
将 import XLSX from "xlsx"; 改为 import * as XLSX from "xlsx/xlsx.mjs";
好了 大问题就没有了。可以愉快的导出了。
更多推荐
所有评论(0)