Question

<!DOCTYPE html>
<html>
<head>
  <title>Estimate bill</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <style type="text/css">
    * {display:none;}
    page[size="A4"] > * {display: block !important;}
  </style>
</head>
<body>
  <page size="A4">
  Hello world
  </page>
</body>

我想隐藏身体，但我想显示页面元素。我怎么能实现这一点请帮助我。这是一个打印任务。我想只打印页面元素区域。

Answer 1

<!DOCTYPE html>
<html>
<head>
  <title>Estimate bill</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <style type="text/css">
    * {
      visibility: hidden;
    }
    page {
      visibility: visible !important;
    }
  </style>
</head>
<body>
  <page size="A4">
    Hello world
  </page>
</body>

Answer 2

我不确定我是否理解你的意思，但也许是这样的？

<!DOCTYPE html>
<html>
<head>
<title>Estimate bill</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
  @media print {
  * {visibility: hidden;}
  page {visibility: visible;}
  .a4 {
    position: absolute;
    left: 0;
    top: 0;
    }
}
</style>
</head>
<body>
  <page size="A4" class="a4">
    Hello world
  </page>
</body>
 </html>

我已经更新了我的代码。

Answer 3

您需要将以下.hide css类设置为打印期间要隐藏的任何元素。

<style type="text/css">
@media print{
    .hide {
        display: none;
    }
}
</style>

<div class="hide"> Some content here... </div>

Answer 4

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <title>Estimate bill</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <style type="text/css">
    body{
    visibility: hidden;
    }
    .show {
     visibility: visible;}
  </style>
</head>
<body>
  <page size="A4" class="show">
  Hello world
  </page>
</body>

＆＃13;

CSS显示特定区域

4 个答案: