iview表格导出Excel时遇到的问题:导出.xls文件&导出的表格部分列错位

有一项目中有将表格内容导出到Excel表格的需求,ivew中table中有exportCsv方法可以直接使用(下图从官网组件API文档中截取),但导出来是.csv后缀名的文件,虽然表现出来也差不多,但咱需求文档上明确写的需要.xls,所以做了些改动。

iview表格导出Excel时遇到的问题:导出.xls文件&导出的表格部分列错位_第1张图片

excel中后缀为csv和xls区别:

iview表格导出Excel时遇到的问题:导出.xls文件&导出的表格部分列错位_第2张图片

导出.xls文件

源码中默认导出的的是.csv文件,想要导出.xls文件,只要在源码中加一个导出.xls文件的选择项就好

更改文件:

node_modules/iview/dist/iview.js:

我这边是新增了一个exportXls方法,内容除".xls"后缀名以外和exportCsv方法一致

iview表格导出Excel时遇到的问题:导出.xls文件&导出的表格部分列错位_第3张图片

node_modules/iview/src/components/table/table.vue:

iview表格导出Excel时遇到的问题:导出.xls文件&导出的表格部分列错位_第4张图片

导出的表格部分列错位

表现为(模拟数据):

第一行第二行的内容列一部分跑到了后面的列里,并把后面列的内容挤跑了


iview表格导出Excel时遇到的问题:导出.xls文件&导出的表格部分列错位_第5张图片

而我原本的数据是(模拟数据,以便理解):

iview表格导出Excel时遇到的问题:导出.xls文件&导出的表格部分列错位_第6张图片

原因如下红框部分

iview表格导出Excel时遇到的问题:导出.xls文件&导出的表格部分列错位_第7张图片

解决方案:

给初始数据的英文符号“,”替换成中文符号“,”

content = content.replace(/\,/g, ',');

你可能感兴趣的:(iview表格导出Excel时遇到的问题:导出.xls文件&导出的表格部分列错位)