Puede usar document.documentElement.outerHTML para serializar un documento en una cadena HTML.
Sin embargo, si pegamos el resultado en un archivo e intentamos representarlo como HTML, no siempre será fiel a la visualización original (ignorando elementos verdaderamente dinámicos como el canvas ). ¿Por qué? Cualquier sitio web que use CSS en JS tendrá etiquetas de estilo vacías que afectarán el estilo de la página web. Estas hojas de estilo se manipulan mediante la API de CSSOM .
Quiero serializar páginas web y al mismo tiempo incluir hojas de estilo que se manipulan programáticamente. Cuál sería la mejor forma de hacer esto?
Mi solución:
export function getCSSOMStyles(): string { const { styleSheets } = document; const CSSOMSheets = Array.from(styleSheets).filter((sheet) => { const hasHref = Boolean(sheet.href); //@ts-expect-error - too hard to Typescriptify const hasStylesInDOM = (sheet.ownerNode?.innerText?.length || 0) > 0; return sheet.cssRules && !hasHref! && !hasStylesInDOM; }); const CSSOMStylesText = CSSOMSheets.map((sheet) => Array.from(sheet.cssRules) .map((rule) => rule.cssText) .join("") ).join(""); return CSSOMStylesText; } export const injectCSSOMStyles = (document: Document) => { const styles = getCSSOMStyles(); if (styles.length === 0) return; const styleSheet = document.createElement("style"); // TODO: Why is this deprecated? styleSheet.type = "text/css"; const stylesText = document.createTextNode(getCSSOMStyles()); styleSheet.appendChild(stylesText); document.head.appendChild(styleSheet); }; export const serializeCSSInJSStyles = injectCSSOMStyles;