网页中通过JS调用window.print()打印问题？

在软件项目开发中，通常我们要实现打印功能，打印当前页面等打印需求，我们一般会使用window.print来打印。

1.在页面的代码头部处加入JavaScript：

html页面中我们这样写：

 



        

            

                

                    

                        不打印的内容部分
                    

            
        
    
    
        << 返回

            
            

            

                

                    

                        

                            

                                需要要打印的内容部分
                            

                    
                
            
            
            

以上是常见的一种打印方式，有时候我们需要在打印的时候带背景图片，或者水印。

@media print {
	.layout {
		background: url(../images/watermark.png) repeat;
		height: 100%;
		width: 100%;
		overflow: hidden;
	}
	
}

如果你在页面中使用了boostrap3.x版本，背景图片就会打印不出来，而且打印的内容如果用到了table，表格会加粗显示失去了美化好的css样式，我们就需要分析boostrap3.x的打印样式@media print{}

/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
@media print {
  *,
  *:before,
  *:after {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;

    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  .navbar {
    display: none;
  }
  .btn > .caret,
  .dropup > .btn > .caret {
    border-top-color: #000 !important;
  }
  .label {
    border: 1px solid #000;
  }
  .table {
    border-collapse: collapse !important;
  }
  .table td,
  .table th {
    background-color: #fff !important;
  }
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #ddd !important;
  }
}

有这样一句  color: #000 !important;   background: transparent !important;会是背景图片显示不出来，去掉之后显示正常。