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

问题描述 投票:0回答:1

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

该项目,简称

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

为什么要使用SSR?

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

为什么要成角度?

整个项目都是基于Angular构建的,我需要能够重新使用呈现类似于PDF的HTML的组件,以便在HTML中直接进行编辑。

现在您可以加快速度,回到眼前的问题

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

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

到目前为止我发现的内容

我在SSR方面还很陌生,但是所有操纵DOM或仅浏览器引擎拥有的东西似乎都不可行-因此@ViewChildngAfterViewInitsetTimeout和其他DOM Api或功能在这种情况下不能使用。我需要能够在生命周期步骤NgOnInit(最晚)中预渲染每个模板。

使用类似[[MustacheHandleBars的库,可以从我提供的数据中很好地渲染HTML,但我ONLY却得到了HTML-完全没有尺寸。

我还曾尝试在Mustache或HandleBars创建元素并将其添加到新创建的createElement('div')之后使用div。这会将元素精细添加到divchildnodes中,但不会计算高度。

也许我缺少其中一个使用这些库的东西?

甚至有可能吗?

到目前为止,我的印象是,如果不输入DOM就无法从代码中获取元素尺寸?

Headless Chrome?

运行无头Chrome是创建可通过代码操作的某种虚拟DOM的唯一方法吗?

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

提前感谢!

javascript html dom handlebars.js mustache
1个回答
0
投票
您描述的问题是,只有将元素插入DOM后,才可以计算DOM元素的实际高度。

例如,如果您编译了Handlebars模板,并插入了一个用div创建的新createElement('div')元素,则实际高度仍为0。您需要将div附加到当前现有的DOM元素上,以便计算其高度。

我经常使用的解决方法是,将要了解其高度的组件加载到页面底部(或用户当前未观看的位置),计算其高度,然后消除它。

所有过程几乎都是瞬时的,可让您获取元素的实际高度。

© www.soinside.com 2019 - 2024. All rights reserved.