首頁 web前端 js教程 詳解將頁面table內容與樣式另存成excel文件

詳解將頁面table內容與樣式另存成excel文件

Sep 14, 2017 am 11:54 AM
table 內容 樣式

在项目做完之余,测试最近做的一个论坛,其中有个导出功能,发现点击网页导出按钮之后,将页面的table内容另存为excel文件后,却发现无法保存表格样式,经过问题分析之后找到根本原因,下面小编就把我的实现思路给大家分享如下:

问题描述:

问题分析过程:

   1.table表格用class,而不是style。导出时并没有导出class定义,若换成style,将颜色样式直接写在style中,就会导出样式。

    style是样式,在HTML中用这个来标明属性样式,是css中的内容,而class是类,申明和定义里面的内容,导出页面时并不会导出定义即class所定义的样式。

  2.将类定义放到table中也可以导出样式

下面通过两种方案解决此问题。

处理方案一:

   将class="${getClass()}"换成style="color:${getStyle()};"

补充:

 $("#export").click(function () {
 saveAsExcel($("h3").text(), $("#table").html().replace(/( )+/gi,""));
 });
登入後複製

其中excel只识别table,使用saveAsExcel方法自动另存时,class定义保存不了;如果手工拷贝粘贴到excel时,class定义就能保存了。

主要还是手工与自动拷贝粘贴问题

处理方案二:

将在<head><style></style></head>中定义的类移动到<table></table>之间即可。类定义样式的位置问题

以上是詳解將頁面table內容與樣式另存成excel文件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
4 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

macOS:如何更改桌面小工具的顏色 macOS:如何更改桌面小工具的顏色 Oct 07, 2023 am 08:17 AM

在macOSSonoma中,小工具不必隱藏在螢幕外,也不必像在先前版本的Apple的macOS中那樣在通知中心面板中被遺忘。相反,它們可以直接放置在Mac的桌面上–它們也是互動的。不使用時,macOS桌面小工具會採用單色樣式淡入背景,從而減少干擾,並允許您專注於活動應用程式或視窗中手邊的任務。但是,當您單擊桌面時,它們將恢復為全彩色。如果您喜歡單調的外觀,並且希望在桌面上保留這一方面的統一性,那麼有一種方法可以使其永久化。以下步驟示範了它是如何完成的。開啟“系統設定”應用

如何在iPhone上啟用「敏感內容警告」並了解其功能 如何在iPhone上啟用「敏感內容警告」並了解其功能 Sep 22, 2023 pm 12:41 PM

特別是在過去十年中,行動裝置已成為與朋友和家人分享內容的主要方式。易於存取、易於使用的介面以及即時捕獲圖像和視訊的能力使其成為製作和共享內容的絕佳選擇。但是,惡意使用者很容易濫用這些工具來轉發不需要的敏感內容,這些內容可能不適合查看並未經您的同意。為了防止此類情況發生,iOS17中引入了具有「敏感內容警告」的新功能。讓我們來看看它以及如何在iPhone上使用它。新的「敏感內容警告」是什麼,它是如何運作的?如上所述,敏感內容警告是一項新的隱私和安全功能,旨在幫助防止用戶查看敏感內容,包括iPhone

Microsoft Edge瀏覽器開啟是360導航怎麼改-更改開啟是360導航的方法 Microsoft Edge瀏覽器開啟是360導航怎麼改-更改開啟是360導航的方法 Mar 04, 2024 pm 01:50 PM

怎麼更改MicrosoftEdge瀏覽器打開是360導航的頁面呢?其實很簡單,那麼現在小編就和大家一起分享關於更改MicrosoftEdge瀏覽器打開是360導航頁面的方法,有需要的朋友可以來看看哦,希望可以幫助大家。開啟MicrosoftEdge瀏覽器。我們看到是下圖這種頁面。點擊右上角的三點圖示。點選“設定”。在設定頁面的左側欄裡點選「啟動時」。點選右側欄裡的圖中示意的三點(不要能點選「開啟新標籤頁」),然後點選編輯,將網址改成「0」(或其他無意義的數字)。然後點選「儲存」。接下來,選擇“

WordPress網頁錯位現象解決攻略 WordPress網頁錯位現象解決攻略 Mar 05, 2024 pm 01:12 PM

WordPress網頁錯位現象解決攻略在WordPress網站開發中,有時候我們會遇到網頁元素錯位的情況,這可能是由於不同裝置上的螢幕尺寸、瀏覽器相容性或CSS樣式設定不當所致。要解決這種錯位現象,我們需要仔細分析問題、找出可能的原因,並逐步進行除錯和修復。本文將分享一些常見的WordPress網頁錯位問題以及對應的解決攻略,同時提供具體的程式碼範例,幫助開

Cheat Engine如何設定中文? Cheat Engine設定中文方法 Cheat Engine如何設定中文? Cheat Engine設定中文方法 Mar 13, 2024 pm 04:49 PM

  CheatEngine是一款遊戲編輯器,能夠對遊戲的記憶體進行編輯修改。但是它的預設語言是非中文的,對於很多小夥伴來說比較不方便,那麼CheatEngine怎麼設定中文呢?今天小編就跟大家詳細介紹一下CheatEngine設定中文的方法,希望可以幫助到你。  設定方法一  1、雙擊開啟軟體,點選左上角的「edit」。  2、接著點選下方選項清單中的「settings」。  3、在開啟的視窗介面中,點選左側欄中的“languages”

CSS網頁背景圖設計:創造各種背景圖樣式和效果 CSS網頁背景圖設計:創造各種背景圖樣式和效果 Nov 18, 2023 am 08:38 AM

CSS網頁背景圖設計:建立各種背景圖樣式和效果,需要具體程式碼範例摘要:在網頁設計中,背景圖是一種重要的視覺元素,它可以有效地增強頁面的吸引力和可讀性。本文將介紹一些常見的CSS背景圖設計樣式和效果,並提供對應的程式碼範例。讀者可以根據自己的需求和喜好來選擇和應用這些背景圖樣式和效果,以達到更好的視覺效果和使用者體驗。關鍵字:CSS,背景圖,設計樣式,效果,程式碼示

Microsoft Edge在哪設定顯示下載按鈕-Microsoft Edge設定顯示下載按鈕的方法 Microsoft Edge在哪設定顯示下載按鈕-Microsoft Edge設定顯示下載按鈕的方法 Mar 06, 2024 am 11:49 AM

大家知道MicrosoftEdge在哪設定顯示下載按鈕嗎?下文小編就帶來了MicrosoftEdge設定顯示下載按鈕的方法,希望對大家能夠有幫助,一起跟著小編來學習吧!第一步:先開啟MicrosoftEdge瀏覽器,點選右上角【...】標識,如下圖所示。步驟二:然後在彈出式選單中,點選【設定】,如下圖所示。第三步:接著點選介面左側【外觀】,如下圖所示。第四步:最後點選【顯示下載按鈕】右側按鈕,由灰變藍即可,如下圖所示。上面就是小編為大家帶來的MicrosoftEdge在哪設定顯示下載按鈕的

使用:nth-last-child(2)偽類選擇器選擇倒數第二個子元素的樣式 使用:nth-last-child(2)偽類選擇器選擇倒數第二個子元素的樣式 Nov 20, 2023 am 11:22 AM

使用:nth-last-child(2)偽類選擇器選擇倒數第二個子元素的樣式,需要具體程式碼範例在CSS中,偽類選擇器是一種非常強大的工具,可以用來選擇文件樹中特定的元素。其中之一就是:nth-last-child(2)偽類選擇器,它可以選擇倒數第二個子元素並對其套用樣式。首先,讓我們來建立一個範例HTML文檔,以便我們可以在其中使用這個偽類選擇器。以

See all articles