在后台系统开发中，经常会遇到excel文件导出功能的开发，至此总结一下改功能的一些实现方式。
一、后端提供地址访问导出（不推荐）
二、后端通过接口把blob文件流的数据返回给前端
- 通过模拟点击事件下载excel文件
exportFile(params).then(res => {
// 直接返回来就是blob数据
if (res) {
const xlsx = 'application/vnd.ms-excel'
const blob = new Blob([res], { type: xlsx })
const a = document.createElement('a') // 转换完成，创建一个a标签用于下载
a.download = 'fileName.xls'
a.href = window.URL.createObjectURL(blob)
a.click()
a.remove()
} else {
this.$message.error('导出失败')
}
三、基于vue-json-excel纯前端导出（不支持修改样式）
- npm i vue-json-excel
-
npm官网明确指出
重要的！ Microsoft Excel 中的额外提示
此组件中实现的方法使用 HTML 表格来绘制 .xls 文件，Microsoft Excel 不再将 HTML 识别为本机内容，因此在打开文件之前会显示警告消息。 内容将完美呈现，但消息无法避免。 - vue组件代码
<template>
<div class="elcel">
<h2>vue-json-excel前端导出excel</h2>
<download-excel
class="btn btn-default"
:data="json_data"
:fields="json_fields"
worksheet="sheet"
name="24352345"
type="xlsx"
>
Download Excel (you can customize this with html code!)
</download-excel>
</div>
</template>
<script>
export default {
data() {
return {
json_fields: {
名字: "name",
城市: "city",
电话: "country",
},
json_data: [
{
name: "诈身份",
city: "直达佛个地方",
country: "111.0000",
},
{
name: "Thessaloniki",
city: "Athens",
country: "222.2222",
},
],
};
},
methods: {},
};
</script>
四、基于xlsx纯前端导出（支持修改样式）
- npm install --save xlsx(修改样式需要下载npm install --save xlsx-style)
- npm install -S file-saver
- npm install -D script-loader
如果需求仅仅是导出普通excel，则安装xlsx 即可，仅可以对列宽等进行简单控制。
如果需要控制excel的样式（颜色、字体、边框、居中等），则还需要安装xlsx-style和file-saver。
npm install --save xlsx-style有坑：报错Can‘t resolve ‘./cptable‘ in ‘xxx\node_modules_xlsx
// import XLSX from "xlsx"; //用这个导出会报错
const XLSX = require("xlsx");
import XLSXS from "xlsx-style";
import FileSaver from "file-saver";
export function exportExcel() {
// 需要导出的数据
let excelData = [
["幼儿园课表", null, null, null], // 标题
["序号", "课程名称", "教师名称", "上课地点"], // 表头
["11.1234", "11,211.1234", "11.1234", "操场"],
["11.1234", "11,211.1234", "11.1234", "操场"],
["11.1234", "11,211.1234", "11.1234", "操场"],
["11.1234", "11,211.1234", "11.1234", "操场"],
["11.1234", "11,211.1234", "11.1234", "操场"],
];
// 导出的excel文件名
const filename = "幼儿园课程表.xlsx";
// Excel第一个sheet的名称
const ws_name = "Sheet1";
const wb = XLSX.utils.book_new();
const ws = XLSX.utils.aoa_to_sheet(excelData);
XLSX.utils.book_append_sheet(wb, ws, ws_name); // 将数据添加到工作薄
// 设置标题行单元格合并
// s即start, e即end, r即row, c即column
// 合并从--0行0列开始,到0行3列
ws["!merges"] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 3 } }];
// 设置单元格宽度
ws["!cols"] = [
{
wpx: 40,
},
{
wpx: 100,
},
{
wpx: 100,
},
{
wpx: 100,
},
];
/*
设置单元格其他样式
这里列举一部分,其他样式大同小异,自行网上搜索
*/
// 可以遍历全部单元格,进行样式设置
for (let i in ws) {
if (i === "B1") {
ws[i].s = {
// 字体
font: {
name: "仿宋",
sz: 14,
bold: true,
},
};
} else if (i === "B2") {
ws[i].s = {
// 居中
alignment: {
horizontal: "center",
vertical: "center",
wrapText: true,
},
};
} else if (i === "B3") {
ws[i].s = {
// 单元格边框
border: {
top: {
style: "thin",
},
bottom: {
style: "thin",
},
left: {
style: "thin",
},
right: {
style: "thin",
},
},
};
}
}
// 导出Excel, 注意这里用到的是XLSXS对象
let wbout = XLSXS.write(wb, {
bookType: "xlsx",
bookSST: false,
type: "binary",
});
FileSaver.saveAs(
new Blob([s2ab(wbout)], {
type: "application/octet-stream",
}),
filename
);
}
/**
* 工具方法
*/
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;
}
