Question

我的HTML页面包含以下结构：

<html>
<head></head>
<body>
<nav>
  ....  navigation menu
</nav>
   <div>
         <div></div>
         <div class="to-print">
           <h2>My div to display in print mode<h2>
           <section>
               <article>....content....</article>
           </section>
         </div>
         <div></div>
   </div>
   <div>
      .... HTML elements
   </div>
</body>
</html>

如果用户尝试打印页面，我只想打印带有to-print类的DIV内容。我怎样才能做到这一点？

Answer 1

如果这是你的html的确切结构，那么这对你有用。

＆＃13;

@media print {
  nav, 
  div > div:not(.to-print), 
  div + div:not(.to-print) {
      display: none;
  }
}

/* So you can see the styles working on the elements you want to hide outside of print */
  nav, 
  div > div:not(.to-print), 
  div + div:not(.to-print) {
      color: red;
  }

＆＃13;

<nav>
  ....  navigation menu
</nav>
   <div>
         <div></div>
         <div class="to-print">
           <h2>My div to display in print mode<h2>
           <section>
               <article>....content....</article>
           </section>
         </div>
         <div></div>
   </div>
   <div>
      .... HTML elements
   </div>

＆＃13;

Answer 2

您可以 @media print 和 @media screen 来定义将要打印的内容以及屏幕上显示的内容。

package main

import "os"

// echo a line in input to output
// you may add exit signal in copy loop as well
func main() {
    const BUF_SIZE = 128
    in := os.Stdin
    out := os.Stdout
    bufOut := make([]byte, BUF_SIZE)
    n := 0
    for {    // copy loop 
        // non buffered byte-by-byte
        if _, err := in.Read(bufOut[n : n+1]); err != nil {
            break
        }
        if bufOut[n] == 0xa || n == BUF_SIZE { // reached CR or size limit 
            if _, err = out.Write(bufOut[0 : n+1]); err != nil {
                break
            }
            n = 0
        } else {
            n++
        }
    }
}

或

创建一个新的css并包含如下：

 @media print {
       .to-print {
           --css to show content--
       }
 }

 @media screen {
       .to-print {
           --css to not show content--
       }
 }

@Media print css

2 个答案: