解決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導出表格的單元格換行須要加字符串的知識點"，這鐘問題相信只要看過一次都能記住這個解決方法。這篇文章主要是爲了記錄解決問題的方式，以及如何藉助一些工具去理解問題。