标签: css-print

我正在尝试显示 PDF 文件的页数。

所以在标题中我放了这个css：

.page-number:after { 
  counter-increment: pages; 
  content: counter(page) " of " counter(pages); 
 }

网址：

<span class="page-number">Page </span>

但它返回我Page 1 of 1... Page 2 of 2。第一个计数器工作正常，但总数是错误的。我该如何解决？

在我的网站上，打印已停止使用 Google Chrome（Linux 上的版本 81，如果这很重要）。打印预览窗口卡住了显示“正在加载预览...”。

执行此操作时，Chrome 会在控制台上打印以下消息：

[30378:30378:0424/004907.441044:ERROR:CONSOLE(2990)] "Uncaught TypeError: Cannot read property 'marginTop' of null", source: chrome://print/print_preview.js (2990)

当我打开开发人员工具并将 CSS 媒体类型模拟设置为“打印”时，页面显示正确，因为它会打印，并且控制台中没有错误。

我怎样才能找出问题的来源以及如何解决它？

你好，我想使用 css print 创建一些页面。我环顾四周，在网络上尝试了一些东西，但遗憾的是对齐不起作用。

我想要生成的 布局：

这是我的html

<section class ="page_1">
   <p class="paragraph_1"> .... </p>
   <p class="paragraph_2"> .... </p>
</section>

所以我尝试用打印媒体查询制作一些CSS

@page {
   size: 8cm 13cm; /*custom size*/
   }
 @media print {
   section[class ^="page"] {
     position: relative;
     /*Same as the page size*/
     width: 8cm;
     height: 13cm;
     display: flex;
     justify-content: space-around;
     flex-direction: column;
     align-items: center;
     page-break-after: always;
     padding: 0.5cm 2cm;
   }
   p[class ^="paragraph"] {
     /*NOTHING TO ADD FOR THE ALIGNEMENT*/
   }
 }

事情没有按预期进行。（保留空白页面并且不弯曲元素）

First of all, I found no duplicate of this, since the problem is not trying to avoid the break inside a row (this already works well) and I am not allowed to repeat headers on the next page.

Misc. threads that did not help with the problem but are related :

• How to prevent line breaks in list items using CSS
• Applying "page-break-before" to a table row (tr)
• Google Chrome Printing Page Breaks
• Printing a Gridview - how to print …