解决iview中表格导出Excel时单元格内不换行的问题

最新推荐文章于 2023-08-14 11:13:59 发布

原创最新推荐文章于 2023-08-14 11:13:59 发布 · 3.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

JavaScript基础同时被 3 个专栏收录

10 篇文章

订阅专栏

vue-js

9 篇文章

订阅专栏

vue让前端开发更简单

9 篇文章

订阅专栏

本文详细介绍了在使用iview框架时，遇到的表格导出至Excel时单元格换行问题及解决方案。通过对数据进行特殊处理，实现了单元格内部换行效果。

分享一篇解决iview中表格导出Excel时单元格自动换行问题的文章

1.遇到问题的过程

最近的项目中有将表格内容导出到Excel表格的需求，正好我们使用的是iview框架。在iview中的table组件自带表格导出到Excel功能，于是开心的直接使用：

html:
<Table :columns="columns" :data="data" size="small" ref="myTable"></Table>
<Button type="primary" size="large" @click="exportData"> Export data</Button>

script:
exportData(){.
 this.$refs.myTable.exportCsv({
 filename: 'myTable'//导出Excel的文件名
 })
}

在我们在table中没有换行的数据时导出的表格很正常。当我们的某个单元格中数据过多需要换行时导出的表格出现了不是单元格内换行而是直接换到Excel表格的下一行。请看下图：
页面的Table数据
这里写图片描述
导出的Excel（不是单元格内换行….）

2.解决问题的过程

1）.找到问题原因
通过各种测试，找到问题的原因是由于server返回值中有换行字符”\n”。既然如此那将字符传”\n”替换为空：

//将表格数据过滤
exportData(){.
 this.$refs.myTable.exportCsv({
 filename: 'myTable',
 data: this.$formatExcelData(this.data)
 })
}
//公共方法
Vue.prototype.$formatExcelData = function (data) {
        var arr = []
        var self = this
        var dateArr = ['createDate', 'fixedDate', 'reportDate']
        _.forEach(data, function (v) {
            for (var k in v) {
              if (typeof v[k] == 'string') {
                    v[k] = v[k].replace(/\n/g, '')
                }
            }
            arr.push(v)
        })
        return arr
    }

改完后，重新测试。果不其然，表格中没有换行。但是，单元格内的换行也没有了。
结论：”\n”使Excel表格产生了换行，去除可以解决换行。但是我们需要一个方法能将”\n”作用于单元格内。
2）.寻找解决方法
操作系统问题
之前遇到过换行问题是由于操作系统不同导致的。尝试下将”\n”换成”\r\n”(window中换行)

v[k] = v[k].replace(/\n/g, '\r\n')//失败

模仿键盘操作
再想想，Excel中是alt+enter键换行单元格，但是如何表示。在Google上搜索相关，发现键盘的每个键对应着个ASCLL码，如果将”\n”替换成对应的ASCLL呢？
查询了键盘的ASCALL码Alt对应\0\x0A

v[k] = v[k].replace(/\n/g, '0x12 0x0A')//换到下一列了，感觉距离解决问题更近了（原因没有深究，有兴趣的可以去研究下）

3.问题解决

搞了一天问题仍没有解决，由于时间问题想想还是去请教下我们左C++的大佬吧（Excel核心就是C++）然后就解决了…
需要在我们传入的数据中加上”，如下：

v[k] = '"'+v[k]+'"'//成功

后面自己有空有思考了下这种问题如果借助一些工具应该能够更好的理解，那应该更有助于我来解决这个问题。此时想到了Notepad++这个神级编辑器。打开Notepad++，如下操作：
视图 =》显示符号 =》显示所有
将单元格内换行的单元内容复制到notepad++ 和我们自己生成的Excel中换行的相比较请看下图：

单元格内换行的
直接换行的
差别一目了然，相差了一对字符传（内心中一万头草泥马奔腾而过，困扰我两天的问题，还是别人帮忙解决的，看来自己还需加倍努力….）。
总结：写这篇文章主要的目的不是为了记忆”ivew导出表格的单元格换行需要加字符串的知识点”，这钟问题相信只要看过一次都能记住这个解决方法。这篇文章主要是为了记录解决问题的方式，以及如何借助一些工具去理解问题。
（ps：最近慢慢的将博客在掘金同步更新了，有同道的小伙伴可以去相互了解了解）