在 8.5x11 纸张上打印 HTML?

发布于 2024-12-07 15:31:19 字数 114 浏览 3 评论 0原文

我想在 8.5x11 张纸上打印一组数据(每张一组)。这些集合在网页上一个接一个地垂直呈现(在大小为 8.5x11 的 div 中)。

如何在单张 8.5x11 的纸上以相同的格式打印每个 div?

I would like to print sets of data on 8.5x11 sheets of paper (one set per sheet). These sets are rendered on a web page vertically one after another (in divs of size 8.5x11).

How can I print each of these divs with identical formatting on individual pieces of 8.5x11 sheets of paper?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

余生再见 2024-12-14 15:31:19

您可以执行以下操作:

  1. 尝试计算在一页上可以打印的

    的高度。这是由

    的内容决定的,并不完全由您控制(即,如果数据主要是文本,用户可以选择覆盖您的字体大小或缩放页面以进行打印) )。但是,您应该能够得出适合的大致高度。对于 12pt 字体,我发现它的高度约为 900 像素。

  2. 创建一个使用CSS 打印分页符<的.page 类< /a> 打印样式表中的规则。这些可以让您向浏览器建议是否应该在元素之前或之后出现分页符。

您最终会得到如下内容:

HTML

<div class="page">
    /* data */
</div>
<div class="page">
    /* more exciting data */
</div>

CSS

.page {
    font-size: 12pt; 
    height: 900px;  /* You'll need to play with this value */
    page-break-after: always; /* Always insert page break after this element */
    page-break-inside: avoid; /* Please don't break my page content up browser */
}

要了解更多内容,这篇 ALA 文章 提供了一些有关打印网页的出色技巧。

但是,如果您希望精确控制报告的打印方式,我建议您生成 PDF 并将其提供给用户。

You can do the following:

  1. Try to work approximately how tall a <div> you can print on one page. This is determined by the contents of the <div> and is not entirely in your control (i.e. if the data is mainly text, a user may choose to override your font size or scale the page for print). However you should be able to come up with an approximate height that fits. For 12pt font, I've found it to be around 900px in height.

  2. Create a .page class that uses the CSS printing page break rules in a print stylesheet. These let you suggest to the browser if a page break should occur before or after your element.

You'll end up with something like the following:

HTML

<div class="page">
    /* data */
</div>
<div class="page">
    /* more exciting data */
</div>

CSS

.page {
    font-size: 12pt; 
    height: 900px;  /* You'll need to play with this value */
    page-break-after: always; /* Always insert page break after this element */
    page-break-inside: avoid; /* Please don't break my page content up browser */
}

For more reading, this ALA article gives some excellent tips on printing your web pages.

However if you're looking for precise control over how the reports print, I would recommend generating a PDF and serving it to the user.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文