logo标签列表

在Chrome的打印设置CSS中强制使用A5纸张大小

htmlcssgoogle-chrome
15

我需要在一个Web应用程序中打印出两个HTML页面。 第一页必须以A5大小打印， 第二页以A4大小打印。 我尝试使用以下代码强制设置A5打印设置：

@media print{
    @page {
        size: a5 landscape;
        margin: 0;
    }
}

另一个文件中的a4打印设置与...

@media print {
    @page {
        size: a4;
        margin: 0;
    }
}

A4工作正常，但如果我尝试打印A5页面，则纸张大小不会改变（但横向模式已设置）。

Translated:

A4正常工作，但如果我尝试打印A5页面，纸张大小不会改变（虽然已设置为横向模式）。

你最终搞定了吗？ - Aotik
不幸的是，我仍在寻找解决方案 :( - oldmayn
2个回答
13

您可以使用paper-css库，它将帮助您轻松定义纸张大小

通过paper-css库加载css文件
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.3.0/paper.css">

然后在 <head> 部分设置样式

<style>@page { size: A5 }</style>

然后将body的class设置为A5，如下所示

<!-- Set "A5", "A4" or "A3" for class name -->
<!-- Set also "landscape" if you need -->
<body class="A5">

  <!-- Each sheet element should have the class "sheet" -->
  <!-- "padding-**mm" is optional: you can set 10, 15, 20 or 25 -->
  <section class="sheet padding-10mm">

    <!-- Write HTML just like a web page -->
    <article>This is an A5 document.</article>

  </section>

</body>

要获取更多信息，请点击下面的链接：https://github.com/cognitom/paper-css

1
使用这个媒体查询，内容将会适应 A5。
@media print
{
    @page
    {
         size: 8.5in 11in; 
    }
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接