鍍金池/ 問答/HTML/ js實現(xiàn)多級表頭導(dǎo)出excel表格

js實現(xiàn)多級表頭導(dǎo)出excel表格

圖片描述

如圖,導(dǎo)出普通的表格是可以的,但是怎么導(dǎo)出這種多級表頭的表格,有沒有大神做過,給點思路

//數(shù)據(jù)格式
data(){
    return {
        tableData:[
        {
            text:"日期",
            dataIndex:""
        },
        {
            tierData:{
                        titleName:"地址",
                        content:[
                                {
                                    text:"省份",
                                    dataIndex:""
                                },
                                {
                                    text:"市區(qū)",
                                    dataIndex:""
                                }
                            ]
                        }
        }
        ]
    }
}
回答
編輯回答
愚念

下面是一個思路:

  1. 將你的數(shù)據(jù)用最簡單的 table 渲染出來,當(dāng)然合并表頭的邏輯可能要自己來一遍。ps: 建議不要用 UI 庫的 table 組件,因為 UI 庫的 table 組件為了實現(xiàn)其各種復(fù)雜的功能,往往會用多個 table 來做。
  2. 看一下 excellentexport 的文檔,使用它導(dǎo)出你渲染的 table 就可以了。

其實應(yīng)該沒有什么類型的表格是不能導(dǎo)出的,無論普通的行列表格還是表頭合并的表格,只要認(rèn)識到用 JS 生成的數(shù)據(jù)符合你要的目標(biāo)格式的規(guī)范,想導(dǎo)出啥都行。

2018年3月5日 13:23
編輯回答
互擼娃

你好,我是用js拼接的html模板,最后通過base64的Mime-Type來生成excel文件提供下載,你說的表頭情況,我也遇到類似的需求,橫向合并是通過colspan,縱向合并是rowspan,你可以先在html文件里模擬一個和需求結(jié)果一樣的table出來,然后處理到j(luò)s里應(yīng)該是沒問題的
圖片描述

2017年10月31日 15:07
編輯回答
裸橙

這個導(dǎo)出表頭功能你前端做了哪些處理呢,這個表頭后臺應(yīng)該有專門的類來做,我這邊做導(dǎo)出一般是調(diào)后臺生成好的表頭

2018年9月20日 01:43