vue使用xlsx、xlsx-style和fileSaver导出excel表格

本文引用
xlsx-style坑记录
Vue使用xlsx和xlsx-style纯前端导出带样式的Excel
vue导出Excel表格,报错utils of undefined 是版本原因

前期准备工作

• 安装xlsx npm i -S xlsx
• 安装xlsx-style npm i -S xlsx-style
• 安装fileSaver npm i -S file-saver

过程中遇到的报错

这里的报错就我遇到的来说一说吧

utils of undefined

需要切换一下xlsx版本 npm install --save xlsx@0.17.0

Can‘t resolve ‘./cptable‘ in ‘xxx\node_modules_xlsx

在vue.config.js中添加这样一串代码

  configureWebpack: {
    externals: {
      './cptable': 'var cptable'
    },
  },
1
2
3
4
5

这个问题的话，网上的博客还是很多的

Can’t resolve ‘fs’

这个问题困扰了我很久，只要在vue.config.js中进行配置即可，还是在刚刚创建的configureWebpack中添加

  configureWebpack: {
    resolve: {
      fallback: {
        fs: false
      }
    },
    externals: {
      './cptable': 'var cptable'
    },
  },
1
2
3
4
5
6
7
8
9
10

jszip not a constructor

需要在node_modules中找到相应的文件进行修改

node_modules\xlsx-style\xlsx.js (1339行左右)
将
if(typeof jszip === 'undefined') jszip = require('./js'+'zip').JSZip;
替换成
if(typeof jszip === 'undefined') jszip = require('./jszip.js');

1
2
3
4
5
6

---

以上的话是解决了我在使用这些插件时出现的问题，如果还有其他的问题，也欢迎补充

---

只使用xlsx也可以实现excel表格的导出，但是它只能做一些简单的单元格长宽的设置，以及单元格合并，其他复杂一点的样式，如居中、字体等就需要使用xlsx-style，在使用xlsx-style时还需要使用file-saver

只使用xlsx导出的案例

        exportExcel() {
            let data = [["这是一个表格"], ["时间", "姓名", "地址"]];
            this.tableData.forEach(r => {
                let rowData = [];
                rowData = [r.date, r.name, r.address]
                data.push(rowData)
            })  // 处理数据

            let ws = XLSX.utils.aoa_to_sheet(data);  // 将数据放到放到表格中

            ws['!merges'] = [XLSX.utils.decode_range('A1:C1')] // 合并单元格
            ws['!cols'] = [{ // 设置单元格宽度
                wpx: 120
            }, {
                wpx: 100
            }, {
                wpx: 100
            }]
            ws["!rows"]=[{ // 设置单元格高度
                hpx:50
            }]
            let wb = XLSX.utils.book_new()
            XLSX.utils.book_append_sheet(wb, ws, "sheet1")
            XLSX.writeFile(wb, "表格下载.xlsx") // 导出
       }
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

这样一个使用xlsx导出excel表格的方法就定义好了

使用xlsx、xlsx-style、file-saver

        exportExcel() {
            let data = [["这是一个表格"], ["时间", "姓名", "地址"]];
            this.tableData.forEach(r => {
                let rowData = [];
                rowData = [r.date, r.name, r.address]
                data.push(rowData)
            })  // 处理数据

            let ws = XLSX.utils.aoa_to_sheet(data);  // 将数据放到放到表格中

            ws['!merges'] = [XLSX.utils.decode_range('A1:C1')] // 合并单元格
            ws['!cols'] = [{ // 设置单元格宽度
                wpx: 120
            }, {
                wpx: 100
            }, {
                wpx: 100
            }]
            ws["!rows"]=[{ // 设置单元格高度
                hpx:50
            }]
            for (let key in ws) {
                if (ws[key] instanceof Object) {
                    ws[key].s = {
                        alignment: {
                            horizontal: 'center', // 水平居中
                            vertical: 'center' // 垂直居中
                        },
                        font: {
                            sz: 10, // 字号
                            name: '宋体' // 字体
                        },
                        border: {  // 边框
                            top: {
                                style: 'thin'
                            },
                            bottom: {
                                style: 'thin'
                            },
                            left: {
                                style: 'thin'
                            },
                            right: {
                                style: 'thin'
                            }
                        }
                    }
                }
            }
            let wb = XLSX.utils.book_new()
            XLSX.utils.book_append_sheet(wb, ws, "sheet1")
            // 导出Excel, 注意这里用到的是XLSXS对象
            let wbout = XLSXS.write(wb, {
                bookType: 'xlsx',
                bookSST: false,
                type: 'binary'
            })
            FileSaver.saveAs(
                new Blob([this.s2ab(wbout)], {
                    type: 'application/octet-stream'
                }),
                "表格下载.xlsx"
            )
        },
        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
        },
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

另外使用xlsx-style还可以设置单元格的其他的格式，可以参考这篇文章，很全。
JavaScript导出excel文件，并修改文件样式

---

在导出的过程中，使用xlsx-style时出现了很多的问题，解决起来的确很头疼，不过好像听说这个插件已经是五六年前的了，很久没有更新过了，最近再看看还有没有其他好的方法用用吧