window.print()页面打印

最新推荐文章于 2024-10-31 15:50:03 发布

花生柿子

最新推荐文章于 2024-10-31 15:50:03 发布

阅读量208

点赞数 1

文章标签：前端 java javascript

本文链接：https://blog.youkuaiyun.com/nss33678/article/details/140153722

版权

1.打印整个页面,直接调用window.print()方法

 <div>
    
    <button @click="handleClick">打印此页面</button>
  
    <span>97898455664646546546464646454654646546</span>
    <!--startprint-->
    <div class="bodys" id="gaokao">
      <div class="rugrats">高考加油！</div>
      <div class="rugrats">榜上有名！</div>
      <div class="rugrats">繁花似锦！</div>
    </div>
    <!--endprint-->
  </div>
<script>
    export default{
    methods:{
             handleClick() {
                
                window.print();

            }
       },
    }
</script>

2.打印页面的一部分内容

 <div>
    
    <button @click="handleClick">打印此页面</button>
  
    <span>97898455664646546546464646454654646546</span>
    <!--startprint-->
    <div class="bodys" id="gaokao">
      <div class="rugrats">高考加油！</div>
      <div class="rugrats">榜上有名！</div>
      <div class="rugrats">繁花似锦！</div>
    </div>
    <!--endprint-->
  </div>
<script>
    export default{
    methods:{
             handleClick() {
               let odlStr = window.document.body.innerHTML;
                  let start = "<!--startprint-->";
                  let end = "<!--endprint-->";
                  let newStr = odlStr.substr(odlStr.indexOf(start) + 17);
                  newStr = newStr.substring(0, newStr.indexOf(end));
                  window.document.body.innerHTML = newStr;
                  window.print();
                  window.document.body.innerHTML = odlStr;
            }
       },
    }
</script>

3.或者给需要打印的区域最外层添加div,加id

    handleClick() {
      
      let newStr = document.getElementById("gaokao").innerHTML;
      let odlSt = document.body.innerHTML;
      document.body.innerHTML = newStr;
      window.print();
      document.body.innerHTML = odlSt;
      return false;
    },