celsius的个人博客

星星之火可以燎原

0%

vue纯前端实现json导出为excel文件(xlsx.full.min.js)

废话不多说,能实现导出为 excel 的库也不少,这次我用的是 xlsx.full.min.js(git 地址:https://github.com/SheetJS/sheetjs)
在 utils 里简单封装一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import * as XLSX from "xlsx";
/**
* 字符串转字符流
*/
const s2ab = (s: string = "") => {
//字符串转字符流
let buf = new ArrayBuffer(s.length);
let view = new Uint8Array(buf);
for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
return buf;
};
/**
* 将指定的自然数转换为26进制表示。映射关系:[0-25] -> [A-Z]
*/
const getCharCol = (n: number) => {
let s = "",
m = 0;
while (n > 0) {
m = (n % 26) + 1;
s = String.fromCharCode(m + 64) + s;
n = (n - m) / 26;
}
return s;
};
/**
* 将json转换为excel格式流并使用a标签点击下载
*/
const downloadExl = (json: any, type: any) => {
let tmpdata: any = json[0];
json.unshift({});
let keyMap: string[] = []; //获取keys
//keyMap =Object.keys(json[0]);
for (let k in tmpdata) {
keyMap.push(k);
json[0][k] = k;
}
tmpdata = [];
json
.map((v: { [x: string]: any }, i: number) =>
keyMap.map((k, j) =>
Object.assign(
{},
{
v: v[k],
position: (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1),
}
)
)
)
.reduce((prev: string | any[], next: any) => prev.concat(next))
.forEach(
(v: { position: string | number; v: any }, i: any) =>
(tmpdata[v.position] = {
v: v.v,
})
);
let outputPos = Object.keys(tmpdata); //设置区域,比如表格从A1到D10
let tmpWB = {
SheetNames: ["mySheet"], //保存的表标题
Sheets: {
mySheet: Object.assign(
{},
tmpdata, //内容
{
"!ref": outputPos[0] + ":" + outputPos[outputPos.length - 1], //设置填充区域
}
),
},
};
let tmpDown: any = "";
tmpDown = new Blob(
[
s2ab(
XLSX.write(
tmpWB,
{
bookType: "xlsx",
bookSST: false,
type: "binary",
} //这里的数据是用来定义导出的格式类型
)
),
],
{
type: "",
}
); //创建二进制对象写入转换好的字节流
let href = URL.createObjectURL(tmpDown); //创建对象超链接
let _a = document.createElement("a");
_a.setAttribute("href", href);
_a.setAttribute("download", "这里是excel文件名.xlsx");
document.body.appendChild(_a);
_a.click();
setTimeout(() => {
//延时释放
URL.revokeObjectURL(tmpDown); //用URL.revokeObjectURL()来释放这个object URL
}, 100);
};
export { downloadExl };

在页面使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { downloadExl } from "@/utils/util";
let json = [
{
提交时间: "2021-05-19 14:57:59",
用户名称: "张大毛",
编号: "1",
更新时间: "2021-05-19 14:57:59",
},
{
提交时间: "2021-05-17 11:32:48",
用户名称: "王德发",
编号: "2",
更新时间: "2021-05-17 11:32:48",
},
];
downloadExl(json);

然后就会直接调起下载
冷吃兔
打开看看
可以,完美
可以,非常完美
各位看官点个赞啦