html实现打印功能

实现代码 写入js文件中

 // 打印
 function preview(oper) {
   if (oper < 10) {
     bdhtml = window.document.body.innerHTML; //获取当前页的html代码
     sprnstr = "<!--startprint" + oper + "-->"; //设置打印开始区域
     eprnstr = "<!--endprint" + oper + "-->"; //设置打印结束区域
     prnhtml = bdhtml.substring(bdhtml.indexOf(sprnstr) + 18); //从开始代码向后取html
     prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr)); //从结束代码向前取html
     window.document.body.innerHTML = prnhtml;
     window.print();
     window.document.body.innerHTML = bdhtml;
   } else {
     window.print();
   }
 }

html代码

<!--startprint1-->
<div>
<button class="screen" style="cursor:pointer;" onclick="preview(1)">打印</button>
<!--  打印内容   -->
</div>
  <!--endprint1-->

startprint1和endprint1是用来标识打印开始位置和结束位置的 1代表打印对应的区域，与preview(1)中的1对应
打印的结果可能跟网页显示不完全一样,那是因为打印的时候不会将css文件考虑在内，需要我们手动设置：

@media print {
//写入需要打印的css样式
  .control {
    display: none;
  }
  body {
    background: white;
  }
  .one {
    box-shadow: 0 0 0 white;
  }
}

不过我做的时候是有疑问的，比如能不能把设置打印的背景颜色，因为我打印出来都是白色，设置无用。还有就是使用网上说的为打印另外准备一个css，也是无效的

<link rel="stylesheet" type="text/css" href="main.css" media="print">

知道的大佬可以回答一下哦！