问题标签 [css-print]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
16242 浏览

html - CSS - 如何计算总页数?

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

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

html:

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

0 投票
0 回答
50 浏览

html - 如何使用 css 中的媒体打印在单独的页面中显示迭代的组件

因为我使用的是 Angular,所以我有一个迭代组件/div。我还想在单独的债券纸中打印迭代的 div。但是当我尝试打印它时,它只显示第一页

这是我的 HTML

如您所见app-print-workrec,它被调用了两次。由于它被调用两次,因此也应该有 2 张证券纸。但在我的 CSS 中,只有第 1 页显示打印功能何时运行。这是我的 CSS

这是打印输出的图像:(应该有 2 页) 在此处输入图像描述

你如何解决这个问题?

0 投票
1 回答
1154 浏览

css - 在响应式站点上,打印时应用哪个断点?

我有一个响应式站点,我正在尝试在其中实现打印媒体查询。

当我使用 Chrome Devtools 预览时(Rendering tab > Emulate CSS media > Print),它看起来与该断点处的实际网站非常相似,但应用了打印 css。但是,在打印预览(CTRL + P)上,就完全不同了。

当我调整浏览器大小时,Devtools 预览会发生变化,所以我不能确定在实际打印预览模式中使用了哪个断点。

  1. 问题是,打印时,浏览器使用什么宽度来生成快照?
  2. 这个宽度在所有浏览器中是否一致?
  3. 如果没有固定的宽度,我该怎么做?
0 投票
1 回答
41 浏览

html - 页面顶部的空白部分,即使使用 css media='print"

当我定义我的 CSS @media 打印规则(见下文)时,我在打印预览中看到页面顶部的空白部分(参见打印预览中页面顶部的空白部分)。我尝试设置页边距以提升页面,但它会使内容倾斜。想法??

0 投票
1 回答
151 浏览

javascript - 打印时强制表格标题及其第一行在同一页上

打印时是否可以强制表格及其第一行内容在同一页上?当表格前面有一些其他内容时,就会出现这个问题。该表如下所示:

任何人都知道如何在打印时强制表格及其第一行(或前几行)内容在同一页面上?我试图用一个 div 来掩盖标题及其前几行(假设高度为200px,并page-break-inside: avoid使用),这可行,但它将父容器垂直扩展了 200px(当我用一个假人进行测试时,只有一个表需要掩蔽网页)并引入一个空白页面。

Jsfiddle 用于不应用屏蔽时:https ://jsfiddle.net/8pk5L3jz/29/

这是描述我的问题的jsfiddlediv.mask的链接,添加的内容会导致表的容器扩展 200px,因此它可能会导致空白页面(在我的虚拟示例中):https ://jsfiddle.net /8pk5L3jz/26/

0 投票
0 回答
49 浏览

css - css 打印媒体布局,带有标题和从上到下流动的两列布局

是否可以在要打印的所有页面上放置页眉

是否可以让主体有两列,从第一列流到第二列,然后到下一页,并且在列的中间有一个边框

布局演示https://www.scribd.com/document/391754619/Example

到目前为止,我有这个,但我还没有走远

0 投票
1 回答
233 浏览

google-chrome - 在 Chrome 中打印网页的自定义 Css 版本

使用 Google Chrome 的 Inspector,我可以轻松检查网页(任何公共网页,而不是我控制的网页)将如何被渲染以进行打印,执行此操作。

此外,我可以即时更改某些 Css 样式的外观。

我的问题是:我现在真的可以打印我已经在浏览的网页的修改版本吗?不是默认情况下,我已经检查过了,但也许我可以做些什么......

(编辑:我对改变背景颜色特别感兴趣)

0 投票
0 回答
2694 浏览

css - CSS 打印和 Flexbox

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

我要制作 的布局:我的布局

这是我的html

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

它没有按预期进行。(留下空白页,不弯曲元素)

0 投票
3 回答
1567 浏览

css - 如何将页眉和页脚添加到我从 Mobile Safari 打印的 html 内容的每一页?

我的任务是将 html 作为报告打印出来。我需要为报告中的每一页添加页眉和页脚。

我一直在使用这里解释的技术:https ://medium.com/@Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a让这些页眉和页脚出现在 Firefox、Chrome ,和 IE 11。

不幸的是,当我从 iOS 上的移动 Safari 打印页面时,我也需要它们出现,但它们不需要。

有没有人有一种工作技术可以将页眉/页脚添加到移动 safari 打印输出的每一页?该报告的内容(例如表格)将跨越多个页面。

(我不希望在服务器端将报告呈现为 PDF)

0 投票
0 回答
452 浏览

html - 避免在特定 tr 行后分页

首先,我发现没有重复,因为问题不是试图避免在一行中出现中断(这已经很好用了),并且我不允许在下一页上重复标题。

杂项。对问题没有帮助但相关的线程:

我正在 PDF 上打印表格,并且我希望我的表格在第一页上打印,当且仅当它至少显示两行时。如果 2 行没有足够的空间,我希望整个表移动到下一页。

为了实现这一点,我尝试应用:

到我的第一个<tr>标签。这个想法是禁止第一排和第二排之间的休息,所以他们总是在一起。但这似乎不起作用。

我怎样才能实现这种行为?这是正确的方法和/或还有其他方法吗?

更新:还尝试将 声明<tr>为 CSS 中的块,但仍然没有骰子。然后尝试<tr>在第 1 行和第 2 行之间插入一个显示为块的“链接器”,其中:

但仍然无法正常工作。