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

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

简言之，就是这个项目

我正在构建一个应用程序，将HTML样式设置为类似PDF的样式，然后使用该HTML使用Aspose创建PDF

为什么选择SSR？

浏览器以外的其他平台需要SSR来获取HTML，然后将其呈现为PDF。也就是说，我有一个Api，可以调用SSR应用程序，获取完整的HTML并将其打印成PDF

为什么有棱角？

整个项目是基于Angular构建的，我需要能够重用使PDF看起来像HTML的组件，以便在HTML中直接编辑

现在您已经掌握了最新的速度，回到手头的问题上来

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

当通过浏览器导航到SSR应用程序时，一切都很好，因为我能够使用DOM并查询每个模板以获得元素的高度。但是，当通过Api或邮递员访问应用程序时，我得到了HTML，但处理节位置的逻辑被破坏，因为它没有高度-，因此我需要在不使用DOM的情况下获取/计算每个模板的高度

到目前为止我所发现的

我对SSR很陌生，但所有操作DOM或只有浏览器引擎才有的东西似乎都不是可行的方法-因此在这种情况下不能使用

@ViewChild

、

ngAfterViewInit

、

setTimeout

和其他DOM Api或功能。我需要能够在生命周期步骤NgOnInit（最晚）预渲染每个模板

使用像或这样的库可以从我提供的数据中很好地呈现HTML，但是我只获取HTML-根本没有维度

我还尝试在Mustach或Handlebar创建元素并将其添加到新创建的

div

之后使用

createElement（'div'）

。这会将元素fine添加到

div

的

childnodes

中，但不会计算高度

也许我在使用这些库时遗漏了什么

这可能吗？

到目前为止，我的印象是，如果不进入DOM，就不可能从代码中获取元素维度

无头镀铬？

运行无头Chrome是创建某种虚拟DOM的唯一方法，我可以从代码中操纵它吗

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

---

提前谢谢

您描述的问题是，只有在元素插入DOM之后，才可以计算DOM元素的实际高度

例如，如果编译车把模板并插入使用

createElement（'div'）

创建的新

div

元素，则实际高度仍然为0。 您需要将

div

附加到当前现有的DOM元素，以计算其高度

我经常使用的一种解决方法是将您想要知道其高度的组件加载到页面底部（或用户当前未看到的位置），计算其高度，然后将其删除

---

所有的过程几乎都是瞬间完成的，可以让您获得元素的实际高度

您描述的问题是，只有在元素插入DOM之后，才可以计算DOM元素的实际高度

例如，如果编译车把模板并插入使用

createElement（'div'）

创建的新

div

元素，则实际高度仍然为0。 您需要将

div

附加到当前现有的DOM元素，以计算其高度

我经常使用的一种解决方法是将您想要知道其高度的组件加载到页面底部（或用户当前未看到的位置），计算其高度，然后将其删除

---

所有的过程几乎都是瞬间完成的，可以让您获得元素的实际高度

解决方法是使用无头镀铬-至少在我的情况下是这样。 如果没有DOM，则无法渲染高度，如果没有浏览器引擎来渲染高度，则需要启动一个可以渲染高度的引擎，即Headless Chrome

---

对我来说，使用是最简单的方法。

解决这个问题的办法是使用无头铬-至少在我的情况下是这样。 如果没有DOM，则无法渲染高度，如果没有浏览器引擎来渲染高度，则需要启动一个可以渲染高度的引擎，即Headless Chrome

---

对我来说，使用是最简单的方法。

谢谢你的评论，Greedo，但我没有“当前现有的DOM元素”来执行你的建议。不管是谁-我们采用了无头镀铬，效果完美。：）感谢您的评论，Greedo，但我没有“当前现有的DOM元素”来执行您的建议。不管是谁-我们采用了无头镀铬，效果完美。：）