將頁(yè)面table內(nèi)容與樣式另存成excel文件的方法
在項(xiàng)目做完之余,測(cè)試最近做的一個(gè)論壇,其中有個(gè)導(dǎo)出功能,發(fā)現(xiàn)點(diǎn)擊網(wǎng)頁(yè)導(dǎo)出按鈕之后,將頁(yè)面的table內(nèi)容另存為excel文件后,卻發(fā)現(xiàn)無(wú)法保存表格樣式,經(jīng)過(guò)問(wèn)題分析之后找到根本原因,下面小編就把我的實(shí)現(xiàn)思路給大家分享如下:
問(wèn)題描述:
問(wèn)題分析過(guò)程:
1.table表格用class,而不是style。導(dǎo)出時(shí)并沒(méi)有導(dǎo)出class定義,若換成style,將顏色樣式直接寫在style中,就會(huì)導(dǎo)出樣式。
style是樣式,在HTML中用這個(gè)來(lái)標(biāo)明屬性樣式,是css中的內(nèi)容,而class是類,申明和定義里面的內(nèi)容,導(dǎo)出頁(yè)面時(shí)并不會(huì)導(dǎo)出定義即class所定義的樣式。
2.將類定義放到table中也可以導(dǎo)出樣式
下面通過(guò)兩種方案解決此問(wèn)題。
處理方案一:
將class="${getClass()}"換成style="color:${getStyle()};"
補(bǔ)充:
$('#export').click(function () { saveAsExcel($('h3').text(), $('#table').html().replace(/( )+/gi,'')); });
其中excel只識(shí)別table,使用saveAsExcel方法自動(dòng)另存時(shí),class定義保存不了;如果手工拷貝粘貼到excel時(shí),class定義就能保存了。
主要還是手工與自動(dòng)拷貝粘貼問(wèn)題
處理方案二:
將在<head><style></style></head>中定義的類移動(dòng)到<table></table>之間即可。類定義樣式的位置問(wèn)題
以上內(nèi)容就是本文的全部?jī)?nèi)容,希望大家喜歡。
- JavaScript將Table導(dǎo)出到Excel實(shí)現(xiàn)思路及代碼
- C#操作EXCEL DataTable轉(zhuǎn)換的實(shí)例代碼
- C#將html table 導(dǎo)出成excel實(shí)例
- DataTable數(shù)據(jù)導(dǎo)出成Excel文件的小例子
- Asp.net中DataTable導(dǎo)出到Excel的方法介紹
- 通過(guò)table標(biāo)簽,PHP輸出EXCEL的實(shí)現(xiàn)方法
- js導(dǎo)出table到excel同時(shí)兼容FF和IE示例
- js導(dǎo)出table數(shù)據(jù)到excel即導(dǎo)出為EXCEL文檔的方法
- datatable生成excel和excel插入圖片示例詳解
- .Net讀取Excel 返回DataTable實(shí)例代碼
- npoi2.0將datatable對(duì)象轉(zhuǎn)換為excel2007示例
- asp.net中Table生成Excel表格的方法
- C#使用oledb讀取excel表格內(nèi)容到datatable的方法
相關(guān)文章
用js一次改變多個(gè)input的readonly屬性值的方法
這篇文章主要介紹了用js一次改變多個(gè)input的readonly屬性值的方法,需要的朋友可以參考下2014-06-06JS基于對(duì)象的鏈表實(shí)現(xiàn)與使用方法示例
這篇文章主要介紹了JS基于對(duì)象的鏈表實(shí)現(xiàn)與使用方法,結(jié)合實(shí)例形式分析了鏈表的原理及javascript定義與使用鏈表的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01js cookies實(shí)現(xiàn)簡(jiǎn)單統(tǒng)計(jì)訪問(wèn)次數(shù)
js cookies實(shí)現(xiàn)簡(jiǎn)單統(tǒng)計(jì)訪問(wèn)次數(shù)的實(shí)現(xiàn)代碼。主要是掌握js對(duì)cookies的操作。2009-11-11JS實(shí)現(xiàn)簡(jiǎn)單隨機(jī)3D骰子
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)單隨機(jī)3D骰子,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10微信小程序request請(qǐng)求封裝,驗(yàn)簽代碼實(shí)例
這篇文章主要介紹了微信小程序request請(qǐng)求封裝,驗(yàn)簽代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12javaScript函數(shù)中執(zhí)行C#代碼中的函數(shù)方法總結(jié)
這篇文章介紹了javaScript函數(shù)中執(zhí)行C#代碼中的函數(shù)方法總結(jié),有需要的朋友可以參考一下2013-08-08