有什么方法可以將使用Javascript部分樣式化的網頁轉換為純HTML和CSS？

Question

我有一個帶有HTML組件的React網頁，其中一些使用CSS樣式，而另一些則使用javascript（ Glamor ）樣式。 我想要的是帶有內聯CSS的HTML代碼，該代碼可以完全復制頁面的外觀以發送電子郵件。

我知道我可以使用Styliner這樣的包來內聯CSS，但是我想知道是否有可能以某種方式將js定義的Glamor樣式轉換為純CSS並進行內聯嗎？

如果不可能，那么我可能會探索另一條路線（對頁面進行PDF快照）。 感謝幫助！

Answer 1

您可以迭代document.styleSheets並在元素的style屬性處設置每個CSS規則。 當前未在document呈現CSS偽元素和在HTML元素的HTML style屬性處設置的類。

Answer 2

查看文檔，Glamour似乎使用該包在頁面的DOM中創建了樣式表。 因此，在對魅力的所有調用完成之后，遍歷文檔樣式表應該會得到結果。 瀏覽樣式表的鏈接示例並不完全需要。 這是一個將CSS定義獲取為可在瀏覽器中使用的文本的示例（從舊樣式代碼進行了修改）：

function cssStyleRules(sheets) {
    var sheet;
    var list;
    var rule;
    var text="";

    if(sheets) {
        for(var i = 0; sheet = sheets[i++]; ) {
            list = sheet.cssRules;
            for( var j = 0; j < list.length; ++j) {
                rule=list[ j];
                if(rule.type == 1)  { // styleRule
                    text += rule.cssText + '\n';
                }
            }
        }
    }
    return text;
}
var css = cssStyleRules( document.styleSheets);
// write css to a file in a headless browser

顯然，代碼需要在服務器上的無頭瀏覽器中運行，該瀏覽器將CSS文本寫入文件，然后再由Styleliner處理。

---

更新：

您已經評論到無法按預期從無頭瀏覽器獲取樣式表。 這可能是瀏覽器的錯誤，但是檢查了Glamor.md的實現 。

插入樣式表

我們在瀏覽器的樣式表上使用自己的抽象將規則插入dom。 這種抽象也適用於節點，讓我們可以做SSR之類的工作。它還根據環境使用不同的插入樣式模式，如此處所述

...但是鏈接是存根。 我建議進一步研究實現細節，特別是它們的含義“此抽象也適用於節點”。