标签: print-css

我正在尝试自定义打印CSS,并发现它打印出带有href值和链接的链接.

这是在Chrome中.

对于这个HTML:

<a href="http://www.google.com">Google</a>

它打印:

Google (http://www.google.com)

我希望它打印:

Google

Firebug是一个很好的工具,可以显示某些HTML元素的屏幕媒体CSS,但有没有办法查看打印媒体CSS呢？或者还有其他工具可以看到打印媒体CSS吗？

我正在设计一组要打印的HTML页面,我希望页面的元素最终达到相同的比例.例如,有一类div,其宽度定义为200px宽,出现在几个页面的每一页上.我希望它在每页打印时看起来都是相同的尺寸(适用于例如切割和叠加).

我正在使用一些在Chrome中效果最好的东西(主要是CSS缩放规则,以便在其他地方使用较小的元素副本),所以理想情况下我想继续使用Chrome.(这在Firefox中会更容易,因为它在打印对话框中具有明确的缩放比例.)但是在Chrome上,从不同页面打印时保持相同元素的大小一致并非易事.

Chrome的PDF生成(这是从Chrome进行打印的内容)似乎选择一些部分来定义页面的宽度,并根据该部分缩放页面的其余部分.或者它可能尝试将页面大小设置为适合一页上的"最佳"元素数.如果每个页面的外部框架元素在所有情况下都不是相同的尺寸,那么屏幕尺寸为200px的元素可能会出现从3-4厘米到1.5-2厘米或更小的任何东西.

只是使用@page size没有帮助:我有这个CSS,它没有任何区别:

@media print {
  @ page size: 297mm 210mm 
}

有没有人对如何以一致的尺寸打印出来的东西有任何想法？

我可以应用的一个极端的解决方法是将它们作为一个大HTML页面的所有部分,并使用Javascript将某些部分标记为要打印的唯一部分...我甚至不确定它是否有效,并且它' d在几个不同的页面上比较干净.还有其他想法吗？

我有一些简单的CSS:

#someElement {
    background-color:black;
    color:white;
}

它在浏览器中看起来不错,但是当我在Firefox中打印它时,它在白色背景上显示为黑色文本.我想这是一种节省墨水的功能,但有什么方法吗？

我正在使用表格在每个页面上创建一个页脚(在Firefox中运行,这就足够了).

JS小提琴:https://jsfiddle.net/j9k2xzze/

(右键单击输出窗格 - >此框架 - >在新选项卡中打开框架.然后打印预览将正常运行)

<table id="wrapper">
    <thead>
    <tr>
        <td id="header"></td>
    </tr>
    </thead>

    <tfoot>
    <tr>
        <td colspan="0" id="footer">
            <img src="footer.jpg"/>
        </td>
    </tr>
    </tfoot>

    <tbody>
    <tr>
        <td id="content">
            <?php echo $html; ?>
        </td>
    </tr>
    </tbody>
</table>

但是在最后一页上,表格页脚直接显示在文本下方.如果文本比最后一页短,则页脚会粘到它上面.

我喜欢页脚在最后一页的最底部.不幸的是@page扩展名在firefox中不起作用,或者我做错了:

@page:last {
  #footer {
    position: absolute;
    bottom: 0;
  }
}

我的代码的一个例子是:

<div class="print">
This div needs to be on one page.
</div>

<div class="print">
This div needs to print on a separate page.
</div>

我有一对divs像上面那样,我需要每个人div在打印时都在自己的页面上.我试着'page-break-before'和'page-break-after'对.print在print.css类.我不确定我做错了什么.

在我看来,这似乎'page-break-after'是正确的,这是我在搜索时总能找到的解决方案,但我似乎无法让它工作.

我一直在页面标题中为现有项目添加一些新的CSS(使用media ="print").它是顺利的(一次!)IE给出了很好的预期结果,但Firefox不...

问题是我有一个包含很多字段的字段集,Firefox完全拒绝(即使在最新版本中)允许在字段集内部进行分页.这意味着任何不适合一页的东西都会丢失......

我已经在mozilla网站上发现了已经开放3年的错误 - https://bugzilla.mozilla.org/show_bug.cgi?id=471015 - 但找不到任何合理的解决方法......

在我想删除字段集或类似之前的任何建议？

谢谢,戴夫

我有一个很长的HTML来打印.页面已准备好进行打印,但我需要对每一页进行边框处理.我body { border:2px #666 solid; padding:5px; }在CSS代码中添加了.HTML视图很好但打印视图不是.因为border-bottom没有显示第一页而border-top没有显示所有其他页面.

我希望,我可以解释我想要的东西.我正在搜索并仍在寻找解决方案.而且我认为这很容易.但是还没找到.

我的一个应用程序是基于Web的POS(销售点).所以在chrome中打印发票时.浏览器自动插入的页眉和页脚,我想通过页面进行压缩,无需用户干预..

我在打印媒体中应用了一些CSS,

@media print {
 #header, #footer { 
    visibility: hidden !important;
    display: none !important;
 }
}

但它没有应用,也许选择器不正确？

我也尝试通过减少边距,但它切割/覆盖页面内容,如果打印有多个页面..还有一件事,我不想禁用chrome的打印预览选项..

任何人都有这个很好的解决方案？

最好的祝福..

我试图以我希望它在CSS中使用@page指令的方式为我打印打印预览.出于某种原因,无论我的页边距设置为什么,内容都会被压扁,即使数字被认为是精确的.这是一个测试的例子:

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

如果你打开这个页面上的打印预览(我正在测试chrome),你会发现这些卡非常偏离中心.不过这是件事 - 我的卡片设置为2.5in乘3.5in,页面本身设置为8.5in乘11in.这意味着我应该在左右之间有大约1英寸的边距,在顶部和底部有0.5英寸的边距,这意味着我的边距应该在每一边减半.但是,如果我真的这样做,它看起来很乱:

这是我的@page CSS:

  @media print {
    html, body, .printable, .results-pane, .embed-view {
      width: 8.5in !important;
      height: 11in !important;
    }

    @page {
      size: 8.5in 11in;
      margin-top: 0.25in;
      margin-left: 0.5in;
      margin-right: 0.5in;
      margin-bottom: 0.25in;
    }
  }

即使我尝试手动设置边距,问题仍然存在,通过这种方式,您甚至可以看到我的内容被压扁.这是它的外观绝对没有边距(留下1英寸和0.5英寸的边距:

以下是我自己设置边距时的样子:

有没有办法可以阻止浏览器执行这种压扁行为,或使用我的@print查询来解决这个问题？作为参考,我已尝试在主体上设置边距,但顶部/底部边距不会在多个打印页面上保留.