解决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].replace(/"/g, '""')+'"'//成功 复制代码

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

![单元格内换行的]

![直接换行的]

差异一目了然，相差了一对字符传（心里中一万头草泥马奔腾而过，困扰我两天的问题，仍是别人帮忙解决的，看来本身还需加倍努力....）。 总结：写这篇文章主要的目的不是为了记忆"ivew导出表格的单元格换行须要加字符串的知识点"，这钟问题相信只要看过一次都能记住这个解决方法。这篇文章主要是为了记录解决问题的方式，以及如何借助一些工具去理解问题。