javascript - 以编程方式将 "Fit"可变长度 HTML 内容添加到单个打印页面?

标签 javascript php jquery html css

我有个奇怪的问题。如果这个问题已经被询问和回答,我深表歉意......我认为我的部分问题是我真的不知道我应该搜索什么,因为我什至不知道正确的方法是什么!

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

我正在尝试想出一种体面的方式来打印这些产品评论中的每一个,以便每一个总是适合一张纸。我可以做一些假设,例如假设特定的纸张尺寸和方向。我想象的是,我的评论的每个文本字段(例如优势)在打印页面上都会有一个特定的“框”,它可以占据并且我会有一些代码以编程方式调整字体大小或调整垂直行间距(或者可能只是 chop 文本并在末尾添加“...”)直到它适合“框”。

我只是在寻找一些关于对于这类事情最明智的方法可能是什么的指示。例如,以下是我脑海中浮现的一些随机想法:

1) 有什么可以在打印样式表中使用 CSS 来完成这种动态调整大小和/或自动 chop 的操作吗?

2) 我准备在每个页面上都有一个按钮,上面写着“打印”,单击该按钮会生成一个具有完全不同标记的新页面,该标记针对我正在尝试做的事情进行了优化。这些页面中的所有数据都存储在数据库中,因此这是一个可以接受的解决方案。如果我最终选择了这个选项,尝试使用 HTML 表格、div 或其他东西来布置它是否最明智?

4) 我想知道我是否可以使用 JavaScript 以编程方式调整大小。是否有某种函数或库用于此类事情(计算文本 block 需要多少空间)?如果是这样,这是实现我的目标的一种相当可靠的方法吗?

5) 以某种方式在服务器端执行我正在尝试执行的操作是否更好?我正在使用 PHP,这很有帮助。

6) 如果一切都失败了,有没有办法以编程方式生成 PDF 页面服务器端,我可以根据我的单页要求进行布局?是否有适合这类事情的良好 PHP 库?

在此先感谢您的任何建议和指点!如您所知,我完全不知道应该从哪条路开始!

最佳答案

如果不使用 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) If not start loop where you:

a) 将每个字体大小减小 1

b) 再次检查高度

c) 如果好,则执行 window.print()

d) 如果高度仍然太大继续循环

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

希望这对您有所帮助。

:) 大卫

关于javascript - 以编程方式将 "Fit"可变长度 HTML 内容添加到单个打印页面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27278935/

相关文章:

javascript - 如何保护 iframe 源

php - 使用 phpexcel 在所有打印页面中设置页脚

php - 使用 php 流式传输视频/mp4

javascript - 带有 jquery mobile 的微调器

javascript - 修复 ASP.NET GridView 的标题行

javascript - 在下拉列表更改时显示表中的行

javascript - 如何使用 pdflatex 子进程在 Node.js 中获取 PDF 作为流?

javascript - AngularJS - 为什么有多个 Controller

php - 用于生成智能 URL 的搜索解决方案

javascript - playframework 从 View javascript 调用模型方法