Question

我有一个奇怪的问题。如果已经被问到并回答了我的道歉......我认为我的一部分问题是我真的不知道究竟应该搜索什么，因为我甚至不知道正确的方法是什么！

我的网站包含包含产品评论的HTML网页。每篇评论都有大约15个标准文本字段，例如优势，弱点，摘要等。这些文本字段中的每一个通常与从一个评论到下一个评论的字数大致相同，但它们的长度差异为+/- 20 ％或者。现在，当我打印它们时，其中一些占用一页，其中一些占用两页。

我正在努力想出一个合适的方法来打印这些产品评论中的每一个，以便每个评论总是适合一张纸。我可以做一些假设，比如假设一定的纸张尺寸和方向。我想象的是，我的每个评论的文本字段（例如，优势）将在打印页面上有一个可以占用的特定“框”，并且我将有一些代码以编程方式调整字体大小或调整垂直行间距（或者只是截断文本并在末尾添加“...”），直到它适合“框”。

我只是在寻找关于这类事情最明智的方法的一些指示。例如，以下是我想到的一些随机想法：

1）在打印样式表中是否可以使用CSS来自动执行此类动态调整大小和/或截断？

2）我想在每个页面上都有一个按钮，上面写着“打印”，当点击它时会生成一个新页面，该页面具有完全不同的标记，该标记针对我正在尝试的内容进行了优化。这些页面中的所有数据都存储在数据库中，因此这是一种可接受的解决方案。如果我最终选择了这个选项，那么尝试使用HTML表格，div或其他东西来解决这个问题是否最明智？

4）我想知道我是否可以使用JavaScript进行程序化大小调整。是否有某种功能或库用于此类事物（计算一块文本需要多少空间）？如果是这样，这是实现我拍摄的相当可靠的方式吗？

5）以某种方式做我在服务器端尝试做的更好吗？我正在使用PHP，这有帮助。

6）如果所有其他方法都失败了，有没有办法以编程方式生成PDF页面服务器端，我可以根据我的单页要求进行布局？有没有一个很好的PHP库可以用于那种事情？

提前感谢任何建议和指示！正如你所知道的那样，我已经迷失在我应该开始的道路上了！

Answer 1

css3引入符合您需求的vw and vh units。

下行支持仅为ie9+

Answer 2

不使用CSS3你可以：

1）使用javascript

将原始字体大小存储在变量中

2）通过Javascript获取文档高度

var body = document.body,
html = document.documentElement;

var height = Math.max( body.scrollHeight, body.offsetHeight, 
                   html.clientHeight, html.scrollHeight, html.offsetHeight );

3）检查以确保您的身高足够小，以便在一页上打印

4）如果没有启动循环：

a）将每个字体大小减少1

b）再次检查身高

c）如果好，那就做window.print（）

d）如果在循环中仍有太多高度继续

5）将所有字体大小设置回原始值。

希望这有帮助。

:)大卫

以编程方式将“可变长度”HTML内容“拟合”到单个打印页面？

2 个答案: