sheetJs / xlsx-js-style 纯前端实现导出 excel 表格及自定义单元格样式 ...

---

一、安装

• xlsx 地址：https://www.npmjs.com/package/xlsx
  
• SheetJs 地址：https://docs.sheetjs.com/docs/
  
• xlsx-js-style 地址：https://www.npmjs.com/package/xlsx-js-style
  

1. npm install xlsx-js-style

复制代码

二、创建根本工作表

1. <script lang="ts" setup>
2. import { utils, writeFileXLSX } from 'xlsx'
4. const list = [
5.     { Name: 'Bill Clinton', Index: 42 },
6.     { Name: 'GeorgeW Bush', Index: 43 },
7.     { Name: 'Barack Obama', Index: 44 },
8.     { Name: 'Donald Trump', Index: 45 },
9.     { Name: 'Joseph Biden', Index: 46 },
10. ]
12. const exportFile = () => {
13.     // 创建一个工作簿 workbook
14.     const workBook = utils.book_new()
15.     // 创建工作表 worksheet
16.     // json_to_sheet         是将【由对象组成的数组】转化成sheet
17.     // aoa_to_sheet          是将【一个二维数组】转化成 sheet
18.     // table_to_sheet          是将【table的dom】直接转成sheet
19.     // 这里我们使用 json_to_sheet
20.     const workSheet = utils.json_to_sheet(list)
21.     // 将工作表放入工作簿中
22.     // utils.book_append_sheet(workbook, worksheet, name, true);
23.     utils.book_append_sheet(workBook, workSheet, 'Data')
24.     // 生成数据保存
25.     writeFileXLSX(workBook, `SheetJSVueAoO.xlsx`, {
26.         bookType: 'xlsx',
27.     })
28. }
29. </script>
31. <template>
32.     <div>
33.         <button @click="exportFile">创建工作表</button>
34.     </div>
35. </template>

复制代码

三、设置单元格宽度/高度/隐藏单元格

• !cols 设置列宽
  cols 为一个对象数组，依次表现每一列的宽度
  wpx 字段表现以像素为单元，wch 字段表现以字符为单元
  hidden 如果为真，则隐藏该列
  
• !rows 设置行高
  rows 为一个对象数组，依次表现每一行的高度
  

1. <script lang="ts" setup>
2. import { utils, writeFileXLSX } from 'xlsx-js-style'
4. const list = [
5.     {
6.         Name: 'Bill Clinton',
7.         Date: '2023-01-01',
8.         'Source category name': 'Excise Taxes',
9.         'Source subcategory name': 'Corporation Income Taxes',
10.     },
11.     {
12.         Name: 'GeorgeW Bush',
13.         Date: '2023-01-01',
14.         'Source category name': 'Excise Taxes',
15.         'Source subcategory name': 'Corporation Income Taxes',
16.     },
17.     {
18.         Name: 'Barack Obama',
19.         Date: '2023-01-01',
20.         'Source category name': 'Excise Taxes',
21.         'Source subcategory name': 'Corporation Income Taxes',
22.     },
23.     {
24.         Name: 'Donald Trump',
25.         Date: '2023-01-01',
26.         'Source category name': 'Excise Taxes',
27.         'Source subcategory name': 'Corporation Income Taxes',
28.     },
29.     {
30.         Name: 'Joseph Biden',
31.         Date: '2023-01-01',
32.         'Source category name': 'Excise Taxes',
33.         'Source subcategory name': 'Corporation Income Taxes',
34.     },
35. ]
37. const exportFile = () => {
38.     // 创建一个工作簿 workbook
39.     const workBook = utils.book_new()
40.     // 创建工作表 worksheet
41.     const workSheet = utils.json_to_sheet(list)
43.     // 设置列宽
44.     // cols 为一个对象数组，依次表示每一列的宽度
45.     // wpx 字段表示以像素为单位，wch 字段表示以字符为单位
46.     // hidden 如果为真，则隐藏该列
47.     workSheet['!cols'] = [
48.         { wpx: 100 },
49.         { wch: 50 },
50.         { width: 30 },
51.         { hidden: true },
52.     ]
54.     // 设置行高
55.     // rows 为一个对象数组，依次表示每一行的高度
56.     workSheet['!rows'] = [{ hpx: 30 }, { hpt: 50 }, { hidden: true }]
58.     // 将工作表放入工作簿中
59.     // utils.book_append_sheet(workbook, worksheet, name, true);
60.     utils.book_append_sheet(workBook, workSheet, 'Data')
61.     // 生成数据保存
62.     writeFileXLSX(workBook, `SheetJSVueAoO.xlsx`, {
63.         bookType: 'xlsx',
64.     })
65. }
66. </script>
68. <template>
69.     <div>
70.         <button @click="exportFile">设置单元格宽度/高度/隐藏</button>
71.     </div>
72. </template>

复制代码

四、分配数字格式

1. <script lang="ts" setup>
2. import { utils, writeFileXLSX } from 'xlsx-js-style'
4. const list = [
5.     { Name: 'Barack Obama', Taxes: 726223 },
6.     { Name: 'GeorgeW Bush', Taxes: 3.5 },
7.     { Name: 'Bill Clinton', Taxes: 45571 },
8.     { Name: 'Donald Trump', Taxes: 0.0219 },
9.     { Name: 'Donald Trump', Taxes: new Date() },
10.     { Name: 'Joseph Biden', Taxes: 666666 },
11. ]
13. const exportFile = () => {
14.     // 创建一个工作簿 workbook
15.     const workBook = utils.book_new()
16.     // 创建工作表 worksheet
17.     const workSheet = utils.json_to_sheet(list)
19.     // 分配数字格式
20.     workSheet['B3'].z = '"$"#,##0.00_);\\("$"#,##0.00\\)'
21.     workSheet['B4'].z = '#,##0'
22.     workSheet['B5'].z = '0.00%'
23.     workSheet['B6'].z = 'yyyy-mm-dd hh:mm:ss AM/PM'
24.     workSheet['B7'].z = '[Red](#,##0)'
26.     // 将工作表放入工作簿中
27.     // utils.book_append_sheet(workbook, worksheet, name, true);
28.     utils.book_append_sheet(workBook, workSheet, 'Data')
29.     // 生成数据保存
30.     writeFileXLSX(workBook, `SheetJSVueAoO.xlsx`, {
31.         bookType: 'xlsx',
32.     })
33. }
34. </script>
36. <template>
37.     <div>
38.         <button @click="exportFile">分配数字格式</button>
39.     </div>
40. </template>

复制代码

五、超链接

1. <script lang="ts" setup>
2. import { utils, writeFileXLSX } from 'xlsx-js-style'
4. const list = [
5.     { Name: 'https://sheetjs.com' },
6.     { Name: '电子邮箱' },
7.     { Name: '访问 C 盘文件' },
8.     { Name: '选中指定单元格' },
9.     { Name: '跳转指定 Sheet' },
10.     { Name: 'Joseph Biden' },
11. ]
13. const exportFile = () => {
14.     // 创建一个工作簿 workbook
15.     const workBook = utils.book_new()
16.     // 创建工作表 worksheet
17.     const workSheet = utils.json_to_sheet(list)
19.     // 链接 https://sheetjs.com
20.     workSheet['A2'].l = {
21.         Target: 'https://sheetjs.com',
22.         Tooltip: 'https://sheetjs.com',
23.     }
25.     // 链接电子邮箱
26.     workSheet['A3'].l = { Target: 'mailto:ignored@dev.null' }
28.     // 访问本地 C 盘文件
29.     workSheet['A4'].l = { Target: 'file:///C:/Users/pc/Downloads/receipts.xls' }
31.     // 选中指定单元格 A1:C5
32.     workSheet['A5'].l = { Target: '#A1:C5', Tooltip: '选中 A1:C5 ' }
34.     // 跳转指定 Sheet
35.     workSheet['A6'].l = { Target: '#Data2!A1:C6', Tooltip: 'Data2' }
37.     workSheet['A7'].l = { Target: '#SheetJSDN', Tooltip: 'Defined Name' }
39.     // 将工作表放入工作簿中
40.     // utils.book_append_sheet(workbook, worksheet, name, true);
41.     utils.book_append_sheet(workBook, workSheet, 'Data')
43.     // 创建工作表2 worksheet
44.     var worksheet2 = utils.aoa_to_sheet([['Same', 'Cross', 'Name']])
45.     utils.book_append_sheet(workBook, worksheet2, 'Data2')
47.     // 定义的名称, ref 选中的是当前超链接所在单元格位置
48.     workBook.Workbook = {
49.         Names: [{ Name: 'SheetJSDN', Ref: 'Data2!A1:A1' }],
50.     }
52.     // 生成数据保存
53.     writeFileXLSX(workBook, `SheetJSVueAoO.xlsx`, {
54.         bookType: 'xlsx',
55.     })
56. }
57. </script>
59. <template>
60.     <div>
61.         <button @click="exportFile">超链接</button>
62.     </div>
63. </template>

复制代码

• 鼠标移上去看到小手标识及提示语，点击即可看到对应的超链接效果；
  
  
  
  

六、单元格注释

1. <script lang="ts" setup>
2. import { utils, writeFileXLSX } from 'xlsx-js-style'
4. const list = [{ Name: 'Vue' }, { Name: 'React' }, { Name: 'Angular' }]
6. const exportFile = () => {
7.     // 创建一个工作簿 workbook
8.     const workBook = utils.book_new()
9.     // 创建工作表 worksheet
10.     const workSheet = utils.json_to_sheet(list)
12.     // 添加注释
13.     if (!workSheet.A2.c) workSheet.A2.c = []
14.     workSheet.A2.c.push({
15.         a: 'Vue',
16.         t: 'Vue 是一款用于构建用户界面的 JavaScript 框架',
17.     })
19.     if (!workSheet.A3.c) workSheet.A3.c = []
20.     // 如果设置为 true，则只有当用户将鼠标悬停在注释上时，注释才可见；
21.     workSheet.A3.c.hidden = true
22.     workSheet.A3.c.push({
23.         a: 'React',
24.         t: 'React 用于构建 Web 和原生交互界面的库',
25.     })
27.     if (!workSheet.A4.c) workSheet.A4.c = []
28.     // 如果设置为 true，则只有当用户将鼠标悬停在注释上时，注释才可见；
29.     workSheet.A4.c.hidden = true
30.     workSheet.A4.c.push({
31.         a: 'Angular',
32.         t: 'Angular 是一个应用设计框架与开发平台，旨在创建高效而精致的单页面应用',
33.     })
35.     // 将工作表放入工作簿中
36.     utils.book_append_sheet(workBook, workSheet, 'Data')
38.     // 生成数据保存
39.     writeFileXLSX(workBook, `SheetJSVueAoO.xlsx`, {
40.         bookType: 'xlsx',
41.     })
42. }
43. </script>
45. <template>
46.     <div>
47.         <button @click="exportFile">单元格注释</button>
48.     </div>
49. </template>

复制代码

七、公式

1. <script lang="ts" setup>
2. import { utils, writeFileXLSX, writeFile } from 'xlsx-js-style'
4. const list = [
5.     ['姓名', '语文', '数学', '英语', '总数', '最大值', '姓名去重'],
6.     ['张三', 80, 100, 100],
7.     ['李四', 90, 100, 80],
8.     ['李四', 85, 80, 100],
9.     ['王五', 100, 85, 90],
10.     ['张三', 90, 70, 90],
11.     ['赵六', 95, 90, 80],
12.     ['张三', 100, 80, 90],
13. ]
15. const exportSimpleFormula = () => {
16.     var ws = utils.aoa_to_sheet([
17.         [6], // A1
18.         [8], // A2
19.         [{ t: 'n', v: 3, f: 'SUM(A1,A2)' }], // SUM 函数
20.         [{ t: 'n', v: 3, f: 'CONCAT("concat：",A1,A2)' }], // CONCAT 函数
21.     ])
22.     var wb = utils.book_new()
23.     utils.book_append_sheet(wb, ws, 'Sheet1')
24.     writeFile(wb, 'SheetJSFormula.xlsx')
25. }
27. const exportFile = () => {
28.     // 创建一个工作簿 workbook
29.     const workBook = utils.book_new()
30.     // 创建工作表 worksheet
31.     const workSheet = utils.aoa_to_sheet(list)
33.     utils.sheet_set_array_formula(workSheet, 'E2:E8', 'B2:B8+C2:C8+D2:D8', true)
35.     list.forEach((e: (string | number)[], index: number) => {
36.         if (index > 0) {
37.             utils.sheet_set_array_formula(
38.                 workSheet,
39.                 `F${index + 1}`,
40.                 `MAX(B${index + 1},C${index + 1},D${index + 1})`,
41.                 true
42.             )
43.         }
44.     })
46.     utils.sheet_set_array_formula(
47.         workSheet,
48.         'G2:G8',
49.         '_xlfn.UNIQUE(A2:A8)',
50.         true
51.     )
53.     // 将工作表放入工作簿中
54.     utils.book_append_sheet(workBook, workSheet, 'Data')
56.     // 生成数据保存
57.     writeFileXLSX(workBook, `SheetJSVueAoO.xlsx`, {
58.         bookType: 'xlsx',
59.     })
60. }
61. </script>
63. <template>
64.     <div>
65.         <button @click="exportSimpleFormula">简单公式</button>
66.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
67.         <button @click="exportFile">数组公式</button>
68.     </div>
69. </template>

复制代码

• 给单元格增加公式，比如下面：求指定单元格中的最大值(MAX函数)；
  
• 在 “结果” 双击即可看到对应的公式，按 " ESC" 即可退出；
  
  
  
  

八、合并单元格

• !merges 设置单元格合并
  
• merges 为一个对象数组，每个对象设定了单元格合并的规则
  
• 方法一：通过 decode_range 设置范围合并单元格
  
• 方法二：手动设置 A1-C1 的单元格合并（s:开始位置, e:结束位置, r:行, c:列）
  

1. <script lang="ts" setup>
2. import { utils, writeFile } from 'xlsx-js-style'
4. const exportFile = () => {
5.     var ws = utils.aoa_to_sheet([
6.         // 特别注意合并的地方后面预留 2 个 null， 否则后面的内容（本例中是第四列其它信息）会被覆盖
7.         ['主要信息', null, null, '其它信息'],
8.         ['姓名', '性别', '年龄', '注册时间'],
9.         ['张三', '男', 18, new Date()],
10.         ['李四', '女', 22, new Date()],
11.     ])
12.     if (!ws['!merges']) ws['!merges'] = []
14.     // 方法一：通过 decode_range 设置范围合并单元格
15.     ws['!merges'].push(utils.decode_range('A1:C1'))
17.     // 方法二：手动设置 A1-C1 的单元格合并
18.     // merges 为一个对象数组，每个对象设定了单元格合并的规则
19.     // s:开始位置, e:结束位置, r:行, c:列
21.     // ws['!merges'] = [
22.     //     { s: { r: 0, c: 0 }, e: { r: 0, c: 2 } },
23.     // ]
25.     var wb = utils.book_new()
26.     utils.book_append_sheet(wb, ws, 'Sheet1')
27.     writeFile(wb, 'SheetJSVueAoO.xlsx')
28. }
29. </script>
31. <template>
32.     <div>
33.         <button @click="exportFile">合并单元格</button>
34.     </div>
35. </template>

复制代码

九、自定义单元格样式

1. <script lang="ts" setup>
2. import { utils, writeFile } from 'xlsx-js-style'
4. const header = [
5.     [[]], // 占位
6.     [
7.         {}, // 占位
8.         {
9.             v: `工厂统计表 ${'\n'}`,
10.             t: 's',
11.             s: {
12.                 font: {
13.                     sz: 15, //设置标题的字号
14.                     bold: true, //设置标题是否加粗
15.                     name: '宋体',
16.                 },
17.                 //设置标题水平竖直方向居中，并自动换行展示
18.                 alignment: {
19.                     horizontal: 'center',
20.                     vertical: 'center',
21.                     wrapText: true,
22.                 },
23.                 fill: {
24.                     fgColor: { rgb: '9FE3FF' },
25.                 },
26.             },
27.         },
28.     ],
29. ]
31. const info = [
32.     [
33.         null,
34.         {
35.             v: '                                                                                                                                                                                                                                                                                                                                                                                                    统计时间：2023/01/01 00:00',
36.             t: 's',
37.             s: {
38.                 fill: {
39.                     fgColor: { rgb: '9FE3FF' },
40.                 },
41.             },
42.         },
43.     ],
44.     [
45.         null,
46.         {
47.             v: '                                                                                                                                                                                                                                                                                                                                                                                                    统计维度：按月',
48.             t: 's',
49.             s: {
50.                 fill: {
51.                     fgColor: { rgb: '9FE3FF' },
52.                 },
53.             },
54.         },
55.     ],
56.     [
57.         null,
58.         {
59.             v: '                                                                                                                                                                                                                                                                                                                                                                                                    统计周期：2023/01/01 至 2023/01/01',
60.             t: 's',
61.             s: {
62.                 alignment: {
63.                     vertical: 'top',
64.                 },
65.                 fill: {
66.                     fgColor: { rgb: '9FE3FF' },
67.                 },
68.             },
69.         },
70.     ],
71. ]
73. const risk = [
74.     '序号',
75.     '险别',
76.     '企财险',
77.     '家财险',
78.     '机动车',
79.     '责任险',
80.     '意外险',
81.     '货运险',
82.     '保证险',
83.     '其他险',
84. ]
86. const data = risk.map((e) => {
87.     return {
88.         v: e,
89.         t: 's',
90.         s: {
91.             font: {
92.                 bold: true, //设置标题是否加粗
93.                 name: '宋体',
94.             },
95.             //设置标题水平竖直方向居中，并自动换行展示
96.             alignment: {
97.                 horizontal: 'center',
98.                 vertical: 'center',
99.                 wrapText: true,
100.             },
101.             border: {
102.                 top: { style: 'thin', color: { rgb: '000000' } },
103.                 bottom: { style: 'thin', color: { rgb: '000000' } },
104.                 left: { style: 'thin', color: { rgb: '000000' } },
105.                 right: { style: 'thin', color: { rgb: '000000' } },
106.             },
107.             fill: {
108.                 fgColor: { rgb: '9FE3FF' },
109.             },
110.         },
111.     }
112. })
114. const random = (min: number, max: number): number => {
115.     return Math.floor(Math.random() * (max - min)) + min
116. }
118. const dataArr = () => {
119.     const items: (Object | null)[][] = []
120.     Array.apply(null, { length: 18 } as any).map((e, index: number) => {
121.         const item: (Object | null)[] = [null]
122.         Array.apply(null, { length: 10 } as any).map((ele, idx: number) => {
123.             item.push({
124.                 v: idx === 0 ? index + 1 : random(1, 100000),
125.                 t: 's',
126.                 s: {
127.                     font: {
128.                         name: '宋体',
129.                     },
130.                     alignment: {
131.                         horizontal: 'center',
132.                         vertical: 'center',
133.                     },
134.                     border: {
135.                         top: { style: 'thin', color: { rgb: '000000' } },
136.                         bottom: { style: 'thin', color: { rgb: '000000' } },
137.                         left: { style: 'thin', color: { rgb: '000000' } },
138.                         right: { style: 'thin', color: { rgb: '000000' } },
139.                     },
140.                 },
141.             })
142.         })
143.         items.push(item)
144.     })
145.     return items
146. }
148. const exportFile = () => {
149.     var ws = utils.aoa_to_sheet([
150.         ...header,
151.         ...info,
152.         [null, ...data],
153.         ...dataArr(),
154.     ])
156.     // 合并单元格
157.     if (!ws['!merges']) ws['!merges'] = []
158.     ws['!merges'].push(utils.decode_range('B2:K2'))
159.     ws['!merges'].push(utils.decode_range('B3:K3'))
160.     ws['!merges'].push(utils.decode_range('B4:K4'))
161.     ws['!merges'].push(utils.decode_range('B5:K5'))
162.     ws['!merges'].push(utils.decode_range('A2:A5'))
163.     ws['!merges'].push(utils.decode_range('L2:L5'))
165.     // 设置列宽
166.     // cols 为一个对象数组，依次表示每一列的宽度
167.     if (!ws['!cols']) ws['!cols'] = []
168.     ws['!cols'] = [
169.         { wpx: 70 },
170.         { wpx: 118 },
171.         { wpx: 118 },
172.         { wpx: 118 },
173.         { wpx: 118 },
174.         { wpx: 118 },
175.         { wpx: 118 },
176.         { wpx: 118 },
177.         { wpx: 118 },
178.         { wpx: 118 },
179.         { wpx: 200 },
180.     ]
182.     // 设置行高
183.     // rows 为一个对象数组，依次表示每一行的高度
184.     if (!ws['!rows']) ws['!rows'] = []
185.     ws['!rows'] = [
186.         { hpx: 0 },
187.         { hpx: 40 },
188.         { hpx: 15 },
189.         { hpx: 15 },
190.         { hpx: 20 },
191.         { hpx: 20 },
192.         ...Array.apply(null, { length: dataArr().length } as any).map(() => {
193.             return { hpx: 20 }
194.         }),
195.     ]
196.     var wb = utils.book_new()
197.     utils.book_append_sheet(wb, ws, 'Sheet1')
198.     writeFile(wb, 'SheetJSVueAoO.xlsx')
199. }
200. </script>
202. <template>
203.     <div>
204.         <button @click="exportFile">单元格样式</button>
205.     </div>
206. </template>

复制代码

十、项目地址

项目地址：https://github.com/aibujin/xlsx-js-style

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。