标签: css-paged-media

我正在开发一个电子发票系统,我们的一个功能是生成发票的PDF并邮寄它们.我们有多个发票模板,稍后会创建更多模板,因此我们决定使用HTML模板,生成HTML文档,然后将其转换为PDF.但是我们遇到了wkhtmltopdf的问题,据我所知(我已经谷歌了几天才找到解决方案)我们不能简单地将HTML用作页眉/页脚,并在其中显示页码.

在错误报告(或其他)中(http://code.google.com/p/wkhtmltopdf/issues/detail?id=140)我用JavaScript读到了这个组合可以实现的.但是,无法在此页面或其他位置找到有关如何执行此操作的其他信息.

强制使用JavaScript当然不是那么重要,如果使用wkhtmltopdf一些CSS魔法可以工作,它就像任何其他hackish解决方案一样令人敬畏.

谢谢!

我正在使用Flying Saucer(将CSS/HTML转储到iText到PDF)创建PDF,我正在尝试使用CSS3将图像页眉和页脚应用到每个页面.

我基本上想把这个div放在每个页面的左上角:

<div id="pageHeader">
    <img src="..." width="250" height="25"/>
</div>

我的CSS看起来有点像这样:

@page {
    size: 8.5in 11in;
    margin: 0.5in;

    @top-left {
        content: "Hello";
    }
}

有没有办法让我把这个div放进去content？

所以我知道这个选项:带有CSS/HTML的页码.

到目前为止,似乎是将页码添加到页面的打印版本的最佳方式,但我无法在任何地方获得任何变化.我在Chrome,Firefox和IE9上试过我的Windows 7机器.根据一些链接,看起来像Prince XML这样的更专有的软件可能会支持这种链接.Web浏览器是否支持打印版本？

我试过制作一个空白的html文件,并在头部添加两个样式标签:

@page {
  @bottom-right {
    content: counter(page) " of " counter(pages);
  }
}

我也简化了它,甚至只是content: "TEXT";用来看看我是否可以得到一些东西出现.这是否支持任何地方？通过'this',我特别指的是@page和@bottom-right标签,因为我已经有很多次内容工作了.

我有一个Web应用程序,它有一个可能超过一页的报告,我想在每个页面中打印页眉和页脚.我找到并试试这个: 在每个页面重复一个报告标题, 但它对我不起作用.我尝试使用Opera,IE9,Firefox,Google Chrome但是......没有.page-margin工作正常,但内容是我想要的,它不起作用.

当打印(或者,通常,在分页媒体上显示文档)时,是否可以重排文档元素,以便当某个元素(例如图像)转移到下一页因为它不适合实际页面上的可用空间时,它后面的元素会被移动到实际页面的剩余空间吗？

我试图达到类似于(或相同)LaTeX Floats的效果,但只使用CSS.

为了说明它,让我们说我们有这种情况:

Page 1  | Paragraph A (...)   |
        | Paragraph B (...)   |
        |  _________________  |
        | | Top of image A  | |
        |_|_________________|_|

         ---- page break -----
         _____________________
Page 2  | | Rest of image A | |
        | |_________________| |
        |                     |
        | Paragraph C (...)   |
        | Paragraph D (...)   |
        |         ...         |
        |_____________________|

使用一些基本的CSS(参见这个问题),实现这一点没有问题:

Page 1  | Paragraph A (...)   |
        | Paragraph B (...)   |
        | …

我有一个带有标题(h1,h2,h3 ......)和段落的大型HTML文档.当我打印文档时,我希望自动将文档底部的标题转到下一页:

我能怎么做？我使用带有段落的"孤儿:3"CSS并使用"p"标签,但是使用h1或h2不起作用.

@page {
  size: A4;
}

p {
  orphans:3;
}

h1, h2 {
  orphans:3
}

关于行动的完整示例:

• 1-2页:段落孤儿工作正常.
• 2-3页:标题不起作用.

要求:

• HTML有一个主div容器.
• 不要改变HTML.
• 浏览器支持并不重要(根据我的具体工作).
• 我需要CSS中的一些技巧(最好没有JS或Jquery)
• 我不能使用page-break-before:总是因为我希望那些标题只在页面底部出现时才转到下一页.

我有一个包含步骤的程序.一些步骤伴随着图像.

    <p class="imagefloatright"><img src="step 1.png"/></p>
    <ol>
        <li>
          <p>Step 1</p>
          <p class="imagefloatright"><img src="step 2.png"/></p>
        </li>
        <li>
          <p>Step 2</p>
          <p>Step 3</p>
        </li>
    </ol>

和我的CSS:

p.imagefloatright img {
    float: right;
    clear: both;
}

这是默认输出.图像不会与它们所属的步骤保持一致,步骤2的文本放在图像1旁边:

我希望属于第2步的图像与第2步垂直对齐:

过去,我通过在每个浮动图像之前插入一个高度为0的全宽度块,在XSL-FO中实现了我想要的结果.

我可以使用CSS命令实现我想要的布局吗？或者,在将CSS应用于HTML之前,是否需要在HTML中插入块？

我有一个用于打印的 2 列布局。h2-5 在列内，h1s 跨越两列。我正在使用Paged.js进行分页。

这两个页面显示了可接受的布局：

但是，如果出现标题位于列底部的情况，我希望将标题强制到下一列的顶部。

如果一篇新文章从页面底部 40% 开始，我也希望它也被强制转到下一页。

对于 h2 及以下，我在标题上方注入一个 div，如果标题位于其列的底部，则将其膨胀以推入下一列。

这似乎对 h2-5 起作用，因为它们位于由浏览器管理的流中。但前提是它们在左栏中；如果他们是对的，他们就会被撞出页面。例如：

将 H1 从页面上弹出会导致问题，垫片膨胀，但将标题推入一个不可见的区域，或其他一些奇怪的情况。

第一张图片显示了出现在第二张图片中的标题，从页面上消失了。

以下（稍微简化的）标记是生成第 11 页（右图，第二张图）的原因

<div class="the-articles">
  <article class="architectural-review.com paper-story noted">
    <p>
      No question, Rem is a genius. Nonetheless, his wake is toxic: stained by
      Randian egos (both triumphal and crushed), the intense interpersonal
      competition, and the exploitation of intellectual and manual labour. How
      does it all end, you wonder. In some ways, Tomas Koolhaas’s documentary
      was a preemptive …

在分页媒体中,CSS属性target-counters可用于包含多个计数器.规范给出了以下示例(简化):

a::after {
 content: "see section " target-counters(attr(href, url), section, ".")
}

应输出类似的东西(see section 1.3.5).

我该怎么设置section柜台？

切换到嵌套有序列表（每个列表都有一个或多个带 div 的li ）后，我会遇到可怕的分页符，将文本切成两半。我不介意内容是否有分页符，但让它在页边距中破坏中间文本字符是不可接受的。

示例 html（任意深度的 ol + li + ol + ... 嵌套直到运行时才知道 - 在 React 中生成单页内容）：

我已经放置了 css 来避免图像上的分页符，并且还在问题类中放置了“avoid-break”类：

.TestEditorQuestion {
  position: relative;
  border: 3px;
  background-color: #eee;
  border-color: gray;
  padding-left: 0.8rem;
  padding-right: 0.8rem;
  padding-top: .08rem;
  padding-bottom: .08rem;
  margin: 5px;
  text-align: left;
  border-radius: 10px;
  width: 99%;
  display: block;
  height: 10%;
  box-sizing: border-box;
}

... lots of css code that doesn't affect this

avoid-break {
  break-inside: avoid;
  page-break-inside: avoid; // for older browsers
}

@media print {
  .no-print,
  button …