如何在没有 DOM 的情况下获取元素高度？

Question

我正在构建一个 SSR angular 应用程序，我得到了一些处理不同模板位置的逻辑，但为了完成逻辑，我需要每个模板的元素高度而不使用 DOM。

项目简而言之

我正在构建一个应用程序，将 HTML 样式设置为看起来像 PDF，然后使用该 HTML 使用 Aspose 创建 PDF。

为什么是 SSR？

其他平台需要 SSR，而不是浏览器来获取 HTML，然后呈现为 PDF。即，我有一个能够调用 SSR 应用程序的 Api，获取完整的 HTML 并将其打印为 PDF。

为什么是角？

整个项目建立在 Angular 之上，我需要能够重用呈现类似 PDF 的 HTML 的组件，以便在 HTML 中直接编辑。

现在你已经跟上了，回到手头的问题

HTML 由多个模板组成，这些模板的高度根据添加的数据而变化。为了将部分向下（或向上）推送到相应的页面，我需要每个模板的高度（添加数据后）以了解内容是否超过页面高度。

当通过浏览器导航到 SSR 应用程序时，一切都呈现得很好，因为我能够利用 DOM 并查询每个模板来获取元素的高度。但通过API访问应用程序时，或邮差我得到的HTML回来，但逻辑处理该部分展示位置被打破，因为它好好尝试一下有高度- SO我需要获得/计算每个模板的高度WITHOUT使用DOM。

到目前为止我发现了什么

我是 SSR 的新手，但所有操作 DOM 或只有浏览器引擎才有的东西似乎都不是可行的方法 - 因此@ViewChild，在这种情况下不能使用ngAfterViewInit,setTimeout和其他 DOM Api 或功能。我需要能够在生命周期步骤 NgOnInit（最迟）预渲染每个模板。

使用像Mustache或HandleBars这样的库可以从我提供的数据中很好地呈现 HTML，但我只得到 Html - 根本没有尺寸。

我还尝试createElement('div')在 Mustache 或 HandleBars 创建元素并将其添加到新创建的div. 这将元素添加到div'schildnodes但它不计算高度。

也许我错过了使用这些库之一的东西？

甚至有可能吗？

到目前为止，我的印象是无法在不输入 DOM 的情况下从代码中获取元素尺寸？

无头铬？

运行 Headless Chrome 是创建一种我可以从代码操作的虚拟 DOM 的唯一方法吗？

抱歉所有的文字和最少的代码，但这个问题更多的是关于我的方法应该如何以及我是否朝着错误的方向前进。

提前致谢！

Answer 1

解决这个问题的方法是使用 Headless Chrome - 至少在我的情况下。如果没有 DOM，您将无法渲染高度，如果您没有浏览器引擎来为您渲染高度，则您需要启动一个可以的引擎 - 即 Headless Chrome。使用Puppeteer对我来说是最简单的方法。