如何在没有 DOM 的情况下获取元素高度？
How to get element height without DOM?
我正在构建一个 SSR angular 应用程序，我得到了一些处理不同模板位置的逻辑，但为了完成逻辑，我需要每个模板的元素高度而不使用 DOM.
项目，简而言之
我正在构建一个应用程序，其样式 HTML 看起来像 PDF，然后使用它 HTML 通过 Aspose 创建 PDF。
为什么要SSR？
除浏览器之外的其他平台需要 SSR 来获取 HTML，然后将其呈现为 PDF。也就是说，我有一个 Api 可以调用 SSR 应用程序，获取完整的 HTML 并将其打印成 PDF。
为什么Angular？
整个项目建立在 Angular 之上，我需要能够重用呈现 PDF 外观的组件 HTML 以便在 HTML 中直接编辑。
现在你已经跟上了速度，回到手头的问题
HTML由多个模板组成，高度根据添加的数据而变化。为了将部分向下（或向上）推送到相应的页面，我需要每个模板的高度（添加数据后）以了解内容是否超过页面高度。
当通过浏览器导航到 SSR 应用程序时，一切都呈现良好，因为我能够使用 DOM 并查询每个模板以获取元素的高度。但是，当通过 Api 或 Postman 访问应用程序时，我得到了 HTML 返回，但是处理部分放置的逻辑被破坏了，因为它没有高度 - SO 我需要 get/calculate 每个模板的高度 WITHOUT 使用 DOM.
到目前为止我发现了什么
我是 SSR 的新手，但所有操纵 DOM 或只有浏览器引擎拥有的东西似乎都不是可行的方法 - 所以 @ViewChild，ngAfterViewInit、setTimeout 和其他 DOM Api 或功能不能在这种情况下使用。我需要能够在生命周期步骤 NgOnInit 中预呈现每个模板（最迟）。
使用像 Mustache or HandleBars 这样的库可以根据我提供的数据呈现 HTML，但我 ONLY 得到 Html - 根本没有维度。
我也尝试过在 Mustache 或 HandleBars 创建元素后使用 createElement('div') 并将其添加到新创建的 div 中。这会将元素很好地添加到 div 的 childnodes，但不会计算高度。
也许我在使用这些库之一时遗漏了什么？
有可能吗？
到目前为止，我的印象是如果不输入 DOM?
就无法从代码中获取元素维度
无头Chrome?
运行 无头 Chrome 是创建我可以通过代码操作的某种虚拟 DOM 的唯一方法吗？
抱歉所有的文字和最少的代码，但这个问题更多的是关于我的方法应该如何以及我是否走错了方向。
提前致谢！
您描述的问题是 DOM 元素的实际高度只有在将元素插入 DOM 后才能计算。
例如，如果您编译 Handlebars 模板并插入使用 createElement('div') 创建的新 div 元素，实际高度仍为 0。
您需要将 div 附加到当前现有的 DOM 元素以计算其高度。
我经常使用的解决方法是将你想知道其高度的组件加载到页面底部（或用户当前未观看的位置），计算其高度，然后将其删除。
所有过程几乎是瞬时的，并允许您获得元素的实际高度。
解决这个问题的方法是使用 Headless Chrome - 至少在我的情况下是这样。
如果没有 DOM，您将无法渲染高度，如果您没有浏览器引擎来为您渲染它，您将需要启动一个引擎，即 Headless Chrome。
使用 Puppeteer 对我来说是最简单的方法。
我正在构建一个 SSR angular 应用程序，我得到了一些处理不同模板位置的逻辑，但为了完成逻辑，我需要每个模板的元素高度而不使用 DOM.
项目，简而言之
我正在构建一个应用程序，其样式 HTML 看起来像 PDF，然后使用它 HTML 通过 Aspose 创建 PDF。
为什么要SSR？
除浏览器之外的其他平台需要 SSR 来获取 HTML，然后将其呈现为 PDF。也就是说，我有一个 Api 可以调用 SSR 应用程序，获取完整的 HTML 并将其打印成 PDF。
为什么Angular？
整个项目建立在 Angular 之上，我需要能够重用呈现 PDF 外观的组件 HTML 以便在 HTML 中直接编辑。
现在你已经跟上了速度，回到手头的问题
HTML由多个模板组成，高度根据添加的数据而变化。为了将部分向下（或向上）推送到相应的页面，我需要每个模板的高度（添加数据后）以了解内容是否超过页面高度。
当通过浏览器导航到 SSR 应用程序时，一切都呈现良好，因为我能够使用 DOM 并查询每个模板以获取元素的高度。但是，当通过 Api 或 Postman 访问应用程序时，我得到了 HTML 返回，但是处理部分放置的逻辑被破坏了，因为它没有高度 - SO 我需要 get/calculate 每个模板的高度 WITHOUT 使用 DOM.
到目前为止我发现了什么
我是 SSR 的新手，但所有操纵 DOM 或只有浏览器引擎拥有的东西似乎都不是可行的方法 - 所以 @ViewChild，ngAfterViewInit、setTimeout 和其他 DOM Api 或功能不能在这种情况下使用。我需要能够在生命周期步骤 NgOnInit 中预呈现每个模板（最迟）。
使用像 Mustache or HandleBars 这样的库可以根据我提供的数据呈现 HTML，但我 ONLY 得到 Html - 根本没有维度。
我也尝试过在 Mustache 或 HandleBars 创建元素后使用 createElement('div') 并将其添加到新创建的 div 中。这会将元素很好地添加到 div 的 childnodes，但不会计算高度。
也许我在使用这些库之一时遗漏了什么？
有可能吗？
到目前为止，我的印象是如果不输入 DOM?
就无法从代码中获取元素维度无头Chrome?
运行 无头 Chrome 是创建我可以通过代码操作的某种虚拟 DOM 的唯一方法吗？
抱歉所有的文字和最少的代码，但这个问题更多的是关于我的方法应该如何以及我是否走错了方向。
提前致谢！
您描述的问题是 DOM 元素的实际高度只有在将元素插入 DOM 后才能计算。
例如，如果您编译 Handlebars 模板并插入使用 createElement('div') 创建的新 div 元素，实际高度仍为 0。
您需要将 div 附加到当前现有的 DOM 元素以计算其高度。
我经常使用的解决方法是将你想知道其高度的组件加载到页面底部（或用户当前未观看的位置），计算其高度，然后将其删除。
所有过程几乎是瞬时的，并允许您获得元素的实际高度。
解决这个问题的方法是使用 Headless Chrome - 至少在我的情况下是这样。 如果没有 DOM，您将无法渲染高度，如果您没有浏览器引擎来为您渲染它，您将需要启动一个引擎，即 Headless Chrome。
使用 Puppeteer 对我来说是最简单的方法。