问题标签 [print-css]

我需要一个非常愚蠢的东西，但我被困住了。我基本上需要渲染一个 gsp 页面并将渲染本地保存在我在 web-app/ 下创建的文件夹中的服务器端。

基本上这个输出：

必须保存在文件中，例如在 web-app/report/ 中的文件夹中的示例 report-test.html

有什么好的建议吗？

多谢

更新-解释 非常感谢大家。让我解释一下我正在尝试做的事情，希望有更好的解决方案。我敢打赌，我仍然是 grails 的新手。我正在尝试使用可帮助我创建 pdf 的 print-css 和 Price 软件打印报告。所以我的想法是使用 gsp 动态创建 HTML 文件，并遵循 print-css 规则，然后将其保存在服务器端本地，然后执行创建我的 pdf 文件并将 pdf 文件返回到浏览器。

更新 我需要使用 css 但不能在 html 中使用，而是作为 Price 软件命令的一部分。http://www.princexml.com/ 所以基本上呈现的gps是一个没有应用任何css的html，然后当我运行命令来创建pdf时，我指定要应用的css文件。例如：

更新/2 - 关闭

感谢shutgunNinja，在下面的帖子中看到他的伪代码，这里是我要使用的代码：

所以正如shutgunNinja 之前写的，我调用buildReport() 来调用URL 来获取html 文件。我想补充几点建议：

• 如果您使用某些安全框架（如 spring security）请小心，您必须能够在没有身份验证的情况下调用该页面，否则您会看到登录页面而不是您请求的文件
• 我添加了存储正确地址的基本路径 var 以访问 web-app 目录

我创建了一个生成 A4 页面的简单打印 CSS。

在 Firefox 38.0.1 中，在“打印预览”窗口中，正文（绿色）有一个额外的高度，会触发第二个页面

如果我打印文件，会打印 2 页，所以这不是仅与打印预览有关的问题。

我已经删除了页面设置部分的所有边距以及 Firefox 添加的所有额外元素（如标题、网址、日期......）

Chrome 43.0.2357.81 上的同一页面没有任何问题

我该如何解决？

I am using a table to create a footer on every page (works in Firefox, that's enough).

A JS Fiddle: https://jsfiddle.net/j9k2xzze/

(right click on the output pane -> This Frame -> Open Frame in New Tab. Then Print Preview will function as normal)

But on the very last page the table footer is displayed directly below the text. If the text is shorter than the last page, the footer sticks to it.

I like the footer to be at the very bottom on the last page. Unfortunately the @page extension does not work in firefox or I am doing it wrong:

我有我的表头内容，我想在每个页面上打印溢出的表体数据。我尝试了 thead display: table-header-group 但它似乎没有帮助。关于如何使其在 IE10 或 chrome 中工作的任何建议？

HTML。

浏览该网站时，所有字体均正常显示。打印页面时，预览和相应的输出都是 Times New Roman 格式。这是我的 CSS 规则：

刚刚注意到这种情况正在发生。该行为不会出现在任何版本的 IE、Firefox、Chrome 等中。我一直在搜索，但在打印时没有发现任何与此相关的信息，只有 Edge 不支持 woff2 之类的东西。

在这里它正确渲染：

它在打印预览中，这也是它打印/保存为 PDF 的方式：

我有一个非常简单的页面生成一张票。它在用户名+票号后面有一个img。一切都正确显示，但 Firefox 根本不打印这些名称。有任何想法吗？

编辑：我已经添加了我在那里的所有代码。不知道我可以添加更多。

我正在尝试让打印预览以我希望它使用 CSS 中的 @page 指令的方式为我打印。出于某种原因，无论我的页边距设置为多少，内容都会被挤压，即使数字应该是准确的。这是一个测试示例：

https://deck.zone/embed/-KK43Q9JoAqMIYd5gLj5;scriptId=0;print;tabs=result,code

如果您在此页面上打开打印预览（我正在使用 chrome 进行测试），您会看到卡片非常偏离中心。不过，事情是这样的——我的卡片设置为 2.5 英寸 x 3.5 英寸，而页面本身设置为 8.5 英寸 x 11 英寸。这意味着我应该在左右之间留出大约 1 英寸的边距，在顶部和底部留出 0.5 英寸的边距，这意味着从逻辑上讲，我的边距应该在每一侧减半。但是，如果我真的这样做，它看起来会被压扁：

这是我的@page CSS：

即使我尝试手动设置边距，问题仍然存在，并且您甚至可以看到我的内容被压缩了。这是绝对没有边距的外观（保留 1 英寸和 0.5 英寸的边距：

这是我自己设置边距时的样子：

有没有办法可以阻止浏览器执行这种挤压行为，或者使用我的@print 查询来解决这个问题？作为参考，我尝试在正文本身上设置边距，但顶部/底部边距不会在多个打印页面上持续存在。

我正在寻找一种在打印时将我网站的左侧区域放在额外页面上的方法。
可能有人有同样的问题，并找到了一个简单的方法来做到这一点。

目前，我的网站正在逐个打印元素，但我想控制它。我想要一个特定的元素打印在下一页上，而不仅仅是在之前的元素之后。

我想知道，如果元素中间有分页符，是否可以使用 HTML/CSS 在元素之前创建分页符。例如，现在当我保存为 PDF 时，表格被分成两个不同的页面。

有什么想法吗，谢谢

-蒂莫

我希望分页符在<h2>. An<h2>上有一个上边距，以将其与之前的内容分开，但如果它紧跟分页符，我不希望边距出现，这就是我正在努力解决的部分。

现在我的 CSS 看起来像这样：

边距和分页符似乎是不同版本的 CSS 发生变化的事情之一。有一次（CSS 2.0？）页面顶部元素的边距似乎与页面的边距一起折叠，但情况不再如此。

如果相关的话，我在 FreeBSD 下使用 Wea​​syPrint。我正在对从 markdown 生成的 HTML 进行样式设置，因此添加<section>或<div>标记充其量是尴尬的。