如何计算给定页面大小可以容纳多少行(或记录)

本文关键字：多少 记录 计算 何计算 | 更新日期: 2023-09-27 18:00:06

我的问题是计算能够适应给定页面大小（以英寸为单位）的数据（字符串）。

我有一个应用程序，它在不使用任何报告控件的情况下创建普通的HTML报告。现在我必须在这个报告中提供分页支持。报告本质上是动态的，即列是在运行时决定的。

根据页面宽度的不同，我希望将列换行。例如，如果页面宽度为8"，我只想在第一行中显示前'n'列，其余列可以显示在第二行（如果需要，可以显示更多行）。为此，我需要计算8"宽的行中可以容纳多少数据。

类似地，我想计算可以适应给定页面高度的数据的高度。

总之，我如何计算给定页面大小中可以容纳多少数据（以英寸为单位）。

注意：计算还应该考虑字体，因为它是在运行时决定的。

如何计算给定页面大小可以容纳多少行(或记录)

我编写了一个函数，通过将跨度添加到DOM中检查OffsetWidth，然后再次删除它，来获得浏览器所呈现的跨度的宽度。您可能会将该原则适用于其他html元素，尽管我怀疑沿着这条路走下去是否会非常有效。我的应用程序需要这个，我只使用它来查找字符串列表中最长的渲染像素宽度。如果我是你，我会考虑其他大桌子的方法。

尽管如此，以下是功能：

function GetTextWidth(text, font, fontSize) {
    var size = 0;
    var spanWidthTestEle = document.createElement("span");
    spanWidthTestEle.id = "spanWidthTest";
    spanWidthTestEle.style.fontFamily = font;
    spanWidthTestEle.style.fontSize = fontSize;
    spanWidthTestEle.innerText = text;
    document.body.appendChild(spanWidthTestEle);
    var spanWidthTest = document.getElementById("spanWidthTest");
    size = spanWidthTest.offsetWidth;
    document.body.removeChild(spanWidthTest);
    return size;
}
相关文章：