时间戳

首页 > 解决方案 > 是否可以漂亮地打印 JSDOM 文档？

javascript - 是否可以漂亮地打印 JSDOM 文档？

问题描述

我正在研究在 NodeJS 应用程序中动态构建 HTML 输出文件。在开发过程中，我希望这个文件打印得很好，这样我就可以更好地检查输出。这是我到目前为止所得到的，它非常简单，因为我仍在弄清楚我想如何做到这一点：

const { JSDOM } = require('jsdom');

const dom = new JSDOM('<!DOCTYPE html><head /><body /></html>');
const document = dom.window.document;

const css = `
    .row {
        display: flex;
        flex-direction: row;
    }

    .col {
        display: flex;
        flex-direction: column;
    }
`;

const createElement = ({ tagName, textContent }) => {
    const elem = document.createElement(tagName);
    elem.textContent = textContent;
    return elem;
};

document.head.appendChild(createElement({ 
    tagName: 'title', 
    textContent: 'Shopping List'
}));
document.head.appendChild(createElement({
    tagName: 'style',
    textContent: css
}));

console.log(dom.serialize()); // TODO delete this

如您所见，我正在记录 dom.serialize() 的输出，它为我提供了使用 JS 代码构建的 HTML 的字符串版本。问题是，这一切都是这样的：

<!DOCTYPE html><html><head><title>Shopping List</title><style>
    .row {
        display: flex;
        flex-direction: row;
    }

    .col {
        display: flex;
        flex-direction: column;
    }
</style></head><body></body></html>

唯一的换行符来自我添加的文字 CSS。我想要的是以一种有效地漂亮打印它的方式序列化和打印这一切，即包括换行和缩进。这仅用于开发，因此我可以在调试时更轻松地读取输出。

标签： javascriptnode.jsjsdom

解决方案

你可以使用一个名为pretty的 npm 包。

var pretty = require('pretty');

pretty(STRING_OF_HTML);

前

<!DOCTYPE html> <html lang="en"> <head> 
<meta charset="UTF-8"> <title>Home</title> 
</head> <body> This is content. </body> </html>

后

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Home</title>
  </head>
  <body>
    This is content.
  </body>
</html>

推荐阅读